class MyPromise{
constructor(fn) {
if (!this.isFunc(fn)){
throw new Error('这不是个函数')
}
this.status = 'pending'
//定义两个属性保存resolve和reject中的参数
this.value = undefined
// 存放成功的数组
this.onSuccessCallbacks = []
this.fail = undefined
// 存放失败的数组
this.onFailCallbacks = []
//函数参数中有两个回调参数;resolve和reject
this.resolve = (data) =>{
//状态一旦发生改变就不会在改变,所以在这里判断下是否为默认状态
if (this.status === 'pending'){
this.status = 'fulfilled'
this.value = data
if (this.onSuccessCallbacks){
this.onSuccessCallbacks.forEach((fn) => {
fn(this.value)
})
}
}
}
this.reject = (data) =>{
if (this.status === 'pending'){
this.status = 'rejected'
this.fail = data
if (this.onFailCallbacks){
this.onFailCallbacks.forEach((fn) => {
fn(this.fail)
})
}
}
}
fn(this.resolve,this.reject)
}
then(onSuccess,onFail){
return new MyPromise((nextSuccess,nextFail) => {
//then返回的promise可以捕捉当前then方法中的异常
// 所以我们可以利用try catch来捕获异常
try {
if (this.isFunc(onSuccess)){
if (this.status === 'fulfilled'){
let res = onSuccess(this.value)
if (res instanceof MyPromise){
res.then(nextSuccess,nextFail)
}else if (res !== undefined){
nextSuccess(res)
}else {
nextSuccess()
}
}
}
// 将异常信息传递给下一个promise失败的回调
}catch (e) {
nextFail(e)
}
try {
if (this.isFunc(onFail)){
if (this.status === 'rejected'){
let res = onFail(this.fail)
if (res instanceof MyPromise){
res.then(nextSuccess,nextFail)
}else if (res !== undefined){
nextSuccess(res)
}else {
nextFail()
}
}
//这里要加个判断,因为我们有时写的话可能会省略then中失败的回调,利用catch捕获
}else if (onFail === undefined){
if (this.fail){
nextFail(this.fail)
}
}
}catch (e) {
nextFail(e)
}
// 解决延迟回调的问题
if (this.status === "pending"){
if (this.isFunc(onSuccess)){
this.onSuccessCallbacks.push(() => {
try {
let res = onSuccess(this.value)
if (res instanceof MyPromise){
res.then(nextSuccess,nextFail)
}else if (res !== undefined){
nextSuccess(res)
}else {
nextSuccess()
}
}catch (e) {
nextFail(e)
}
})
}
if (this.isFunc(onFail)){
this.onFailCallbacks.push(() => {
try {
let res = onFail(this.fail)
if (res instanceof MyPromise){
res.then(nextSuccess,nextFail)
}else if (res !== undefined){
nextSuccess(res)
}else {
nextFail()
}
}catch (e) {
nextFail(e)
}
})
}else if (onFail === undefined){
this.onFailCallbacks.push(nextFail)
}
}
})
}
// catch可以看作是then的一个语法糖
catch(onFail){
return this.then(undefined , onFail)
}
// 首先定义个方法判断是否为函数
isFunc(fn){
return typeof fn === 'function'
}
}
let a = new MyPromise(function (resolve,reject){
resolve('xyz')
// reject('xyz')
console.log('执行了');
})
let b = a.then(function (data) {
console.log(data,'成功');
xxx
})
b.then(function (data) {
console.log(data);
},function (data) {
console.log(data,'sss');
})
怎么实现一个Promise?
原创wx6466e98304c96 ©著作权
文章标签 Promise 文章分类 JavaScript 前端开发
-
利用promise实现一个超时请求处理
今天面试官问的我这个问题,说实话,我当时懵逼了。我第一个想法竟然是:嘶~这问题挺简单的啊,不就是_d
JavaScript promise es6 请求超时 前端面试