手撕-Promise

81次阅读

共计 12486 个字符，预计需要花费 32 分钟才能阅读完成。

前言

了解一个货色最好的方法之一就是入手本人写，So，他（Promise）来了。废话不多说，来看如何实现。

“五岳归来不看山，黄山归来不看岳。”心愿看完这篇，你就不必再去看其余 Promise 的实现原理了。

Promise 解析

先来看 Promise 用法：

new Promise((resolve, reject) => {resolve('hello'); // or reject('hello')
})
 .then(res => {})
 .catch(err => {})
 
 ----------- 分割线
// 合成一下，也就是上面这样
let executor = (resolve, reject) => {resolve('hello'); // or reject('hello')
}

 new Promise(executor)
 .then(res => {})
 .catch(err => {})

咱们来剖析一下他有哪些 性能 / 个性：

  • [x] 1、构造函数里传一个函数的两个参数（resolve, reject）
  • [x] 2、resolve 胜利时执行的回调
  • [x] 3、reject 失败时执行的回调

  • [x] 4、三种状态

    • pending [待定] 初始状态
    • fulfilled [实现] 操作胜利
    • rejected [被否决] 操作失败
  • [x] 5、Promise 对象办法 then
  • [x] 6、异步实现
  • [x] 7、onFulfilled 和 onRejected 的异步调用
  • [x] 8、值穿透
  • [x] 9、Promise 对象办法 catch
  • [x] 10、Promise 对象办法 all
  • [x] 11、Promise 对象办法 race
  • [x] 12、Promise 对象办法 resolve
  • [x] 13、Promise 对象办法 reject
  • [] 13、Promise 对象办法 allSettled（上个月 TC39 进去的新个性）

接下来，咱们要一一撕下他的假装，揭开他的真面目。

Promise 的根本构造实现

基于下面剖析后果，咱们先来实现后面三个性能：

  • [x] 1、构造函数里传一个函数的两个参数（resolve, reject）
  • [x] 2、resolve 胜利时执行的回调
  • [x] 3、reject 失败时执行的回调
class Promise {constructor(executor) {
        // 定义 resolve
        let resolve = res => {}
        // 定义 reject
        let reject = err => {}

        // 主动执行
        executor(resolve, reject);
    }
}

// 测试一下：new Promise((resolve, reject) => {console.log('执行到啦~')
})

能够将下面代码复制到控制台执行，查看成果：

Promise 三种状态实现

Ok，fine，接下来，咱们来实现她的三种状态。

  • [x] 4、三种状态

    • pending [待定] 初始状态
    • fulfilled [实现] 操作胜利
    • rejected [被否决] 操作失败

promise 状态有如下特点:
1.promise 对象初始化状态为 pending

2. 当调用 resolve(胜利)，会由 pending => fulfilled

3. 当调用 reject(失败)，会由 pending => rejected

Promsie 状态 只能由 pending => fulfilled/rejected, 一旦批改就不能再变

class Promise {constructor(executor) {
        this.status = "pending"; // 默认状态
        this.value;  // resolve 胜利时的值
        this.error;  // reject 失败时的值

        let resolve = res => {if(this.status === "pending") {
                this.value = res;
                this.status = "resolved";
            }
        }

        let reject = err => {if(this.status === "pending") {
                this.error = err;
                this.status = "rejected";
            }
        }

        executor(resolve, reject);
    }
}

1）pending [待定] 初始状态

测试一下，如果不去 resolve，也不去 reject

// 测试一下：new Promise((resolve, reject) => {})

那么 Promise 应该是初始状态。咱们将下面代码执行测试一下，失去后果如下：

此时状态是：{status: "pending"}。

2）fulfilled [实现] 操作胜利

当咱们执行 resolve

// 测试一下：new Promise((resolve, reject) => {resolve('胜利啦~'); 
})

将失去后果如下：

3）rejected [被否决] 操作失败

当执行 reject

// 测试一下：new Promise((resolve, reject) => {resolve('失败啦~')
})

Promise 对象办法 then 实现

  • [x] 5、Promise 对象办法 then

Promise 这个对象有 then 办法，还是先来剖析，then 有什么？

then 承受两个回调

promise.then(onFulfilled, onRejected); // 这里假如 promise 继承于 Promise 类

