定义整体结构

  1. /*
  2. 自定义 Promise 函数模块:IFFE 立即调用函数模块
  3. */
  4. (function (window) {
  5.   const PENDING = 'pending'
  6.   const RESOLVED = 'resolved'
  7.   const REJECTED = 'rejected'
  8.   /* 
  9.   Promise 构造函数
  10.   executor:执行器函数（同步执行）
  11.    */
  12.   function Promise (executor) {}
  14.   /* 
  15.   Promise 原型对象的 then()
  16.   返回一个新的 promise 对象
  17.   返回的 promise 的结果由 onResolved/onRejected 执行的结果决定
  18.    */
  19.   Promise.prototype.then = function (onResolved, onRejected) {}
  21.   /* Promise 原型对象的 catch()
  23.   返回一个新的 promise 对象*/
  24.   Promise.prototype.catch = function (onRejected) {
  25.     return this.then(undefined, onRejected)
  26.   }
  29.   /* Promise 函数对象 resolve() */
  30.   Promise.resolve = function (value) {}
  32.   /* Promise 函数对象 reject() */
  33.   Promise.reject = function (reason) {}
  35.   /* Promise 函数对象 all()
  36.   返回一个新的 promise 对象，只有当所有promise成功才成功，有一个失败就失败 */
  37.   Promise.all = function (promises) {}
  39.   /* Promise 函数对象 race() race 赛跑
  40.   返回一个新的 promise 对象，其结果由第一个完成的promise决定 */
  41.   Promise.race = function (promises) {}
  43.   /* 
  44.   返回一个 promise 对象，在指定时间后才确定结果
  45.   */
  46.   Promise.resolveDelay = function (value, time) {}
  48.   /* 
  49.  返回一个 promise 对象，在指定时间后才失败
  50.  */
  51.   Promise.rejectDelay = function (params) {}
  53.   // 向外暴露 Promise 函数
  54.   window.Promise = Promise
  55. })(window)

Promise构造函数实现

  1.   /* 
  2.   Promise 构造函数
  3.   executor:执行器函数（同步执行）
  4.    */
  5.   function Promise (executor) {
  6.     // 将当前promise的对象存储起来
  7.     const self = this
  8.     self.status = PENDING //状态属性，初始值 pending
  9.     self.data = undefined// 存储结果数据的属性
  10.     self.callbacks = []// 回调函数数组，
  12.     function resolve (value) {
  13.       // 如果当前状态不是 pending，直接结果
  14.       if (self.status !== PENDING) return
  15.       // 改变状态
  16.       self.status = RESOLVED
  17.       // 保存value
  18.       self.data = value
  19.       // 如果有等待执行的callback函数，立即异步执行回调函数
  20.       if (self.callbacks.length > 0) {
  21.         setTimeout(() => { // 放入回调队列汇总执行所有成功的回调函数
  22.           self.callbacks.forEach(callback => {
  23.             callback.onResolved(value)
  24.           })
  25.         });
  26.       }
  27.     }
  28.     function reject (reason) {
  29.       // 如果当前状态不是 pending，直接结果
  30.       if (self.status !== PENDING) return
  31.       // 改变状态
  32.       self.status = REJECTED
  33.       // 保存value
  34.       self.data = reason
  35.       // 如果有等待执行的callback函数，立即异步执行回调函数
  36.       if (self.callbacks.length > 0) {
  37.         setTimeout(() => { // 放入回调队列汇总执行所有成功的回调函数
  38.           self.callbacks.forEach(callback => {
  39.             callback.onRejected(reason)
  40.           })
  41.         });
  42.       }
  43.     }
  44.     /* 传入一个执行器函数，立即执行*/
  45.     try {
  46.       executor(resolve, reject)
  47.     } catch (error) {
  48.       reject(error)
  49.     }
  50.   }

