BAT前端经典面试问题：史上最最最详细的手写Promise教程

今天药忘吃喽~ 2023-09-23 15:26 109阅读 0赞

![format_png][]

我们工作中免不了运用promise用来解决异步回调问题。平时用的很多库或者插件都运用了promise 例如axios、fetch等等。但是你知道promise是咋写出来的呢？

别怕～这里有本[promisesA+规范][promisesA]，便宜点10元卖给你了。

![format_png 1][]

### 1、Promise 的声明 ###

首先呢，promise肯定是一个类，我们就用class来声明。

*  由于`new Promise((resolve, reject)=>{})`，所以传入一个参数（函数），[秘籍][promisesA]里叫他executor，传入就执行。
 *  executor里面有两个参数，一个叫resolve（成功），一个叫reject（失败）。
 *  由于resolve和reject可执行，所以都是函数，我们用let声明。

class Promise{
      // 构造器
      constructor(executor){
        // 成功
        let resolve = () => { };
        // 失败
        let reject = () => { };
        // 立即执行
        executor(resolve, reject);
      }
    }
    复制代码

### 解决基本状态 ###

[秘籍][promisesA]对Promise有规定：

*  Promise存在三个状态（state）pending、fulfilled、rejected
 *  pending（等待态）为初始态，并可以转化为fulfilled（成功态）和rejected（失败态）
 *  成功时，不可转为其他状态，且必须有一个不可改变的值（value）
 *  失败时，不可转为其他状态，且必须有一个不可改变的原因（reason）
 *  `new Promise((resolve, reject)=>{resolve(value)})` resolve为成功，接收参数value，状态改变为fulfilled，不可再次改变。
 *  `new Promise((resolve, reject)=>{reject(reason)})` reject为失败，接收参数reason，状态改变为rejected，不可再次改变。
 *  若是executor函数报错 直接执行reject();

于是乎，我们获得以下代码

class Promise{
      constructor(executor){
        // 初始化state为等待态
        this.state = 'pending';
        // 成功的值
        this.value = undefined;
        // 失败的原因
        this.reason = undefined;
        let resolve = value => {
          // state改变,resolve调用就会失败
          if (this.state === 'pending') {
            // resolve调用后，state转化为成功态
            this.state = 'fulfilled';
            // 储存成功的值
            this.value = value;
          }
        };
        let reject = reason => {
          // state改变,reject调用就会失败
          if (this.state === 'pending') {
            // reject调用后，state转化为失败态
            this.state = 'rejected';
            // 储存失败的原因
            this.reason = reason;
          }
        };
        // 如果executor执行报错，直接执行reject
        try{
          executor(resolve, reject);
        } catch (err) {
          reject(err);
        }
      }
    }
    
    复制代码

### then方法 ###

[秘籍][promisesA]规定:Promise有一个叫做then的方法，里面有两个参数：onFulfilled,onRejected,成功有成功的值，失败有失败的原因

*  当状态state为fulfilled，则执行onFulfilled，传入this.value。当状态state为rejected，则执行onRejected，传入this.reason
 *  onFulfilled,onRejected如果他们是函数，则必须分别在fulfilled，rejected后被调用，value或reason依次作为他们的第一个参数

class Promise{
      constructor(executor){...}
      // then 方法 有两个参数onFulfilled onRejected
      then(onFulfilled,onRejected) {
        // 状态为fulfilled，执行onFulfilled，传入成功的值
        if (this.state === 'fulfilled') {
          onFulfilled(this.value);
        };
        // 状态为rejected，执行onRejected，传入失败的原因
        if (this.state === 'rejected') {
          onRejected(this.reason);
        };
      }
    }
    复制代码

这下武学初成，可以对付对付江湖小杂毛了，但是对于带setTimeout的江洋大盗还是没辙。

![format_png 2][]

### 解决异步实现 ###

**现在基本可以实现简单的同步代码，但是当resolve在setTomeout内执行，then时state还是pending等待状态 我们就需要在then调用的时候，将成功和失败存到各自的数组，一旦reject或者resolve，就调用它们**

类似于发布订阅，先将then里面的两个函数储存起来，由于一个promise可以有多个then，所以存在同一个数组内。

// 多个then的情况
    let p = new Promise();
    p.then();
    p.then();
    复制代码

成功或者失败时，forEach调用它们