咱们持续在后面 Promise 类中书写 then 办法：

class Promise {constructor(executor) {
            this.status = "pending"; // 默认 promise 状态
            this.value;  // resolve 胜利时的值
            this.error;  // reject 失败时的值

            let resolve = res => {if(this.status === "pending") {
                    this.value = res;
                    this.status = "resolved";
                }
            }

            let reject = err => {if(this.status === "pending") {
                    this.error = err;
                    this.status = "rejected";
                }
            }

            executor(resolve, reject)
        }

        // 申明 then
        then(onFullfilled, onRejected) {if(this.status === "resolved") {onFullfilled(this.value)
            }
            if(this.status === "rejected") {onRejected(this.error)
            }
        }
    }

测试一下：

new Promise((resolve, reject) => {resolve("胜利啦~"); // 或  reject("失败啦~")
    })
    .then(res => {console.log(res);
    }, err => {console.log(err);
    })

失去后果：

异步实现

  • [x] 6、异步实现

至此，根本实现简略的同步代码，然而当 resolve 在 setTimeout 内执行，then 时 state 还是 pending 期待状态。咱们就须要在 then 调用的时候，将胜利和失败存到各自的数组，一旦 reject 或者 resolve，就调用它们。

相似于 散布订阅，先将 then 内的两个函数存储，因为 promise 能够有多个 then，所以存在同一个数组内。当胜利或失败的时候用 forEach 调用他们。

class Promise {constructor(executor) {
            this.status = "pending"; // 默认 promise 状态
            this.value;  // resolve 胜利时的值
            this.error;  // reject 失败时的值
+           this.resolveQueue = []; // 胜利寄存的数组
+           this.rejectQueue = []; // 失败寄存法数组

            let resolve = value => {if(this.status === "pending") {
                    this.value = value;
                    this.status = "resolved";
                    // 一旦 resolve 执行，调用胜利数组的函数
+                   this.resolveQueue.forEach(fn => fn());
                }
            }

            let reject = value => {if(this.status === "pending") {
                    this.error = value;
                    this.status = "rejected";
                }
                // 一旦 reject 执行，调用失败数组的函数
+               this.rejectQueue.forEach(fn => fn());
            }

            executor(resolve, reject)
        }
        
        // 执行到 then 的时候
        then(onFullfilled, onRejected) {if(this.status === "resolved") {this.resolveQueue.push(() => {onFullfilled(this.value);
                })
            }
            if(this.status === "rejected") {this.rejectQueue.push(() => {onRejected(this.error);
                })
            }
            // 当状态 state 为 pending 时
+           if(this.status === "pending") {
                // onFulfilled 传入到胜利数组
+               this.resolveQueue.push(() => {+                   onFullfilled(this.value);
+              })
                // onRejected 传入到失败数组
+               this.rejectQueue.push(() => {+                   onRejected(this.error);
+               })
+           }
        }
    }

then 的链式调用

  • [x] 7、then 的链式调用

咱们经常用到 new Promise().then().then() 这样的写法，这就是链式调用，原来是用于解决天堂回调的。那么如何去实现呢？
为了达到这个成果，咱们能够再第一个 then 函数内再返回一个 Promise，让这个新的 Promise 返回的值传递到下一个 then 中。

一句话总结：

通过在 then 中 return 一个新的 Promise，从而实现 then 的链式调用！

代码如下：

class Promise {constructor(executor) {
        this.status = "pending"; // 默认 promise 状态
        this.value;  // resolve 胜利时的值
        this.error;  // reject 失败时的值
        this.resolveQueue = []; // 胜利时回调队列
        this.rejectQueue = []; // 失败时回调队列

        let resolve = value => {if(this.status === "pending") {
                this.value = value;
                this.status = "resolved";
                this.resolveQueue.forEach(fn => fn())
            }
        }

        let reject = value => {if(this.status === "pending") {
                this.error = value;
                this.status = "rejected";
                this.rejectQueue.forEach(fn => fn())
            }
        }

        executor(resolve, reject)
    }

