手写系列之手写promise - 图1

    实现手写promise，列举几个关键点：

    • 构造函数的resolve 或是 reject的value值，可能是Promise的实例，不是普通的值，需要再次调用then方法
    • then方法一定会返回一个新的promise
    • 处理resolve，reject函数返回值的时候，一定是迭代递归，直到是普通值为止
    1. /**
    2.  * @author lihh
    3.  * @desc 用来递归不断的new promise.then的
    4.  * @param p 调用的实例
    5.  * @param x 返回值
    6.  * @param resolve 成功的回调
    7.  * @param reject 失败的回调
    8.  * @returns {*}
    9.  */
    10. function nextPromise(p, x, resolve, reject) {
    11.   if (p === x) {
    12.     return reject(new TypeError('循环引用'))
    13.   }
    15.   // 判断是否是对象 以及函数 如果上述两者以外的 直接就按普通值来处理
    16.   if ((x && typeof x === 'object') || typeof x === 'function') {
    17.     let called = false
    18.     try {
    19.       const then = x.then
    20.       // 判断是否是函数 如果不是函数 直接按普通值处理
    21.       if (typeof then === 'function') {
    22.         // 开始调用then
    23.         then.call(
    24.           x,
    25.           (y) => {
    26.             if (called) return
    27.             called = true
    28.             // 有可能then 的返回值还是promise，所以继续调用nextPromise 直到是普通值的时候
    29.             nextPromise(p, y, resolve, reject)
    30.           },
    31.           (r) => {
    32.             if (called) return
    33.             called = true
    34.             nextPromise(p, r, resolve, reject)
    35.           }
    36.         )
    37.       } else {
    38.         resolve(x)
    39.       }
    40.     } catch (e) {
    41.       if (called) return
    42.       called = true
    43.       reject(e)
    44.     }
    45.   } else {
    46.     resolve(x)
    47.   }
    48. }
    50. // promise的几种状态
    51. const promiseStatus = {
    52.   pending: 'pending',
    53.   fulfilled: 'fulfilled',
    54.   rejected: 'rejected',
    55. }
    57. class Promise1 {
    58.   constructor(execute) {
    59.     // 成功的返回值
    60.     this.value = ''
    61.     // promise的状态
    62.     this.state = promiseStatus.pending
    63.     // 失败的原因
    64.     this.reason = ''
    65.     // 延时时，成功的回调函数
    66.     this.resolveCallback = []
    67.     // 延时时，失败的回调函数
    68.     this.rejectCallback = []
    70.     // 成功的回调
    71.     const onFulfilledHandle = (value) => {
    72.       if (this.state !== promiseStatus.pending) return
    74.       // 如果传递的数据是promise实例 再次调用then 做特殊处理
    75.       if (value instanceof Promise1) {
    76.         return value.then(onFulfilledHandle, onRejectedHandle)
    77.       }
    79.       this.state = promiseStatus.fulfilled
    80.       this.value = value
    82.       if (this.resolveCallback.length > 0) {
    83.         let fn
    84.         while ((fn = this.resolveCallback.shift())) {
    85.           fn(this.value)
    86.         }
    87.       }
    88.     }
    90.     // 失败的回调
    91.     const onRejectedHandle = (reason) => {
    92.       if (this.state !== promiseStatus.pending) return
    94.       if (reason instanceof Promise1) {
    95.         return reason.then(onFulfilledHandle, onRejectedHandle)
    96.       }
    98.       this.state = promiseStatus.rejected
    99.       this.reason = reason
    101.       if (this.rejectCallback.length > 0) {
    102.         let fn
    103.         while ((fn = this.rejectCallback.shift())) {
    104.           fn(this.reason)
    105.         }
    106.       }
    107.     }
    109.     try {
    110.       // 立即执行传递的构造函数
    111.       execute(onFulfilledHandle, onRejectedHandle)
    112.     } catch (e) {
    113.       // 异常的时候 直接调用错误信息
    114.       onRejectedHandle(e)
    115.     }
    116.   }
    118.   // then 会返回一个全新的promise
    119.   then(onFulfilled, onRejected) {
    120.     // 传递的then  有可能两个函数都没有 所以需要做特殊处理
    121.     onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (x) => x
    122.     onRejected =
    123.       typeof onRejected === 'function'
    124.         ? onRejected
    125.         : (err) => {
    126.             throw err
    127.           }
    129.     let x
    130.     // 如果状态还是等待中 说明是异步
    131.     if (this.state === promiseStatus.pending) {
    132.       const p2 = new Promise1((resolve, reject) => {
    133.         this.resolveCallback.push((...args) => {
    134.           try {
    135.             x = onFulfilled(...args)
    136.             nextPromise(p2, x, resolve, reject)
    137.           } catch (e) {
    138.             reject(e)
    139.           }
    140.         })
    141.         this.rejectCallback.push((...args) => {
    142.           try {
    143.             x = onRejected(...args)
    144.             nextPromise(p2, x, resolve, reject)
    145.           } catch (e) {
    146.             reject(e)
    147.           }
    148.         })
    149.       })
    150.       return p2
    151.     }
    153.     const p = new Promise1((resolve, reject) => {
    154.       try {
    155.         if (this.state === promiseStatus.fulfilled) {
    156.           x = onFulfilled(this.value)
    157.         }
    158.         if (this.state === promiseStatus.rejected) {
    159.           x = onRejected(this.reason)
    160.         }
    161.         nextPromise(p, x, resolve, reject)
    162.       } catch (e) {
    163.         reject(e)
    164.       }
    165.     })
    166.     return p
    167.   }
    169.   catch(callback) {
    170.     return this.then(null, callback)
    171.   }
    173.   // 全部执行结束 才算结束
    174.   static all(arr) {
    175.     const result = []
    176.     let len = 0
    177.     return new Promise1((resolve, reject) => {
    178.       const callback = (i, res) => {
    179.         result[i] = res
    180.         len++
    181.         if (len === arr.length) {
    182.           resolve(result)
    183.         }
    184.       }
    186.       let item = null
    187.       for (let i = 0; i < arr.length, (item = arr[i]); i++) {
    188.         if (item instanceof Promise1) {
    189.           item.then((res) => {
    190.             callback(i, res)
    191.           }, reject)
    192.         } else {
    193.           callback(i, item)
    194.         }
    195.       }
    196.     })
    197.   }
    199.   // 无论是成功的 还是 失败的 都会进行返回
    200.   static allSettled(arr) {
    201.     let len = 0
    202.     const result = []
    204.     return new Promise1((resolve, reject) => {
    205.       const callback = (i, value, status) => {
    206.         result[i] = { status, value }
    207.         len++
    208.         if (len === arr.length) {
    209.           resolve(result)
    210.         }
    211.       }
    213.       let item
    214.       for (let i = 0; i < arr.length, (item = arr[i]); i++) {
    215.         if (item instanceof Promise1) {
    216.           item.then(
    217.             (x) => {
    218.               callback(i, x, 'fulfilled')
    219.             },
    220.             (y) => {
    221.               callback(i, y, 'rejected')
    222.             }
    223.           )
    224.         } else {
    225.           callback(i, item, 'fulfilled')
    226.         }
    227.       }
    228.     })
    229.   }
    231.   // 谁执行的快 返回谁
    232.   static race(arr) {
    233.     return new Promise1((resolve, reject) => {
    234.       let item
    235.       for (let i = 0; i < arr.length, (item = arr[i]); i++) {
    236.         if (item instanceof Promise1) {
    237.           item.then(resolve, reject)
    238.         } else {
    239.           resolve(item)
    240.         }
    241.       }
    242.     })
    243.   }
    245.   // 直接返回promise的失败的状态
    246.   static reject(value) {
    247.     return new Promise1((resolve, reject) => {
    248.       reject(value)
    249.     })
    250.   }
    252.   // 直接返回promise的成功态
    253.   static resolve(value) {
    254.     return new Promise1((resolve) => {
    255.       resolve(value)
    256.     })
    257.   }
    259.   // 如果有成功的状态 直接返回第一个成功的状态 如果都不成功的话 返回第一个失败的状态
    260.   static any(arr) {
    261.     const failResult = []
    262.     let len = 0
    263.     return new Promise1((resolve, reject) => {
    264.       const callback = (status, value) => {
    265.         len++
    266.         if (status === 'fulfilled') {
    267.           resolve(value)
    268.         } else {
    269.           failResult.push(value)
    270.         }
    272.         if (len === arr.length) {
    273.           resolve(failResult[0])
    274.         }
    275.       }
    277.       let item
    278.       for (let i = 0; i < arr.length, (item = arr[i]); i++) {
    279.         item.then(
    280.           (x) => {
    281.             callback('fulfilled', x)
    282.           },
    283.           (y) => {
    284.             callback('rejected', y)
    285.           }
    286.         )
    287.       }
    288.     })
    289.   }
    290. }
    292. module.exports = Promise1