class Promise{
      constructor(executor){
        this.state = 'pending';
        this.value = undefined;
        this.reason = undefined;
        // 成功存放的数组
        this.onResolvedCallbacks = [];
        // 失败存放法数组
        this.onRejectedCallbacks = [];
        let resolve = value => {
          if (this.state === 'pending') {
            this.state = 'fulfilled';
            this.value = value;
            // 一旦resolve执行，调用成功数组的函数
            this.onResolvedCallbacks.forEach(fn=>fn());
          }
        };
        let reject = reason => {
          if (this.state === 'pending') {
            this.state = 'rejected';
            this.reason = reason;
            // 一旦reject执行，调用失败数组的函数
            this.onRejectedCallbacks.forEach(fn=>fn());
          }
        };
        try{
          executor(resolve, reject);
        } catch (err) {
          reject(err);
        }
      }
      then(onFulfilled,onRejected) {
        if (this.state === 'fulfilled') {
          onFulfilled(this.value);
        };
        if (this.state === 'rejected') {
          onRejected(this.reason);
        };
        // 当状态state为pending时
        if (this.state === 'pending') {
          // onFulfilled传入到成功数组
          this.onResolvedCallbacks.push(()=>{
            onFulfilled(this.value);
          })
          // onRejected传入到失败数组
          this.onRejectedCallbacks.push(()=>{
            onRejected(this.reason);
          })
        }
      }
    }
    复制代码

### 解决链式调用 ###

**我门常常用到`new Promise().then().then()`,这就是链式调用，用来解决回调地狱**

1、为了达成链式，我们默认在第一个then里返回一个promise。[秘籍][promisesA]规定了一种方法，就是在then里面返回一个新的promise,称为promise2：`promise2 = new Promise((resolve, reject)=>{})`

*  将这个promise2返回的值传递到下一个then中
 *  如果返回一个普通的值，则将普通的值传递给下一个then中

2、当我们在第一个then中`return`了一个参数（参数未知，需判断）。这个return出来的新的promise就是onFulfilled()或onRejected()的值

[秘籍][promisesA]则规定onFulfilled()或onRejected()的值，即第一个then返回的值，叫做x，判断x的函数叫做resolvePromise

*  首先，要看x是不是promise。
 *  如果是promise，则取它的结果，作为新的promise2成功的结果
 *  如果是普通值，直接作为promise2成功的结果
 *  所以要比较x和promise2
 *  resolvePromise的参数有promise2（默认返回的promise）、x（我们自己`return`的对象）、resolve、reject
 *  resolve和reject是promise2的

### 完成resolvePromise函数 ###

[秘籍][promisesA]规定了一段代码，让不同的promise代码互相套用，叫做resolvePromise

*  如果 x === promise2，则是会造成循环引用，自己等待自己完成，则报“循环引用”错误

let p = new Promise(resolve => {
      resolve(0);
    });
    var p2 = p.then(data => {
      // 循环引用，自己等待自己完成，一辈子完不成
      return p2;
    })
    复制代码

1、判断x

*  **Otherwise, if x is an object or function,Let then be x.then**
 *  x 不能是null
 *  x 是普通值 直接resolve(x)
 *  x 是对象或者函数（包括promise），`let then = x.then` 2、当x是对象或者函数（默认promise）
 *  声明了then
 *  如果取then报错，则走reject()
 *  如果then是个函数，则用call执行then，第一个参数是this，后面是成功的回调和失败的回调
 *  如果成功的回调还是pormise，就递归继续解析 3、成功和失败只能调用一个 所以设定一个called来防止多次调用

### 解决其他问题 ###

1、[秘籍][promisesA]规定onFulfilled,onRejected都是可选参数，如果他们不是函数，必须被忽略

*  onFulfilled返回一个普通的值，成功时直接等于 `value => value`
 *  onRejected返回一个普通的值，失败时如果直接等于 value => value，则会跑到下一个then中的onFulfilled中，所以直接扔出一个错误`reason => throw err` 2、[秘籍][promisesA]规定onFulfilled或onRejected不能同步被调用，必须异步调用。我们就用setTimeout解决异步问题
 *  如果onFulfilled或onRejected报错，则直接返回reject()

### 大功告成 ###

![format_png 3][]

顺便附赠catch和resolve、reject、race、all方法

