promise声明

首先呢，promise肯定是一个类，我们就用class来声明。
• 由于 new Promise((resolve, reject)=>{}) ，所以传入一个参数（函数），executor，传入就执行。
•executor里面有两个参数，一个叫resolve（成功），一个叫reject（失败）。
•由于resolve和reject可执行，所以都是函数
•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();

  1. const PENDING = 'pending'; // 等待
  2. const FULFILLED = 'fulfilled'; // 成功
  3. const REJECTED = 'rejected'; // 失败
  5. class MyPromise {
  6.   // 生成器
  7.   constructor(executor) {
  8.     // executor 立即执行
  9.     // 成功执行 resolve或reject
  10.     try {
  11.       executor(this.resolve, this.reject);
  12.     } catch (e) {
  13.       //失败执行reject
  14.       this.reject(e);
  15.     }
  16.   }
  17.   status = PENDING;
  18.   value = undefined;
  19.   reason = undefined;
  20.   resolve = (value) => {
  21.     // 如果状态不是等待 阻止程序向下执行
  22.     if (this.status !== PENDING) return;
  23.     // 将状态更改为成功
  24.     this.status = FULFILLED;
  25.     // 保存成功之后的值
  26.     this.value = value;
  27.   };
  28.   reject = (reason) => {
  29.     // 如果状态不是等待 阻止程序向下执行
  30.     if (this.status !== PENDING) return;
  31.     // 将状态更改为失败
  32.     this.status = REJECTED;
  33.     // 保存失败后的原因
  34.     this.reason = reason;
  35. }

then 方法

Promise有一个叫做then的方法，里面有两个参数：onFulfilled,onRejected,成功有成功的值，失败有失败的原因
•当状态state为fulfilled，则执行onFulfilled，传入this.value。当状态state为rejected，则执行onRejected，传入this.value
•onFulfilled,onRejected如果他们是函数，则必须分别在fulfilled，rejected后被调用，value或reason依次作为他们的第一个参数

  1. then(successCallback, failCallback) {
  3.          // 同步情况下成功时执行成功回调
  4.       if (this.status === FULFILLED) {
  5.          successCallback(this.value);
  6.         // 同步情况下失败时执行失败回调
  7.       } else if (this.status === REJECTED) {
  8.         failCallback(this.reason);
  9.       }
  10.   }

解决异步实现

现在基本可以实现简单的同步代码，但是当resolve在setTomeout内执行，then时state还是pending等待状态 我们就需要在then调用的时候，将成功和失败存到各自的数组，一旦reject或者resolve，就调用它们
类似于发布订阅，先将then里面的两个函数储存起来，由于一个promise可以有多个then，所以存在同一个数组内。

  1. const PENDING = 'pending'; // 等待
  2. const FULFILLED = 'fulfilled'; // 成功
  3. const REJECTED = 'rejected'; // 失败
  5. class MyPromise {
  6.   // 生成器
  7.   constructor(executor) {
  8.     // executor 立即执行
  9.     // 成功执行 resolve或reject
  10.     try {
  11.       executor(this.resolve, this.reject);
  12.     } catch (e) {
  13.       //失败执行reject
  14.       this.reject(e);
  15.     }
  16.   }
  17.   status = PENDING;
  18.   value = undefined;
  19.   reason = undefined;
  20.   // 成功回调
  21.   successCallback = [];
  22.   // 失败回调
  23.   failCallback = [];
  24.   resolve = (value) => {
  25.     // 如果状态不是等待 阻止程序向下执行
  26.     if (this.status !== PENDING) return;
  27.     // 将状态更改为成功
  28.     this.status = FULFILLED;
  29.     // 保存成功之后的值
  30.     this.value = value;
  31.     // 判断成功回调是否存在 如果存在 调用
  32.     while (this.successCallback.length) {
  33.       this.successCallback.shift()();
  34.     }
  35.   };
  36.   reject = (reason) => {
  37.     // 如果状态不是等待 阻止程序向下执行
  38.     if (this.status !== PENDING) return;
  39.     // 将状态更改为失败
  40.     this.status = REJECTED;
  41.     // 保存失败后的原因
  42.     this.reason = reason;
  43.     // 判断成功回调是否存在 如果存在 调用
  44.     while (this.failCallback.length) {
  45.       this.failCallback.shift()();
  46.     }
  47.   };
  49.   then(successCallback, failCallback) {
  52.       if (this.status === FULFILLED) {
  53.         // 回调的函数是否异步
  54.         successCallback(this.value);
  56.         // 同步情况下失败时执行失败回调
  57.       } else if (this.status === REJECTED) {
  58.         failCallback(this.reason);
  60.         //异步情况下执行
  61.       } else {
  62.         // onFulfilled传入到成功数组
  63.         this.successCallback.push(() => {
  64.           successCallback(this.value);
  65.         });
  66.         // onRejected传入到失败数组
  67.         this.failCallback.push(() => {
  68.           failCallback(this.reason);
  69.         });
  70.       }
  71.     });
  73. }