    then(onFullfilled, onRejected) {
        let promise2;
        if(this.status === "resolved") {promise2 = new Promise((resolve, reject) => {let x = onFullfilled(this.value);
                resolvePromise(promise2, x, resolve, reject);
            })
        }
        if(this.status === "rejected") {promise2 = new Promise((resolve, reject) => {let x = onRejected(this.value);
                resolvePromise(promise2, x, resolve, reject);
            })
        }
        if(this.status === "pending") {promise2 = new Promise((resolve, reject) => {this.resolveQueue.push(() => {let x = onFullfilled(this.value);
                    resolvePromise(promise2, x, resolve, reject);
                })
                this.rejectQueue.push(() => {let x = onRejected(this.error);
                    resolvePromise(promise2, x, resolve, reject);
                })
            })
        }

        return promise2;
    }
}

------------------- 分割线
// 将下面代码整顿一下
class Promise {constructor(executor) {
        this.status = "pending"; // 默认 promise 状态
        this.value;  // resolve 胜利时的值
        this.error;  // reject 失败时的值
        this.resolveQueue = []; // 胜利时回调队列
        this.rejectQueue = []; // 失败时回调队列

        let resolve = value => {if(this.status === "pending") {
                this.value = value;
                this.status = "resolved";
                this.resolveQueue.forEach(fn => fn())
            }
        }

        let reject = value => {if(this.status === "pending") {
                this.error = value;
                this.status = "rejected";
                this.rejectQueue.forEach(fn => fn())
            }
        }

        executor(resolve, reject)
    }

    then(onFullfilled, onRejected) {
        let promise2;
        promise2 = new Promise((resolve, reject) => {if(this.status === "resolved") {let x = onFullfilled(this.value);
                // resolvePromise 函数，解决本人 return 的 promise 和默认的 promise2 的关系
                resolvePromise(promise2, x, resolve, reject);
            }
            if(this.status === "rejected") {let x = onRejected(this.value);
                resolvePromise(promise2, x, resolve, reject);
            }
            if(this.status === "pending") {this.resolveQueue.push(() => {let x = onFullfilled(this.value);
                    resolvePromise(promise2, x, resolve, reject);
                })
                this.rejectQueue.push(() => {let x = onRejected(this.error);
                    resolvePromise(promise2, x, resolve, reject);
                })
            }
        });
        
        // 返回 promise，达成链式成果
        return promise2;
    }
}

最初，咱们来实现下面的 resolvePromise 函数，咱们暂且将第一个 then 返回的值成为 x，在这个函数中，咱们须要去判断 x 是不是 promise（这里是重点！）：

  • 是：则取他的后果，作为新的 promise2 胜利的后果
  • 不是：间接作为新的 promise2 胜利的后果

resolvePromise 代码如下：

/**
 * 解决 promise 递归的函数
 *
 * promise2 {Promise} 默认返回的 promise
 * x {*} 咱们本人 return 的对象
 * resolve
 * reject
 */
 function resolvePromise(promise2, x, resolve, reject){
  
  // 循环援用报错
  if(x === promise2){
    // reject 报错抛出
    return reject(new TypeError('Chaining cycle detected for promise'));
  }
  
  // 锁，避免屡次调用
  let called;
  
  // x 不是 null 且 x 是对象或者函数
  if (x != null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      // A+ 规定，申明 then = x 的 then 办法
      let then = x.then;
      
      // 如果 then 是函数，就默认是 promise 了
      if (typeof then === 'function') { 
        // then 执行 第一个参数是 this 前面是胜利的回调 和 失败的回调
        then.call(x, y => {
          // 胜利和失败只能调用一个
          if (called) return;
          called = true;
          
          // 外围点 2：resolve 的后果仍旧是 promise 那就持续递归执行
          // 外围点 2：resolve 的后果仍旧是 promise 那就持续递归执行
          // 外围点 2：resolve 的后果仍旧是 promise 那就持续递归执行
          resolvePromise(promise2, y, resolve, reject);
        }, err => {
          // 胜利和失败只能调用一个
          if (called) return;
          called = true;
          reject(err);// 失败了就失败了
        })
      } else {resolve(x); // 间接胜利即可
      }
    } catch (e) { // 走到 catch 也属于失败
      if (called) return;
      called = true;
      // 取 then 出错了那就不要在继续执行了
      reject(e); 
    }
  } else {resolve(x);
  }
}

then 链式调用测试

残缺测试代码如下，能够复制进浏览器控制台执行下：

