保姆级手写promise以及promise常用得方法

最近迷上了promise，觉得还挺有意思，看了大佬的一篇知乎文章  面试官：“你能手写一个 Promise 吗” ，写的很详细，超级赞，看完了来着做个笔记，牢固一下理解和印象。

1. 常见 Promise 面试题

这个模块是搬运 面试官：“你能手写一个 Promise 吗” 文章，不想到时候看还得2个文章切换，所以就把这块搬运过来。

1. Promise 解决了什么问题？
2. Promise 常用的 API 有哪些？
3. 能不能手写一个符合 Promise/A+ 规范的 Promise?
4. Promise 有什么缺陷，可以如何解决？

1.1 Promise 出现的原因 & 业界实现

在 Promise 出现以前，在我们处理多个异步请求嵌套时，代码往往是这样的。。。

let fs = require('fs')

fs.readFile('./name.txt','utf8',function(err,data){
  fs.readFile(data, 'utf8',function(err,data){
    fs.readFile(data,'utf8',function(err,data){
      console.log(data);
    })
  })
})

为了获取回调得结果，就必须得这样一层嵌套一层，使得代码变的更加难以阅读和难以维护，这就是传说中臭名昭著的回调地狱，产生回调地狱的原因：

1. 嵌套调用，第一个函数的输出往往是第二个函数的输入；
2. 处理多个异步请求并发，开发时往往需要同步请求最终的结果。

Promise用比较友好的方式解决以上2个问题，用then链式解决嵌套问题，用Promise.all解决异步请求并发的问题。

2. 开始手搓Promise啦

手搓Promise，不是一蹴而就的，慢慢来，先搞简单的版本1，然后再慢慢升级，向Promise靠拢。

Promise核心列一下，不然要实现什么我们都不知道。

1. 它有3个状态，pending、fulfilled、rejected，一经改变不可逆转
2. new Promise接受一个executor()执行器，并立即执行
3. executor接受resolve和reject
4. then方法，接受2个参数，成功执行参数1，onFulfilled，参数是成功的值value；失败执行参数2， onRejected，参数是失败的值reason;
5. then链式调用，值的穿透
6. catch、finally
7. all，race，any，allsettled常用方法

2.1 手搓PromiseV1.0.0

第一个版本，我们就希望能让以上示例跑起来，打开对应的注释，就会打印对应的内容。开敲！

我们首先根据上面分析的promise核心和我们想要实现的版本1示例，把大概的架子搭出来了。

 然后我们继续往下走，resolve就是成功的，reject就是失败的，所以resolve和reject这2个方法，要做的事情就是改变promise的状态，并把对应状态的值给赋上去。

 好的，resolve和reject该做的事情也都做了，接下来是then，then接受2个方法参数，成功的就执行方法1，并把成功的值value作为参数；失败的就执行方法2，并把失败的值reason作为参数。

 接下来我们执行一下，看看版本1的示例能不能跑起来。

    

 恭喜恭喜！喜提V1.0.0的手搓promise，代码如下：

/* V1.0.0   promise*/
/* promise的3个状态 */
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';

class MyPromise {
  constructor(executor) {
    this.status = PENDING; // 初始的状态
    this.value = undefined; // 成功的值
    this.reason = undefined; // 失败的值
    let resolve = value => {
      /* 防止重复执行，表示状态不可逆 */
      if (this.status === PENDING) {
        this.value = value;
        this.status = FULFILLED;
      }
    };
    let reject = reason => {
      /* 防止重复执行，表示状态不可逆 */
      if (this.status === PENDING) {
        this.reason = reason;
        this.status = REJECTED;
      }
    };
    /* 立即执行 executor*/
    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }
  then(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
      onFulfilled(this.value);
    }
    if (this.status === REJECTED) {
      onRejected(this.reason);
    }
  }
}

new MyPromise((resolve, reject) => {
  // resolve('成功啦！');
  reject('失败啦');
}).then(
  res => {
    console.log('成功：', res);
  },
  err => {
    console.log('失败：', err);
  }
);

2.2 手搓PromiseV1.1.0

我们已经实现了一个基础版的 Promise，但是还不要高兴的太早噢，这里我们只处理了同步操作的 promise。如果在 executor()中传入一个异步操作的话呢，我们试一下：

 我们发现，传一个异步操作时候，没任何打印，为什么？因为我们在执行then的时候，这个promise的状态还是pending，pending时候不会执行then的2个方法参数的任何一个，所以就没得反应。换句话说，promise只有执行了resolve或reject，状态改变了，才会执行then。所以如果当调用 then 方法时，当前状态是 pending，我们需要先将成功和失败的回调分别存放起来，在executor()的异步任务被执行时，触发 resolve 或 reject，依次调用成功或失败的回调。升级了朋友们！

     

  恭喜恭喜！解决了传入异步的问题，喜提V1.1.0的手搓promise，代码如下：

/* promise的3个状态 */
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';