解决链式调用

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

1、为了达成链式，我们默认在第一个then里返回一个promise。秘籍规定了一种方法，就是在then里面返回一个新的promise,称为promise2： promise2 = new Promise((resolve, reject)=>{})
•将这个promise2返回的值传递到下一个then中
•如果返回一个普通的值，则将普通的值传递给下一个then中

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

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

  1. const PENDING = 'pending'; // 等待
  2. const FULFILLED = 'fulfilled'; // 成功
  3. const REJECTED = 'rejected'; // 失败
  5. class MyPromise {
  6.   // 生成器
  7.   constructor(executor) {
  8.     // executor 立即执行
  9.     // 成功执行 resolve或reject
  10.     try {
  11.       executor(this.resolve, this.reject);
  12.     } catch (e) {
  13.       //失败执行reject
  14.       this.reject(e);
  15.     }
  16.   }
  17.   status = PENDING;
  18.   value = undefined;
  19.   reason = undefined;
  20.   // 成功回调
  21.   successCallback = [];
  22.   // 失败回调
  23.   failCallback = [];
  24.   resolve = (value) => {
  25.     // 如果状态不是等待 阻止程序向下执行
  26.     if (this.status !== PENDING) return;
  27.     // 将状态更改为成功
  28.     this.status = FULFILLED;
  29.     // 保存成功之后的值
  30.     this.value = value;
  31.     // 判断成功回调是否存在 如果存在 调用
  32.     while (this.successCallback.length) {
  33.       this.successCallback.shift()();
  34.     }
  35.   };
  36.   reject = (reason) => {
  37.     // 如果状态不是等待 阻止程序向下执行
  38.     if (this.status !== PENDING) return;
  39.     // 将状态更改为失败
  40.     this.status = REJECTED;
  41.     // 保存失败后的原因
  42.     this.reason = reason;
  43.     // 判断成功回调是否存在 如果存在 调用
  44.     while (this.failCallback.length) {
  45.       this.failCallback.shift()();
  46.     }
  47.   };
  49.   then(successCallback, failCallback) {
  51.     let promise2 = new MyPromise((resolve, reject) => {
  52.       // 同步情况下成功时执行成功回调
  53.       if (this.status === FULFILLED) {
  54.         // 回调的函数是否异步
  56.           try {
  57.             let x = successCallback(this.value);
  58.             resolvePromise(promise2, x, resolve, reject);
  59.           } catch (e) {
  60.             reject(e);
  61.           }
  64.         // 同步情况下失败时执行失败回调
  65.       } else if (this.status === REJECTED) {
  67.           try {
  68.             let x = failCallback(this.reason);
  69.             resolvePromise(promise2, x, resolve, reject);
  70.           } catch (e) {
  71.             reject(e);
  72.           }
  75.         //异步情况下执行
  76.       } else {
  77.         // onFulfilled传入到成功数组
  78.         this.successCallback.push(() => {
  80.             try {
  81.               let x = successCallback(this.value);
  82.               resolvePromise(promise2, x, resolve, reject);
  83.             } catch (e) {
  84.               reject(e);
  85.             }
  87.         });
  88.         // onRejected传入到失败数组
  89.         this.failCallback.push(() => {
  91.             try {
  92.               let x = successCallback(this.value);
  93.               resolvePromise(promise2, x, resolve, reject);
  94.             } catch (e) {
  95.               reject(e);
  96.             }
  98.         });
  99.       }
  100.     });
  101.     return promise2;
  102.   }
  103. }