Promise.then()/catch()的实现

  1. /* 
  2.   Promise 原型对象的 then()
  3.   返回一个新的 promise 对象
  4.   返回的 promise 的结果由 onResolved/onRejected 执行的结果决定
  5.    */
  6.   Promise.prototype.then = function (onResolved, onRejected) {
  7.     // 因为没有 this 导致 this 指向错误，所以在定义 prototype 方法上一定记得不要使用箭头函数
  8.     const self = this
  9.     // 向后传递成功的 value
  10.     onResolved = typeof onResolved === 'function' ? onResolved : value => value
  11.     // 指定默认的失败回调，实现错误/异常穿透的关键点，向后传递失败的 reason
  12.     onRejected = typeof onRejected === 'function' ?
  13.       onRejected : reason => { throw reason }
  15.     return new Promise((resolve, reject) => {
  16.       const handle = (callback) => {
  17.         /* 
  18.         1. 抛出异常
  19.         2. 返回 promise ，返回 promise 的结果就是当前执行回调函数的结果
  20.         3. 返回不是 promise ，返回 promise 成功，value 为返回值
  21.          */
  22.         try {
  23.           const result = callback(self.data)
  24.           if (result instanceof Promise) {
  25.             result.then(resolve, reject)
  26.           } else {
  27.             resolve(result)
  28.           }
  29.         } catch (error) {
  30.           reject(error)
  31.         }
  32.       }
  33.       // 当前 promise(then) 的状态时 resolved
  34.       if (self.status === RESOLVED) {
  35.         // 异步执行回调函数
  36.         setTimeout(() => {
  37.           handle(onResolved)
  38.         });
  39.       }
  40.       // 当前 promise(then) 的状态时 rejected
  41.       if (self.status === REJECTED) {
  42.         // 异步执行回调函数
  43.         setTimeout(() => {
  44.           handle(onRejected)
  45.         });
  46.       }
  47.       // 当前 promise(then) 的状态时 pending
  48.       if (self.status === PENDING) {
  49.         // 将成功或失败的回调函数保存在 callbacks 数组中
  50.         self.callbacks.push({
  51.           onResolved: () => {
  52.             handle(onResolved)
  53.           },
  54.           onRejected: () => {
  55.             handle(onRejected)
  56.           }
  57.         })
  58.       }
  59.     })
  60.   }
  62.   /* Promise 原型对象的 catch()
  64.   返回一个新的 promise 对象*/
  65.   Promise.prototype.catch = function (onRejected) {
  66.     return this.then(undefined, onRejected)
  67.   }

Promise.resolve()/reject()的实现

  1.   /* Promise 函数对象 resolve() */
  2.   Promise.resolve = function (value) {
  3.     // 返回一个 promise 
  4.     return new Promise((resolve, reject) => {
  5.       /* 判断 value 情况
  6.       1. value === promise
  7.       2. value != promise
  8.       */
  9.       if (value instanceof Promise) {
  10.         // 根据 value 结果，作为当前 promise 的结果
  11.         value.then(resolve, reject)
  12.       } else { // promsie => 成功，数据是 value
  13.         resolve(value)
  14.       }
  15.     })
  16.   }
  18.   /* Promise 函数对象 reject() */
  19.   Promise.reject = function (reason) {
  20.     // 返回一个失败的 promise
  21.     return new Promise((resolve, reject) => {
  22.       reject(reason)
  23.     })
  24.   }

Promise.all()/race()的实现

  1. /* Promise 函数对象 all()
  2.   返回一个新的 promise 对象，只有当所有promise成功才成功，有一个失败就失败 */
  3.   Promise.all = function (promises) {
  4.     // 保存所有成功 value 的数组
  5.     // const values = []
  6.     const values = new Array(promises.length)
  7.     // 计数器，保存成功 promise 的数量
  8.     let resolvedCount = 0
  9.     return new Promise((resolve, reject) => {
  10.       // 遍历获取每个 promise 的结果
  11.       promises.forEach((p, index) => {
  12.         // Promise.resolve(p) 处理数组不是 promise 对象的情况
  13.         Promise.resolve(p).then(
  14.           value => {
  15.             resolvedCount++
  16.             // p 成功，将成功的 value 保存在 values
  17.             values[index] = value
  18.             // 如果全部成功，将 return 的 promise 改变成功
  19.             if (resolvedCount === promises.length) {
  20.               resolve(values)
  21.             }
  22.           },
  23.           reason => {
  24.             reject(reason)
  25.           })
  26.       })
  27.     })
  28.   }
  30.   /* Promise 函数对象 race() race 赛跑
  31.   返回一个新的 promise 对象，其结果由第一个完成的promise决定 */
  32.   Promise.race = function (promises) {
  33.     return new Promise((resolve, reject) => {
  34.       // 遍历获取每个 promise 的结果
  35.       promises.forEach((p, index) => {
  36.         Promise.resolve(p).then(
  37.           value => {
  38.             //  一旦有成功就该改变状态，将 return 变为成功
  39.             resolve(value)
  40.           },
  41.           reason => {
  42.             //  一旦有失败就该改变状态，将 return 变为失败
  43.             reject(reason)
  44.           })
  45.       })
  46.     })
  47.   }