class MyPromise {
  constructor(executor) {
    this.status = PENDING; // 初始的状态
    this.value = undefined; // 成功的值
    this.reason = undefined; // 失败的值
    this.onFulfilledCallbacks = []; // 存放成功的回调
    this.onRejectedCallbacks = []; // 存放失败的回调
    let resolve = value => {
      /* 防止重复执行，表示状态不可逆 */
      if (this.status === PENDING) {
        this.value = value;
        this.status = FULFILLED;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };
    let reject = reason => {
      /* 防止重复执行，表示状态不可逆 */
      if (this.status === PENDING) {
        this.reason = reason;
        this.status = REJECTED;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };
    /* 立即执行 executor*/
    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }
  then(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
      onFulfilled(this.value);
    }
    if (this.status === REJECTED) {
      onRejected(this.reason);
    }
43     if (this.status === PENDING) {
44       this.onFulfilledCallbacks.push(() => onFulfilled(this.value));
45       this.onRejectedCallbacks.push(() => onRejected(this.reason));
46     }
  }
}

new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('异步成功啦！');
    // reject('失败啦');
  }, 1000);
}).then(
  res => {
    console.log('成功：', res);
  },
  err => {
    console.log('失败：', err);
  }
);

2.3 手搓PromiseV2.0.0

我们开始要接触核心区了朋友们！promise最关键的还是它的then链式调用和值的穿透。

         

 我们先来看看then链式调用，它可以一直.then，为什么？因为.then返回的也是一个promise呀，promise里面有then方法，当然可以继续往下点咯。所以

1. 关键点1：then返回的是一个promise，
2. 关键点2：上一次返回的值可以作为下一个then方法执行的参数

 

 【promise2】里面该写啥呢？首先，上面版本做的事情，肯定要做进去的：执行【onFulfilled】或者【onRejected】，pending时候要存一下回调方法，其次，我们上面有说过，想要执行then，一定得执行resolve或reject，把状态改变了，才能执行then，所以我们手搓的then方法中，promise2一定要执行resolve或者reject才行，而且resolve或reject的参数，是下一次then【onFulfilled】或者【onRejected】返回的值。

       

 then链式回调算是做了一个粗糙的版本了，但是那个resolvePromise方法里面的【resolve(x)】太粗糙啦，如果x里面有then，我们是要继续执行的，then里面返回的值才是下个then的方法参数，我们看看MDN里面的promise。

再看看把这个示例，用我们手写的promise打印出来的值

 所以我们的resolvePromise需要更加精细一点，再打磨打磨一下。

    

 then链式了，还有值穿透哦，就是then没做任何处理的时候，值会往下传。

 

 以上，手写promise算是完成，下面就是扩展一下，在原型上增加catch、finally、all、race等等。

