Promise出现的原因我们不在赘述，不过是避免回调地狱之类的问题，下面我们就直接开始！请认真读完并理解每一行代码！

一、从零开始，手写Promise

1、Promise/A+

我们想要手写一个Promise，就要遵循Promise/A+规范，业界所有Promise的类库都遵循这个规范

其实Promise/A+规范对如何实现一个符合标准的Promise类库已经阐述的很详细了。每一行代码在Promise/A+规范中都有迹可寻，所以在下面实现的过程中，尽可能的将代码和Promise/A+规范一一对应起来。

2、基础版Promise

回顾一下最简单的Promise“使用”方式

  1. const p1 = new Promise((resolve,reject)=>{
  2.     console.log('create a promise')
  3.   resolve('成功了')
  4. })
  5. console.log('after new promise')
  7. const p2 = p1.then(data =>{
  8.     console.log(data)
  9.   throw new Error('失败了')
  10. })
  12. const p3 = p2.then(data=>{
  13.     console.log('success',data)
  14. },err=>{
  15.     console.log('faild',err)
  16. })

控制台输出：
"create a promise"
"after new promise"
"成功了"
"faild Error: 失败了"

  • 首先我们在调用Promise时，会返回一个Promise对象
  • 构建Promise对象时，需要传入一个executor函数，Promise的主要业务流程都在executor函数中执行
  • 如果运行在executor函数中的业务执行成功了，会调用resolve函数，如果执行失败了，则调用reject函数
  • Promise的状态不可逆，同事调用resolve函数和reject函数，默认会采取第一次调用的结果

以上简单介绍了Promise的一些主要的使用方法，结合Promise/A+规范，我们可以分析出Promise一下的基本特征：

  1. Promise有三个状态：pending、fulfilled、rejected
  2. new Promise时，需要传递一个executor（）执行器，执行器立即执行
  3. executor接受两个参数，分别是resolve和reject；
  4. Promise的默认状态是pending；
  5. Promise有一个value保存成功状态的值，可以是undefined/promise
  6. promise有一个reason保存失败状态的值
  7. promise只能从pending到rejected，或者充pending到fulfilled，状态一旦确定，就不会再更改
  8. promise必须有一个then方法，then接受两个参数，分别是promise成功的回调onFulfilled，和promise失败的回调onRejected
  9. 如果调用then时，promise已经失败，那么执行onRejected，参数时promise的reason
  10. 如果调用then时已经成功，那么执行onFulfilled，参数时promise的value
  11. 如果then中抛出了异常，那么就会把这个一场作为参数，传递给下一个then的失败的回调onRejected

按照上面的特征，我们来写一下

  1. //三个状态
  2. const PENDING = 'PENDING'
  3. const FULFILLED = 'FULFILLED'
  4. const REJECTED = 'REJECTED'
  6. class Promise {
  7.     constructor(executor) {
  9.     this.status = PENDING //默认状态为PENDING
  11.     this.value = undefined  //存放成功状态的值，默认为undefined
  13.     this.reason = undefined //存放失败状态的值，默认为undefined
  15.       let resolve = value => {
  16.         //调用此方法就是成功
  17.         //状态为PENDING时才可以更新状态，防止executor中调用两次resolve/reject方法
  18.         if(this.status === PENDING) {
  19.           this.status = FULFILLED
  20.           this.value = value
  21.         }
  22.     }
  24.     let reject = reason =>{
  25.         //调用此方法就是失败
  26.       //状态为PENDING时才可以更新状态，防止executor中调用两次resolve/reject方法
  27.       if(this.status === PENDING) {
  28.           this.status = REJECTED
  29.         this.reason = reason
  30.       }
  31.     }
  33.     try {
  34.       // 立即执行，将 resolve 和 reject 函数传给使用者 
  35.         executor(resolve,reject)
  36.     } catch (error) {
  37.       // 发生异常时执行失败逻辑
  38.         reject(error)
  39.     }
  40.   }
  42.   then(onFulfilled,onRejected) {
  43.       if(this.status === FULFILLED) {
  44.         onFulfilled(this.value)
  45.     }
  47.     if(this.status === REJECTED) {
  48.         onRejected(this.reason)
  49.     }
  50.   }
  52. }

写完代码测试一下

  1. const promise = new Promise((resolve,reject)=>{
  2.     resolve('成功')
  3. }).then(data=>{
  4.     console.log('success',data);
  5. },err=>{
  6.     console.log('faild',err);
  7. })

控制台输出：
'success 成功'

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

  1. const promise = new Promise((resolve,reject)=>{
  2.     setTimeout(()=>{
  3.         console.log('成功')
  4.     },1000)
  5. }).then(data=>{
  6.     console.log('success',data);
  7. },err=>{
  8.     console.log('faild',err);
  9. })

执行测试代码后发现，promise没有返回