function resolvePromise(promise2, x, resolve, reject){
    // 循环援用报错
    if(x === promise2){
      // reject 报错抛出
      return reject(new TypeError('Chaining cycle detected for promise'));
    }
    // 锁，避免屡次调用
    let called;
    
    // x 不是 null 且 x 是对象或者函数
    if (x != null && (typeof x === 'object' || typeof x === 'function')) {
      try {
        // A+ 规定，申明 then = x 的 then 办法
        let then = x.then;
        // 如果 then 是函数，就默认是 promise 了
        if (typeof then === 'function') { 
          // 就让 then 执行 第一个参数是 this   前面是胜利的回调 和 失败的回调
          then.call(x, y => {
            // 胜利和失败只能调用一个
            if (called) return;
            called = true;
            // resolve 的后果仍旧是 promise 那就持续递归执行
            resolvePromise(promise2, y, resolve, reject);
          }, err => {
            // 胜利和失败只能调用一个
            if (called) return;
            called = true;
            reject(err);// 失败了就失败了
          })
        } else {resolve(x); // 间接胜利即可
        }
      } catch (e) {
        // 也属于失败
        if (called) return;
        called = true;
        // 取 then 出错了那就不要在继续执行了
        reject(e); 
      }
    } else {resolve(x);
    }
  }


class Promise {constructor(executor) {
        this.status = "pending"; // 默认 promise 状态
        this.value;  // resolve 胜利时的值
        this.error;  // reject 失败时的值
        this.resolveQueue = []; // 胜利时回调队列
        this.rejectQueue = []; // 失败时回调队列

        let resolve = value => {if(this.status === "pending") {
                this.value = value;
                this.status = "resolved";
                this.resolveQueue.forEach(fn => fn())
            }
        }

        let reject = value => {if(this.status === "pending") {
                this.error = value;
                this.status = "rejected";
                this.rejectQueue.forEach(fn => fn())
            }
        }

        executor(resolve, reject)
    }

    then(onFullfilled, onRejected) {
        let promise2;
        promise2 = new Promise((resolve, reject) => {if(this.status === "resolved") {let x = onFullfilled(this.value);
                // resolvePromise 函数，解决本人 return 的 promise 和默认的 promise2 的关系
                resolvePromise(promise2, x, resolve, reject);
            }
            if(this.status === "rejected") {let x = onRejected(this.value);
                resolvePromise(promise2, x, resolve, reject);
            }
            if(this.status === "pending") {this.resolveQueue.push(() => {let x = onFullfilled(this.value);
                    resolvePromise(promise2, x, resolve, reject);
                })
                this.rejectQueue.push(() => {let x = onRejected(this.error);
                    resolvePromise(promise2, x, resolve, reject);
                })
            }
        });
        
        // 返回 promise，达成链式成果
        return promise2;
    }
}

// 测试以下代码
new Promise((resolve, reject) => {resolve();
}).then((res)=>{console.log('进入第一个 then！')
    return new Promise((resolve,reject)=>{resolve('hello world');
    })
}).then((res)=>{console.log('进入第二个 then！', res);
})


ok，咱们实现了 then 的链式调用，这也是实现 Promise 中的重难点！

onFulfilled 和 onRejected 的异步调用

  • [x] 8、onFulfilled 和 onRejected 的异步调用

外围思路：

用 setTimeout 解决异步问题

代码如下：

class Promise {constructor(executor) {
        this.status = "pending"; // 默认 promise 状态
        this.value;  // resolve 胜利时的值
        this.error;  // reject 失败时的值
        this.resolveQueue = []; // 胜利时回调队列
        this.rejectQueue = []; // 失败时回调队列

        let resolve = value => {if(this.status === "pending") {
                this.value = value;
                this.status = "resolved";
                this.resolveQueue.forEach(fn => fn())
            }
        }

        let reject = value => {if(this.status === "pending") {
                this.error = value;
                this.status = "rejected";
                this.rejectQueue.forEach(fn => fn())
            }
        }

        executor(resolve, reject)
    }