完成resolvePromise函数

秘籍规定了一段代码，让不同的promise代码互相套用，叫做resolvePromise
•如果 x === promise2，则是会造成循环引用，自己等待自己完成，则报“循环引用”错误

  1. let p = new Promise(resolve => {
  2.   resolve(0);
  3. });
  4. var p2 = p.then(data => {
  5.   // 循环引用，自己等待自己完成，一辈子完不成
  6.   return p2;
  7. })

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. function resolvePromise(promsie2, x, resolve, reject) {
  2.   if (promsie2 === x) {
  3.     return reject(new TypeError('Chaining cycle detected for promis'));
  4.   }
  5.   if (x instanceof MyPromise) {
  6.     // promise 对象
  7.     x.then(
  8.       (value) => resolve(value),
  9.       (reason) => reject(reason)
  10.     );
  11.   } else {
  12.     // 普通值
  13.     resolve(x);
  14.   }
  15. }

解决其他问题

1、秘籍规定onFulfilled,onRejected都是可选参数，如果他们不是函数，必须被忽略
• onFulfilled返回一个普通的值，成功时直接等于 value => value
• onRejected返回一个普通的值，失败时如果直接等于 value => value，则会跑到下一个then中的onFulfilled中，所以直接扔出一个错误 reason => throw err 2、秘籍规定onFulfilled或onRejected不能同步被调用，必须异步调用。我们就用setTimeout解决异步问题
•如果onFulfilled或onRejected报错，则直接返回reject()

  1. const PENDING = 'pending'; // 等待
  2. const FULFILLED = 'fulfilled'; // 成功
  3. const REJECTED = 'rejected'; // 失败
  5. class MyPromise {
  6.   // 生成器
  7.   constructor(executor) {
  8.     // executor 立即执行
  9.     // 成功执行 resolve或reject
  10.     try {
  11.       executor(this.resolve, this.reject);
  12.     } catch (e) {
  13.       //失败执行reject
  14.       this.reject(e);
  15.     }
  16.   }
  17.   status = PENDING;
  18.   value = undefined;
  19.   reason = undefined;
  20.   // 成功回调
  21.   successCallback = [];
  22.   // 失败回调
  23.   failCallback = [];
  24.   resolve = (value) => {
  25.     // 如果状态不是等待 阻止程序向下执行
  26.     if (this.status !== PENDING) return;
  27.     // 将状态更改为成功
  28.     this.status = FULFILLED;
  29.     // 保存成功之后的值
  30.     this.value = value;
  31.     // 判断成功回调是否存在 如果存在 调用
  32.     while (this.successCallback.length) {
  33.       this.successCallback.shift()();
  34.     }
  35.   };
  36.   reject = (reason) => {
  37.     // 如果状态不是等待 阻止程序向下执行
  38.     if (this.status !== PENDING) return;
  39.     // 将状态更改为失败
  40.     this.status = REJECTED;
  41.     // 保存失败后的原因
  42.     this.reason = reason;
  43.     // 判断成功回调是否存在 如果存在 调用
  44.     while (this.failCallback.length) {
  45.       this.failCallback.shift()();
  46.     }
  47.   };
  49.   then(successCallback, failCallback) {
  50.     //  successCallback如果不是函数，就忽略successCallback，直接返回value
  51.     successCallback = successCallback ? successCallback : (value) => value;
  52.     //  failCallback如果不是函数，就忽略failCallback，直接扔出错误
  53.     failCallback = failCallback
  54.       ? failCallback
  55.       : (reason) => {
  56.           throw reason;
  57.         };
  58.     let promise2 = new MyPromise((resolve, reject) => {
  59.       // 同步情况下成功时执行成功回调
  60.       if (this.status === FULFILLED) {
  61.         // 回调的函数是否异步
  62.         setTimeout(() => {
  63.           try {
  64.             let x = successCallback(this.value);
  65.             resolvePromise(promise2, x, resolve, reject);
  66.           } catch (e) {
  67.             reject(e);
  68.           }
  69.         }, 0);
  71.         // 同步情况下失败时执行失败回调
  72.       } else if (this.status === REJECTED) {
  73.         setTimeout(() => {
  74.           try {
  75.             let x = failCallback(this.reason);
  76.             resolvePromise(promise2, x, resolve, reject);
  77.           } catch (e) {
  78.             reject(e);
  79.           }
  80.         }, 0);
  82.         //异步情况下执行
  83.       } else {
  84.         // onFulfilled传入到成功数组
  85.         this.successCallback.push(() => {
  86.           setTimeout(() => {
  87.             try {
  88.               let x = successCallback(this.value);
  89.               resolvePromise(promise2, x, resolve, reject);
  90.             } catch (e) {
  91.               reject(e);
  92.             }
  93.           }, 0);
  94.         });
  95.         // onRejected传入到失败数组
  96.         this.failCallback.push(() => {
  97.           setTimeout(() => {
  98.             try {
  99.               let x = successCallback(this.value);
  100.               resolvePromise(promise2, x, resolve, reject);
  101.             } catch (e) {
  102.               reject(e);
  103.             }
  104.           }, 0);
  105.         });
  106.       }
  107.     });
  108.     return promise2;
  109.   }
  111. }
  113. function resolvePromise(promsie2, x, resolve, reject) {
  114.   if (promsie2 === x) {
  115.     return reject(new TypeError('Chaining cycle detected for promis'));
  116.   }
  117.   if (x instanceof MyPromise) {
  118.     // promise 对象
  119.     x.then(
  120.       (value) => resolve(value),
  121.       (reason) => reject(reason)
  122.     );
  123.   } else {
  124.     // 普通值
  125.     resolve(x);
  126.   }
  127. }