class Promise{
      constructor(executor){
        this.state = 'pending';
        this.value = undefined;
        this.reason = undefined;
        this.onResolvedCallbacks = [];
        this.onRejectedCallbacks = [];
        let resolve = value => {
          if (this.state === 'pending') {
            this.state = 'fulfilled';
            this.value = value;
            this.onResolvedCallbacks.forEach(fn=>fn());
          }
        };
        let reject = reason => {
          if (this.state === 'pending') {
            this.state = 'rejected';
            this.reason = reason;
            this.onRejectedCallbacks.forEach(fn=>fn());
          }
        };
        try{
          executor(resolve, reject);
        } catch (err) {
          reject(err);
        }
      }
      then(onFulfilled,onRejected) {
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
        onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
        let promise2 = new Promise((resolve, reject) => {
          if (this.state === 'fulfilled') {
            setTimeout(() => {
              try {
                let x = onFulfilled(this.value);
                resolvePromise(promise2, x, resolve, reject);
              } catch (e) {
                reject(e);
              }
            }, 0);
          };
          if (this.state === 'rejected') {
            setTimeout(() => {
              try {
                let x = onRejected(this.reason);
                resolvePromise(promise2, x, resolve, reject);
              } catch (e) {
                reject(e);
              }
            }, 0);
          };
          if (this.state === 'pending') {
            this.onResolvedCallbacks.push(() => {
              setTimeout(() => {
                try {
                  let x = onFulfilled(this.value);
                  resolvePromise(promise2, x, resolve, reject);
                } catch (e) {
                  reject(e);
                }
              }, 0);
            });
            this.onRejectedCallbacks.push(() => {
              setTimeout(() => {
                try {
                  let x = onRejected(this.reason);
                  resolvePromise(promise2, x, resolve, reject);
                } catch (e) {
                  reject(e);
                }
              }, 0)
            });
          };
        });
        return promise2;
      }
      catch(fn){
        return this.then(null,fn);
      }
    }
    function resolvePromise(promise2, x, resolve, reject){
      if(x === promise2){
        return reject(new TypeError('Chaining cycle detected for promise'));
      }
      let called;
      if (x != null && (typeof x === 'object' || typeof x === 'function')) {
        try {
          let then = x.then;
          if (typeof then === 'function') { 
            then.call(x, y => {
              if(called)return;
              called = true;
              resolvePromise(promise2, y, resolve, reject);
            }, err => {
              if(called)return;
              called = true;
              reject(err);
            })
          } else {
            resolve(x);
          }
        } catch (e) {
          if(called)return;
          called = true;
          reject(e); 
        }
      } else {
        resolve(x);
      }
    }
    //resolve方法
    Promise.resolve = function(val){
      return new Promise((resolve,reject)=>{
        resolve(val)
      });
    }
    //reject方法
    Promise.reject = function(val){
      return new Promise((resolve,reject)=>{
        reject(val)
      });
    }
    //race方法 
    Promise.race = function(promises){
      return new Promise((resolve,reject)=>{
        for(let i=0;i<promises.length;i++){
          promises[i].then(resolve,reject)
        };
      })
    }
    //all方法(获取所有的promise，都执行then，把结果放到数组，一起返回)
    Promise.all = function(promises){
      let arr = [];
      let i = 0;
      function processData(index,data){
        arr[index] = data;
        i++;
        if(i == promises.length){
          resolve(arr);
        };
      };
      return new Promise((resolve,reject)=>{
        for(let i=0;i<promises.length;i++){
          promises[i].then(data=>{
            processData(i,data);
          },reject);
        };
      });
    }
    复制代码

### 如何验证我们的promise是否正确 ###

1、先在后面加上下述代码

2、npm 有一个promises-aplus-tests插件 npm i promises-aplus-tests -g 可以全局安装 mac用户最前面加上sudo

3、命令行 promises-aplus-tests \[js文件名\] 即可验证

// 目前是通过他测试 他会测试一个对象
    // 语法糖
    Promise.defer = Promise.deferred = function () {
      let dfd = {}
      dfd.promise = new Promise((resolve,reject)=>{
        dfd.resolve = resolve;
        dfd.reject = reject;
      });
      return dfd;
    }
    module.exports = Promise;
    //npm install promises-aplus-tests 用来测试自己的promise 符不符合promisesA+规范

[format_png]: https://img-blog.csdnimg.cn/img_convert/6f50fcd9a4358c06ee2327f3a560dcf2.webp?x-oss-process=image/format,png
[promisesA]: https://link.juejin.cn/?target=https%3A%2F%2Fpromisesaplus.com
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/8ea8e3258f808a1915f77867e7b3e5d8.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/014fde3b237f3ab9ebcf4c02def5a55a.webp?x-oss-process=image/format,png
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/1152d09c3913504b68b44a23595c9250.webp?x-oss-process=image/format,png