因为promise调用then方法时，当前的promise并没有成功，一直处于pending状态。所以如果当调用then方法时，当前状态是pending，我们需要先将成功和失败的回调分别存放起来，在executor()的异步任务被执行时，出发resolve或reject，一次嗲用失败或成功的回调

结合思路，优化代码

  1. const PENDING = 'PENDING'
  2. const FULFILLED = 'FULFILLED'
  3. const REJECTED = 'REJECTED'
  5. class Promise {
  6.   constructor(executor) {
  7.     this.status = PENDING
  8.     this.value = undefined
  9.     this.reason = undefined
  11.     this.onResolvedCallbacks = [] // 存放成功的回调
  13.     this.onRejectedCallbacks = [] // 存放失败的回调
  15.     let resolve = value =>{
  16.         this.status = FULFILLED
  17.       this.value = value
  19.       //依次将对应的函数执行
  20.       this.onResolvedCallbacks.forEach(fn=>fn())
  21.     }
  23.     let reject = reason =>{
  24.         this.status = REJECTED
  25.       this.reason = reason
  27.       //依次将对应的函数执行
  28.       this.onRejectedCallbacks.forEach(fn=>fn())
  29.     }
  31.     try {
  32.         executor(resolve,reject)
  33.     } catch (error) {
  34.         reject(error)
  35.     }
  36.   }
  38.   then(onFulfilled,onRejected) {
  39.       if(this.status === FULFILLED) {
  40.         onFulfilled(this.value)
  41.     }
  42.     if(this.status === REJECTED) {
  43.            onRejected(this.reason) 
  44.     }
  45.     if(this.status === PENDING) {
  46.         // 如果Promise的状态是pending，需要将 onFulfilled 和 onRejected 函数存放起来等待状态确定后，再依次将对应的函数执行
  47.       this.onResolvedCallbacks.push(()=>{
  48.           onFulfilled(this.value)
  49.       })
  51.       this.onRejectedCallbacks.push(()=>{
  52.           onRejected(this.reason)
  53.       })
  54.     }
  55.   }
  56. }

测试一下：

  1. const promise = new Promise((resolve, reject) => {
  2.     setTimeout(() => {
  3.       resolve('成功');
  4.     },1000);
  5.   }).then(
  6.     (data) => {
  7.       console.log('success', data)
  8.     },
  9.     (err) => {
  10.       console.log('faild', err)
  11.     }
  12.   )

控制台1s后输出：
'success 成功'

3、then的链式调用&值穿透特性

我们都知道，Promise的优势在于可以链式调用。在我们使用Promise的时候，当then函数中return了一个值，不管是什么值，我们都能在下一个then中获取到，这就是所谓的then链式调用。而且当我们不在then中放入参数。例：promise.then().then()，那么其后面的then一九可以得到之前then返回的值，这就是所谓的值的穿透。那具体如何实现的呢？简单思考一下，如果每次调用then的时候，我们都重新创建一个promise对象，并把上一个then的返回结果传给这个新的promise的then方法，不久可以一致then下去了吗，那我们来试着实现一下，这也是手写promise源码的重中之重。

  1. then的参数onFulfilled和onRejected 可以缺省，如果onFulfilled或者onRejected不是函数，将其忽略，且一九可以在下面的then中获取到之前返回的值
  2. promise可以then多次，每次执行完promise.then方法后返回的都是一个新的promise
  3. 如果then的返回值x是一个普通值，那么就会把这个结果作为参数，传递给下一个then的成功回调中
  4. 如果then抛出了异常，，那么就会把这个异常作为阐述，传递给下一个then的失败的回调中
  5. 如果then的返回值x是一个promise，那么就会等这个promise执行完，promise如果成功，就走下一个then的成功，如果失败，就走下一个then的失败，如果抛出异常，就走下一个then的失败
  6. 如果then的返回值X和promise是同一个引用对象，造成循环引用，则抛出异常，把异常传递给下一个then失败的回调中
  7. 如果then的返回值X是一个promise。且X同时调用resolve函数和reject函数，则第一次调用优先，其他函数调用被忽略