Promise.resolveDelay()/rejectDelay()的实现（自定义添加）

  1.   /* 
  2.   返回一个 promise 对象，在指定时间后才确定结果
  3.   */
  4.   Promise.resolveDelay = function (value, time) {
  5.     // 返回一个 promise 
  6.     return new Promise((resolve, reject) => {
  7.       setTimeout(() => {
  8.         /* 判断 value 情况
  9.           1. value === promise
  10.           2. value != promise
  11.         */
  12.         if (value instanceof Promise) {
  13.           // 根据 value 结果，作为当前 promise 的结果
  14.           value.then(resolve, reject)
  15.         } else { // promsie => 成功，数据是 value
  16.           resolve(value)
  17.         }
  18.       }, time);
  20.     })
  21.   }
  23.   /* 
  24.  返回一个 promise 对象，在指定时间后才失败
  25.  */
  26.   Promise.rejectDelay = function (params) {
  27.     // 返回一个失败的 promise
  28.     return new Promise((resolve, reject) => {
  29.       setTimeout(() => {
  30.         reject(reason)
  31.       }, time);
  32.     })
  33.   }

class 版本

  1. const PENDING = 'pending'
  2. const RESOLVED = 'resolved'
  3. const REJECTED = 'rejected'
  5. class Promise {
  6.   /* 
  7.   Promise 构造构造器
  8.   executor:执行器函数（同步执行）
  9.    */
  10.   constructor(executor) {
  11.     // 将当前promise的对象存储起来
  12.     const self = this
  13.     self.status = PENDING //状态属性，初始值 pending
  14.     self.data = undefined// 存储结果数据的属性
  15.     self.callbacks = []// 回调函数数组，
  17.     function resolve (value) {
  18.       // 如果当前状态不是 pending，直接结果
  19.       if (self.status !== PENDING) return
  20.       // 改变状态
  21.       self.status = RESOLVED
  22.       // 保存value
  23.       self.data = value
  24.       // 如果有等待执行的callback函数，立即异步执行回调函数
  25.       if (self.callbacks.length > 0) {
  26.         setTimeout(() => { // 放入回调队列汇总执行所有成功的回调函数
  27.           self.callbacks.forEach(callback => {
  28.             callback.onResolved(value)
  29.           })
  30.         });
  31.       }
  32.     }
  33.     function reject (reason) {
  34.       // 如果当前状态不是 pending，直接结果
  35.       if (self.status !== PENDING) return
  36.       // 改变状态
  37.       self.status = REJECTED
  38.       // 保存value
  39.       self.data = reason
  40.       // 如果有等待执行的callback函数，立即异步执行回调函数
  41.       if (self.callbacks.length > 0) {
  42.         setTimeout(() => { // 放入回调队列汇总执行所有成功的回调函数
  43.           self.callbacks.forEach(callback => {
  44.             callback.onRejected(reason)
  45.           })
  46.         });
  47.       }
  48.     }
  49.     /* 传入一个执行器函数，立即执行*/
  50.     try {
  51.       executor(resolve, reject)
  52.     } catch (error) {
  53.       reject(error)
  54.     }
  55.   }
  57.   /* 
  58. Promise 原型对象的 then()
  59. 返回一个新的 promise 对象
  60. 返回的 promise 的结果由 onResolved/onRejected 执行的结果决定
  61.   */
  62.   then (onResolved, onRejected) {
  63.     // 因为没有 this 导致 this 指向错误，所以在定义 prototype 方法上一定记得不要使用箭头函数
  64.     const self = this
  65.     // 向后传递成功的 value
  66.     onResolved = typeof onResolved === 'function' ? onResolved : value => value
  67.     // 指定默认的失败回调，实现错误/异常穿透的关键点，向后传递失败的 reason
  68.     onRejected = typeof onRejected === 'function' ?
  69.       onRejected : reason => { throw reason }
  71.     return new Promise((resolve, reject) => {
  72.       const handle = (callback) => {
  73.         /* 
  74.         1. 抛出异常
  75.         2. 返回 promise ，返回 promise 的结果就是当前执行回调函数的结果
  76.         3. 返回不是 promise ，返回 promise 成功，value 为返回值
  77.         */
  78.         try {
  79.           const result = callback(self.data)
  80.           if (result instanceof Promise) {
  81.             result.then(resolve, reject)
  82.           } else {
  83.             resolve(result)
  84.           }
  85.         } catch (error) {
  86.           reject(error)
  87.         }
  88.       }
  89.       // 当前 promise(then) 的状态时 resolved
  90.       if (self.status === RESOLVED) {
  91.         // 异步执行回调函数
  92.         setTimeout(() => {
  93.           handle(onResolved)
  94.         });
  95.       }
  96.       // 当前 promise(then) 的状态时 rejected
  97.       if (self.status === REJECTED) {
  98.         // 异步执行回调函数
  99.         setTimeout(() => {
  100.           handle(onRejected)
  101.         });
  102.       }
  103.       // 当前 promise(then) 的状态时 pending
  104.       if (self.status === PENDING) {
  105.         // 将成功或失败的回调函数保存在 callbacks 数组中
  106.         self.callbacks.push({
  107.           onResolved: () => {
  108.             handle(onResolved)
  109.           },
  110.           onRejected: () => {
  111.             handle(onRejected)
  112.           }
  113.         })
  114.       }
  115.     })
  116.   }
  118.   /* Promise 原型对象的 catch()
  120.   返回一个新的 promise 对象*/
  121.   catch (onRejected) {
  122.     return this.then(undefined, onRejected)
  123.   }
  126.   /* Promise 函数对象 resolve()
  127.   static 定义 class 的静态方法
  128.   不能再累的实例上调用静态方法，而应该通过类本身调用
  129.   */
  130.   static resolve = function (value) {
  131.     // 返回一个 promise 
  132.     return new Promise((resolve, reject) => {
  133.       /* 判断 value 情况
  134.       1. value === promise
  135.       2. value != promise
  136.       */
  137.       if (value instanceof Promise) {
  138.         // 根据 value 结果，作为当前 promise 的结果
  139.         value.then(resolve, reject)
  140.       } else { // promsie => 成功，数据是 value
  141.         resolve(value)
  142.       }
  143.     })
  144.   }
  146.   /* Promise 函数对象 reject() */
  147.   static reject = function (reason) {
  148.     // 返回一个失败的 promise
  149.     return new Promise((resolve, reject) => {
  150.       reject(reason)
  151.     })
  152.   }
  154.   /* Promise 函数对象 all()
  155.   返回一个新的 promise 对象，只有当所有promise成功才成功，有一个失败就失败 */
  156.   static all = function (promises) {
  157.     // 保存所有成功 value 的数组
  158.     // const values = []
  159.     const values = new Array(promises.length)
  160.     // 计数器，保存成功 promise 的数量
  161.     let resolvedCount = 0
  162.     return new Promise((resolve, reject) => {
  163.       // 遍历获取每个 promise 的结果
  164.       promises.forEach((p, index) => {
  165.         // Promise.resolve(p) 处理数组不是 promise 对象的情况
  166.         Promise.resolve(p).then(
  167.           value => {
  168.             resolvedCount++
  169.             // p 成功，将成功的 value 保存在 values
  170.             values[index] = value
  171.             // 如果全部成功，将 return 的 promise 改变成功
  172.             if (resolvedCount === promises.length) {
  173.               resolve(values)
  174.             }
  175.           },
  176.           reason => {
  177.             reject(reason)
  178.           })
  179.       })
  180.     })
  181.   }
  183.   /* Promise 函数对象 race() race 赛跑
  184.   返回一个新的 promise 对象，其结果由第一个完成的promise决定 */
  185.   static race = function (promises) {
  186.     return new Promise((resolve, reject) => {
  187.       // 遍历获取每个 promise 的结果
  188.       promises.forEach((p, index) => {
  189.         Promise.resolve(p).then(
  190.           value => {
  191.             //  一旦有成功就该改变状态，将 return 变为成功
  192.             resolve(value)
  193.           },
  194.           reason => {
  195.             //  一旦有失败就该改变状态，将 return 变为失败
  196.             reject(reason)
  197.           })
  198.       })
  199.     })
  200.   }
  202.   /* 
  203.   返回一个 promise 对象，在指定时间后才确定结果
  204.   */
  205.   static resolveDelay = function (value, time) {
  206.     // 返回一个 promise 
  207.     return new Promise((resolve, reject) => {
  208.       setTimeout(() => {
  209.         /* 判断 value 情况
  210.           1. value === promise
  211.           2. value != promise
  212.         */
  213.         if (value instanceof Promise) {
  214.           // 根据 value 结果，作为当前 promise 的结果
  215.           value.then(resolve, reject)
  216.         } else { // promsie => 成功，数据是 value
  217.           resolve(value)
  218.         }
  219.       }, time);
  221.     })
  222.   }
  224.   /* 
  225. 返回一个 promise 对象，在指定时间后才失败
  226. */
  227.   static rejectDelay = function (params) {
  228.     // 返回一个失败的 promise
  229.     return new Promise((resolve, reject) => {
  230.       setTimeout(() => {
  231.         reject(reason)
  232.       }, time);
  233.     })
  234.   }
  235. }