MyPromise.js

  1. // 定义常量是为了复用且代码有提示
  2. const PENDING = 'pending' // 等待
  3. const FULFILLED = 'fulfilled' // 成功
  4. const REJECTED = 'rejected' // 失败
  6. // 定义一个构造函数
  7. class MyPromise {
  8.   constructor(exector){
  9.     // 捕获执行器的错误
  10.     try {
  11.       // exector是一个执行器,立即执行,并传入resolve和reject方法
  12.       exector(this.resolve, this.reject)
  13.     } catch (error) {
  14.       this.reject(error)
  15.     }
  16.   }
  17.   // 初始状态
  18.   status = PENDING
  19.   // 成功的值
  20.   value = undefined
  21.   // 失败的理由
  22.   reason = undefined
  23.   // 定义成功回调参数
  24.   successCallback = []
  25.   // 定义失败回调参数
  26.   failCallback = []
  28.   // 定义数组的原因
  29.   // .then方法可以被多次调用, 每次存储的内容要互不影响
  32.   // 普通函数this指向的是window或者undefined
  33.   // 用箭头函数就可以让this指向当前实例对象
  34.   resolve = value => {
  35.     // 判断状态是不是等待,阻止向下执行
  36.     if (this.status !== PENDING) return;
  37.     // 设置状态为成功
  38.     this.status = FULFILLED
  39.     // 保存成功的值
  40.     this.value = value
  41.     // 成功回调存在就调用
  42.     // this.successCallback&&this.successCallback(value)
  43.     // 为了then的多次调用,回调参数保存要求互不影响改进
  44.     // shift方法是在数组中删除值，返回被删除的项,每执行一个就删除一个，最终变为0
  45.     while(this.successCallback.length) this.successCallback.shift()()
  46.   }
  48.   reject = reason => {
  49.     // 判断状态是不是等待,阻止向下执行
  50.     if (this.status !== PENDING) return;
  51.     // 设置状态为失败
  52.     this.status = REJECTED
  53.     // 保存失败的值
  54.     this.reason = reason
  55.     // 失败回调存在就调用
  56.     // this.failCallback&&this.failCallback(reason)
  57.     // 为了then的多次调用,回调参数保存要求互不影响改进
  58.     // shift方法是在数组中删除值，返回被删除的项,每执行一个就删除一个，最终变为0
  59.     while(this.failCallback.length) this.failCallback.shift()()
  60.   }
  62.   then(successCallback, failCallback) {
  63.     // 将then参数变成可选参数
  64.     successCallback = successCallback ? successCallback : value => value;
  65.     failCallback = failCallback ? failCallback : reason => { throw reason }
  66.     // 为了实现then的链式调用, 需要返回一个promise对象
  67.     let promise2 = new MyPromise((resolve, reject) => {
  68.       // 判断状态
  69.       if (this.status === FULFILLED) {
  70.         // successcallback(this.value)
  71.         // 使用setTimeout把代码变成异步代码,才能拿到promise2, 去处理then返回自身对象嵌套的问题.
  72.         setTimeout(() => {
  73.           // 捕获成功回调方法的错误
  74.           try {
  75.             // 成功调用成功回调,并把值返回
  76.             let x = successCallback(this.value)
  77.             // 把返回值传递给下一个then方法
  78.             resolvePromise(promise2, x, resolve, reject)
  79.           } catch (error) {
  80.             reject(error)
  81.           }
  82.         }, 0)
  84.       } else if (this.status === REJECTED) {
  85.         // 失败调用失败回调,并把原因返回
  86.         // failCallback(this.reason)
  87.         setTimeout(() => {
  88.           // 捕获成功回调方法的错误
  89.           try {
  90.             // 成功调用成功回调,并把值返回
  91.             let x = failCallback(this.reason)
  92.             // 把返回值传递给下一个then方法
  93.             resolvePromise(promise2, x, resolve, reject)
  94.           } catch (error) {
  95.             reject(error)
  96.           }
  97.         }, 0)
  98.       } else {
  99.         // 等待状态中
  100.         // 不知道成功还是失败,所以先把回调参数存起来, 等状态确定再调用
  101.         this.successCallback.push(() => {
  102.           setTimeout(() => {
  103.             try {
  104.               let x = successCallback(this.value)
  105.               resolvePromise(promise2, x, resolve, reject)
  106.             } catch (error) {
  107.               reject(error)
  108.             }
  109.           }, 0)
  110.         })
  111.         this.failCallback.push(() => {
  112.           setTimeout(() => {
  113.             try {
  114.               let x = failCallback(this.reason)
  115.               resolvePromise(promise2, x, resolve, reject)
  116.             } catch (error) {
  117.               reject(error)
  118.             }
  119.           }, 0)
  120.         });
  121.       }
  122.     })
  123.     return promise2
  124.   }
  126.   finally(callback) {
  127.     return this.then(value => {
  128.       // callback();
  129.       // return value
  130.       // 利用resolve的等待异步完成功能, 实现finally的return异步等待功能
  131.       return MyPromise.resolve(callback()).then(() => value)
  132.     }, reason => {
  133.       // callback()
  134.       // throw reason
  135.       return MyPromise.resolve(callback()).then(() => { throw reason })
  136.     })
  137.   }
  139.   catch(failCallback) {
  140.     return this.then(undefined, failCallback)
  141.   }
  143.   static all(array) {
  144.     let result = [];
  145.     let index = 0;
  147.     return new MyPromise((resolve, reject) => {
  148.       function addData(key, value) {
  149.         result[key] = value
  150.         index++;
  151.         if (index === array.length) {
  152.           resolve(result)
  153.         }
  154.       }
  156.       for(let i = 0; i < array.length; i++) {
  157.         let current = array[i]
  158.         if (current instanceof MyPromise) {
  159.           current.then(value => addData(i, array[i]), reason => reject(reason))
  160.         } else {
  161.           addData(i, array[i])
  162.         }
  163.       }
  164.     })
  165.   }
  167.   static resolve(value) {
  168.     if (value instanceof MyPromise) return value
  169.     return new MyPromise(resolve => resolve(value))
  170.   }
  172. }
  174. // 返回普通值和promise对象处理
  175. // 普通值 => 直接传递给下一个then
  176. // promise对象  先判断promise的返回值 
  177. // value => resolve   reason => reject
  178. function resolvePromise(promise2, x, resolve, reject) {
  179.   // 判断then方法返回的是不是自己的promise, 是则会产生循环嵌套, 阻止程序运行, 报错
  180.   if (promise2 === x) {
  181.     return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  182.   }
  183.   if (x instanceof MyPromise) {
  184.     // promise对象
  185.     // x.then(value => resolve(value), reason => reject(reason))
  186.     x.then(resolve, reject)
  187.   } else {
  188.     // 普通值
  189.     resolve(x)
  190.   }
  191. }
  193. module.exports = MyPromise