/* promise的3个状态 */
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';
const resolvePromise = (promise2, x, resolve, reject) => {
  // 自己等待自己完成是错误的实现，用一个类型错误，结束掉 promise  Promise/A+ 2.3.1
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'));
  }
  // Promise/A+ 2.3.3.3.3 只能调用一次
  let called;
  if ((typeof x === 'object' && x !== null) || 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);
          },
          r => {
            if (called) return;
            called = true;
            reject(r);
          }
        );
      } else {
        resolve(x);
      }
    } catch (e) {
      if (called) return;
      called = true;
      reject(e);
    }
  } else {
    resolve(x);
  }
};
class MyPromise {
  constructor(executor) {
    this.status = PENDING; // 初始的状态
    this.value = undefined; // 成功的值
    this.reason = undefined; // 失败的值
    this.onFulfilledCallbacks = []; // 存放成功的回调
    this.onRejectedCallbacks = []; // 存放失败的回调
    let resolve = value => {
      /* 防止重复执行，表示状态不可逆 */
      if (this.status === PENDING) {
        this.value = value;
        this.status = FULFILLED;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };
    let reject = reason => {
      /* 防止重复执行，表示状态不可逆 */
      if (this.status === PENDING) {
        this.reason = reason;
        this.status = REJECTED;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };
    /* 立即执行 executor*/
    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }
  then(onFulfilled, onRejected) {
    /* 穿透就是没有方法，则给一个默认的方法，将值传下去 */
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v;
    /* ！！！注意啊，reject的方法空时不可以写 v=>v，不然永远都不会走catch，应该v=>{throw v}*/
    onRejected =
      typeof onRejected === 'function'
        ? onRejected
        : err => {
            throw err;
          };
    let promise2 = new MyPromise((resolve, reject) => {
      let commonDo = status => {
        let x;
        setTimeout(() => {
          try {
            if (status === FULFILLED) {
              x = onFulfilled(this.value);
            }
            if (status === REJECTED) {
              x = onRejected(this.reason);
            }
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      };
      if (this.status === FULFILLED) {
        commonDo(this.status);
      }
      if (this.status === REJECTED) {
        commonDo(this.status);
      }
      if (this.status === PENDING) {
        this.onFulfilledCallbacks.push(() => commonDo(FULFILLED));
        this.onRejectedCallbacks.push(() => commonDo(REJECTED));
      }
    });
    return promise2;
  }
}

new MyPromise(resolve => {
  resolve(1);
})
  .then(res => {
    console.log(res);
    return {
      then: resolve => {
        return resolve(2);
      },
    };
  })
  .then(res => {
    console.log(res);
    return new Promise((resolve, reject) => {
      reject('3错误');
    });
  })
  .then(
    res => {
      console.log(res);
    },
    err => {
      console.log('错误：', err);
    }
  );

 

3. 扩展Promise的api

3.1 Promise.prototype.resolve

static resolve(value) {
    return new MyPromise((resolve, reject) => {
      resolve(value);
    });
 }

resolve 要稍微调整一下，因为promise.resolve 是具备等待功能的。

let resolve = value => {
 2       if (value instanceof MyPromise) {
 3         return value.then(resolve, reject);
 4       }
      /* 防止重复执行，表示状态不可逆 */
      if (this.status === PENDING) {
        this.value = value;
        this.status = FULFILLED;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };

3.2 Promise.prototype.reject

  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason);
    });
  }

3.3 Promise.prototype.catch

catch就是特殊的then，第一个参数传空就行。

catch(onRejected) {
    this.then(null, onRejected);
  }

3.4 Promise.prototype.finally

 finally，不论promise的状态是fulfilled还是rejected，都会执行finally，而且finally上面返回的结果，会是下面执行的参数。

 finally(callback) {
    return this.then(
      value => {
        return MyPromise.resolve(callback()).then(() => value);
      },
      reason => {
        return MyPromise.resolve(callback()).then(() => {
          throw reason;
        });
      }
    );
  }

之前有写过一篇 Promise常用的方法，对以下常用方法给出了一些说明。

3.5 Promise.prototype.all

接受promise数组，都成功时，按照顺序返回，有一个失败就算失败。

MyPromise.all = function (promises) {
  return new MyPromise((resolve, reject) => {
    let arr = [];
    promises.forEach((promise, index) => {
      MyPromise.resolve(promise)
        .then(res => {
          arr[index] = res;
          // 只有都请求成功了，才算成功
          if (Object.keys(arr).length === promises.length) {
            resolve(arr);
          }
        })
        .catch(err => {
         // 一个失败就算失败
          reject(err);
        });
    });
  });
};

   

3.6 Promise.prototype.any

接受一个promise数组，有一个成功，则立马resolve执行then，只有全部失败才执行catch，并返回一个返回一个失败的 promise 和AggregateError类型的实例。

   

3.7 Promise.prototype.race

接受一个数组，返回给出回应最快的那个，不论这个回应是resolve还是reject。

MyPromise.race = function (promises) {
  return new MyPromise((resolve, reject) => {
    promises.forEach(promise => {
      MyPromise.resolve(promise)
        .then(res => {
         // 成功的立马返回
          resolve(res);
        })
        .catch(err => {
         // 失败的立马返回
          reject(err);
        });
    });
  });
};

3.8 Promise.prototype.allSettled

接受一个数组，但它不会执行.catch，只会执行.then，也是等所有请求结束后，返回一个数组，数组里的每项与参数的数组每项一一对应，返回的每项包含字段：

status：状态（rejected/fulfilled），value：成功返回的值，reason：失败返回的值。

我一般用它的场景是页面中有多个表单需要校验，这样多个表单的validate方法就是一个数组，allSettled方法的参数，然后我可以找到第几个表单校验失败。

 

MyPromise.allSettled = function (promises) {
  return new MyPromise((resolve, reject) => {
    let arr = [];
    promises.forEach((promise, index) => {
      MyPromise.resolve(promise)
        .then(res => {
          // 成功的
          arr[index] = {
            status: 'fulfilled',
            value: res,
          };
        })
        .catch(err => {
          // 失败的
          arr[index] = {
            status: 'rejected',
            reason: err,
          };
        })
        .finally(() => {
          // 所有请求都完成，那么resolve
          if (Object.keys(arr).length === promises.length) {
            resolve(arr);
          }
        });
    });
  });
};    

4. Promise 有什么缺陷，可以如何解决？

Promise 是没有中断方法的，xhr.abort()、ajax 有自己的中断方法，一种是设置超时时间让ajax自动断开，一种是手动去停止ajax请求，其核心是调用XMLHttpRequest对象上的abort方法，axios 是基于 ajax 实现的；fetch 基于 promise，所以他的请求是无法中断的。

 

 我们可以利用promise的race，来自己封装一个中断的方法：

function wrap(promise) {
  let abort;
  let newPromise = new MyPromise((resolve, reject) => {
    abort = reject;
   // 假设我们设置的超时时间是2000ms，超过就超时失败
    setTimeout(() => {
      reject('超时了');
    }, 2000);
  });
  let p = MyPromise.race([promise, newPromise]);
  p.abort = abort;
  return p;
}

     

 

 

好啦，promise的分享就到这里啦，有新的见解可以一起讨论呀，互相学习。

参考

面试官：“你能手写一个 Promise 吗”