catch

  1.  catch(fn){
  2.     return this.then(null,fn);
  3.   }

resolve

  1. //resolve方法
  2.   static resolve = (val) => {
  3.     return new Promise((resolve, reject) => {
  4.       resolve(val);
  5.     });
  6.   };

reject

  1. //reject方法
  2.   static reject = (val) => {
  3.     return new Promise((resolve, reject) => {
  4.       reject(val);
  5.     });
  6.   };

race

  1. //race方法
  2.   static race = (promises) => {
  3.     return new Promise((resolve, reject) => {
  4.       for (let i = 0; i < promises.length; i++) {
  5.         promises[i].then(resolve, reject);
  6.       }
  7.     });
  8.   };

all

  1. static all = (promises)=>{
  2.     let arr = [];
  3.     let i = 0;
  4.     function processData(index,data){
  5.       arr[index] = data;
  6.       i++;
  7.       if(i == promises.length){
  8.         resolve(arr);
  9.       };
  10.     };
  11.     return new Promise((resolve,reject)=>{
  12.       for(let i=0;i<promises.length;i++){
  13.         promises[i].then(data=>{
  14.           processData(i,data);
  15.         },reject);
  16.       };
  17.     });
  18.   }

完整代码

  1. const PENDING = 'pending'; // 等待
  2. const FULFILLED = 'fulfilled'; // 成功
  3. const REJECTED = 'rejected'; // 失败
  5. class MyPromise {
  6.   // 生成器
  7.   constructor(executor) {
  8.     // executor 立即执行
  9.     // 成功执行 resolve或reject
  10.     try {
  11.       executor(this.resolve, this.reject);
  12.     } catch (e) {
  13.       //失败执行reject
  14.       this.reject(e);
  15.     }
  16.   }
  17.   status = PENDING;
  18.   value = undefined;
  19.   reason = undefined;
  20.   // 成功回调
  21.   successCallback = [];
  22.   // 失败回调
  23.   failCallback = [];
  24.   resolve = (value) => {
  25.     // 如果状态不是等待 阻止程序向下执行
  26.     if (this.status !== PENDING) return;
  27.     // 将状态更改为成功
  28.     this.status = FULFILLED;
  29.     // 保存成功之后的值
  30.     this.value = value;
  31.     // 判断成功回调是否存在 如果存在 调用
  32.     while (this.successCallback.length) {
  33.       this.successCallback.shift()();
  34.     }
  35.   };
  36.   reject = (reason) => {
  37.     // 如果状态不是等待 阻止程序向下执行
  38.     if (this.status !== PENDING) return;
  39.     // 将状态更改为失败
  40.     this.status = REJECTED;
  41.     // 保存失败后的原因
  42.     this.reason = reason;
  43.     // 判断成功回调是否存在 如果存在 调用
  44.     while (this.failCallback.length) {
  45.       this.failCallback.shift()();
  46.     }
  47.   };
  49.   then(successCallback, failCallback) {
  50.     //  successCallback如果不是函数，就忽略successCallback，直接返回value
  51.     successCallback = successCallback ? successCallback : (value) => value;
  52.     //  failCallback如果不是函数，就忽略failCallback，直接扔出错误
  53.     failCallback = failCallback
  54.       ? failCallback
  55.       : (reason) => {
  56.           throw reason;
  57.         };
  58.     let promise2 = new MyPromise((resolve, reject) => {
  59.       // 同步情况下成功时执行成功回调
  60.       if (this.status === FULFILLED) {
  61.         // 回调的函数是否异步
  62.         setTimeout(() => {
  63.           try {
  64.             let x = successCallback(this.value);
  65.             resolvePromise(promise2, x, resolve, reject);
  66.           } catch (e) {
  67.             reject(e);
  68.           }
  69.         }, 0);
  71.         // 同步情况下失败时执行失败回调
  72.       } else if (this.status === REJECTED) {
  73.         setTimeout(() => {
  74.           try {
  75.             let x = failCallback(this.reason);
  76.             resolvePromise(promise2, x, resolve, reject);
  77.           } catch (e) {
  78.             reject(e);
  79.           }
  80.         }, 0);
  82.         //异步情况下执行
  83.       } else {
  84.         // onFulfilled传入到成功数组
  85.         this.successCallback.push(() => {
  86.           setTimeout(() => {
  87.             try {
  88.               let x = successCallback(this.value);
  89.               resolvePromise(promise2, x, resolve, reject);
  90.             } catch (e) {
  91.               reject(e);
  92.             }
  93.           }, 0);
  94.         });
  95.         // onRejected传入到失败数组
  96.         this.failCallback.push(() => {
  97.           setTimeout(() => {
  98.             try {
  99.               let x = successCallback(this.value);
  100.               resolvePromise(promise2, x, resolve, reject);
  101.             } catch (e) {
  102.               reject(e);
  103.             }
  104.           }, 0);
  105.         });
  106.       }
  107.     });
  108.     return promise2;
  109.   }
  110.   catch(fn) {
  111.     return this.then(null, fn);
  112.   }
  113.   //resolve方法
  114.   static resolve = (val) => {
  115.     return new Promise((resolve, reject) => {
  116.       resolve(val);
  117.     });
  118.   };
  119.   //reject方法
  120.   static reject = (val) => {
  121.     return new Promise((resolve, reject) => {
  122.       reject(val);
  123.     });
  124.   };
  125.   //race方法
  126.   static race = (promises) => {
  127.     return new Promise((resolve, reject) => {
  128.       for (let i = 0; i < promises.length; i++) {
  129.         promises[i].then(resolve, reject);
  130.       }
  131.     });
  132.   };
  134.   static all = (promises)=>{
  135.     let arr = [];
  136.     let i = 0;
  137.     function processData(index,data){
  138.       arr[index] = data;
  139.       i++;
  140.       if(i == promises.length){
  141.         resolve(arr);
  142.       };
  143.     };
  144.     return new Promise((resolve,reject)=>{
  145.       for(let i=0;i<promises.length;i++){
  146.         promises[i].then(data=>{
  147.           processData(i,data);
  148.         },reject);
  149.       };
  150.     });
  151.   }
  152. }
  154. function resolvePromise(promsie2, x, resolve, reject) {
  155.   if (promsie2 === x) {
  156.     return reject(new TypeError('Chaining cycle detected for promis'));
  157.   }
  158.   if (x instanceof MyPromise) {
  159.     // promise 对象
  160.     x.then(
  161.       (value) => resolve(value),
  162.       (reason) => reject(reason)
  163.     );
  164.   } else {
  165.     // 普通值
  166.     resolve(x);
  167.   }
  168. }

参考链接

[转]史上最最最详细的手写Promise教程