    then(onFullfilled, onRejected) {
        let promise2;
        promise2 = new Promise((resolve, reject) => {if(this.status === "resolved") {
                // 异步
+               setTimeout(() => {let x = onFullfilled(this.value);
                    // resolvePromise 函数，解决本人 return 的 promise 和默认的 promise2 的关系
                    resolvePromise(promise2, x, resolve, reject);
+               }, 0)
            }
            if(this.status === "rejected") {
                // 异步
+               setTimeout(() => {let x = onRejected(this.value);
                    resolvePromise(promise2, x, resolve, reject);
+               }, 0)
            }
            if(this.status === "pending") {this.resolveQueue.push(() => {
                    // 异步
+                   setTimeout(() => {let x = onFullfilled(this.value);
                        resolvePromise(promise2, x, resolve, reject);
+                   }, 0)
                })
                this.rejectQueue.push(() => {
                    // 异步
+                   setTimeout(() => {let x = onRejected(this.error);
                        resolvePromise(promise2, x, resolve, reject);
+                   }, 0)
                })
            }
        });
        
        // 返回 promise，达成链式成果
        return promise2;
    }
}

值穿透调用

  • [x] 9、值穿透
new Promise((resolve, reject)=>{resolve('YoYo');
}).then().then().then().then().then().then().then((res)=>{console.log(res);
})

当执行下面多个 then，咱们冀望最初那个 then 打印出 ‘YoYo’。

实现很简略：onFulfilled 如果不是函数，就疏忽 onFulfilled，间接返回 value!

相应的，咱们也要解决下没有 onRejected 的状况：onRejected 如果不是函数，就疏忽 onRejected，间接扔出谬误!

代码如下，在之前的 Promise 类的 then 退出：

then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : err => {throw err;}
    
    <!--... 省略 -->
}

Promise 对象办法 catch

  • [x] 10、Promise 对象办法 catch

外围思路：

catch 是失败的回调，相当于执行 this.then(null,fn)

class Promise {constructor(executor) {<!--... 省略 -->}

        then(onFullfilled, onRejected) {<!--... 省略 -->}
        
+       catch(onRejected) {+           return this.then(null, onRejected)
+       }
    }

此外，咱们还须要对其余几个函数外应用 try/catch 去做异样捕捉，这里不开展，了解即可（本文最初源码中会展现）。

Promise 对象办法 all

  • [x] 10、Promise 对象办法 all

这是一道经典面试题！

Promise.all() 接管一个数组作为参数，该办法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“实现（resolved）”或参数中不蕴含 promise 时回调实现（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败的起因是第一个失败 promise 的后果。

用法如下：

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {setTimeout(resolve, 100, 'foo');
}); 

Promise.all([p1, p2, p3]).then(values => {console.log(values); // [3, 1337, "foo"] 
});

接下来看看如何实现：
上面手写的，没有测试，回头补充！上班先~

Promise.all = function(promises) {
    let count = 0;
    let res = [];
    return new Promise((resolve, reject) => {for(let i = 0; i<promises.length; i++) {promises[i].then(res => {res.push(res);
                count++;
                if(count === promises.length) resolve(res);
            })
        }
    })
    .catch(err => {reject(err);
    })
}

Promise 对象办法 race

  • [x] 11、Promise 对象办法 race

Promise.race() 它同样接管一个 promise 对象组成的数组作为参数，并返回一个新的 promise 对象。一旦迭代器中的某个 promise 解决或回绝，返回的 promise 就会解决或回绝。

Promise.race = function(promises) {return new Promise((resolve, reject) => {for(let i = 0; i<promises.length; i++) {promises[i].then(resolve, reject);
        }
    })
}

Promise 对象办法 resolve

  • [x] 12、Promise 对象办法 resolve
Promise.resolve = function(value) {return new Promise((resolve, reject) => {resolve(value);
    })
}

Promise 对象办法 reject

  • [x] 13、Promise 对象办法 reject
Promise.reject = function(value) {return new Promise((resolve, reject) => {reject(value);
    })
}

Promise 对象办法 allSettled

当课后作业吧，同学们本人写，能够放回复中哈~

Reference：
Promises/A+

正文完
javascript
发表至： javascript
2020-07-14
 0
关于javascript:温故而知新-重新认识JavaScript的Hoisting
js-的5个不良编码习惯现在就改掉吧
原生js实现loading加载动画
关于javascript:15个常用的JavaScript简写技巧