我们将代码补充完整：

  1. const PENDING = 'PENDING';
  2. const FULFILLED = 'FULFILLED';
  3. const REJECTED = 'REJECTED';
  5. const resolvePromise = (promise2, x, resolve, reject) => {
  6.   // 自己等待自己完成是错误的实现，用一个类型错误，结束掉 promise  Promise/A+ 2.3.1
  7.   if (promise2 === x) { 
  8.     return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  9.   }
  10.   // Promise/A+ 2.3.3.3.3 只能调用一次
  11.   let called;
  12.   // 后续的条件要严格判断 保证代码能和别的库一起使用
  13.   if ((typeof x === 'object' && x != null) || typeof x === 'function') { 
  14.     try {
  15.       // 为了判断 resolve 过的就不用再 reject 了（比如 reject 和 resolve 同时调用的时候）  Promise/A+ 2.3.3.1
  16.       let then = x.then;
  17.       if (typeof then === 'function') { 
  18.         // 不要写成 x.then，直接 then.call 就可以了 因为 x.then 会再次取值，Object.defineProperty  Promise/A+ 2.3.3.3
  19.         then.call(x, y => { // 根据 promise 的状态决定是成功还是失败
  20.           if (called) return;
  21.           called = true;
  22.           // 递归解析的过程（因为可能 promise 中还有 promise） Promise/A+ 2.3.3.3.1
  23.           resolvePromise(promise2, y, resolve, reject); 
  24.         }, r => {
  25.           // 只要失败就失败 Promise/A+ 2.3.3.3.2
  26.           if (called) return;
  27.           called = true;
  28.           reject(r);
  29.         });
  30.       } else {
  31.         // 如果 x.then 是个普通值就直接返回 resolve 作为结果  Promise/A+ 2.3.3.4
  32.         resolve(x);
  33.       }
  34.     } catch (e) {
  35.       // Promise/A+ 2.3.3.2
  36.       if (called) return;
  37.       called = true;
  38.       reject(e)
  39.     }
  40.   } else {
  41.     // 如果 x 是个普通值就直接返回 resolve 作为结果  Promise/A+ 2.3.4  
  42.     resolve(x)
  43.   }
  44. }
  1. class Promise {
  2.   constructor(executor) {
  3.     this.status = PENDING;
  4.     this.value = undefined;
  5.     this.reason = undefined;
  6.     this.onResolvedCallbacks = [];
  7.     this.onRejectedCallbacks= [];
  9.     let resolve = (value) => {
  10.       if(this.status ===  PENDING) {
  11.         this.status = FULFILLED;
  12.         this.value = value;
  13.         this.onResolvedCallbacks.forEach(fn=>fn());
  14.       }
  15.     } 
  17.     let reject = (reason) => {
  18.       if(this.status ===  PENDING) {
  19.         this.status = REJECTED;
  20.         this.reason = reason;
  21.         this.onRejectedCallbacks.forEach(fn=>fn());
  22.       }
  23.     }
  25.     try {
  26.       executor(resolve,reject)
  27.     } catch (error) {
  28.       reject(error)
  29.     }
  30.   }
  32.   then(onFulfilled, onRejected) {
  33.     //解决 onFufilled，onRejected 没有传值的问题
  34.     //Promise/A+ 2.2.1 / Promise/A+ 2.2.5 / Promise/A+ 2.2.7.3 / Promise/A+ 2.2.7.4
  35.     onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v;
  36.     //因为错误的值要让后面访问到，所以这里也要跑出个错误，不然会在之后 then 的 resolve 中捕获
  37.     onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
  38.     // 每次调用 then 都返回一个新的 promise  Promise/A+ 2.2.7
  39.     let promise2 = new Promise((resolve, reject) => {
  40.       if (this.status === FULFILLED) {
  41.         //Promise/A+ 2.2.2
  42.         //Promise/A+ 2.2.4 --- setTimeout
  43.         setTimeout(() => {
  44.           try {
  45.             //Promise/A+ 2.2.7.1
  46.             let x = onFulfilled(this.value);
  47.             // x可能是一个proimise
  48.             resolvePromise(promise2, x, resolve, reject);
  49.           } catch (e) {
  50.             //Promise/A+ 2.2.7.2
  51.             reject(e)
  52.           }
  53.         }, 0);
  54.       }
  56.       if (this.status === REJECTED) {
  57.         //Promise/A+ 2.2.3
  58.         setTimeout(() => {
  59.           try {
  60.             let x = onRejected(this.reason);
  61.             resolvePromise(promise2, x, resolve, reject);
  62.           } catch (e) {
  63.             reject(e)
  64.           }
  65.         }, 0);
  66.       }
  68.       if (this.status === PENDING) {
  69.         this.onResolvedCallbacks.push(() => {
  70.           setTimeout(() => {
  71.             try {
  72.               let x = onFulfilled(this.value);
  73.               resolvePromise(promise2, x, resolve, reject);
  74.             } catch (e) {
  75.               reject(e)
  76.             }
  77.           }, 0);
  78.         });
  80.         this.onRejectedCallbacks.push(()=> {
  81.           setTimeout(() => {
  82.             try {
  83.               let x = onRejected(this.reason);
  84.               resolvePromise(promise2, x, resolve, reject)
  85.             } catch (e) {
  86.               reject(e)
  87.             }
  88.           }, 0);
  89.         });
  90.       }
  91.     });
  93.     return promise2;
  94.   }
  95. }

测试一下：

  1. const promise = new Promise((resolve,reject)=>{
  2.     reject('失败');
  3. }).then().then().then(data => {
  4.     console.log(data)
  5. },err=>{
  6.     console.log('err',err)
  7. })

控制台输出：
"失败 err"