一步一步手写promise[三]

港控/mmm° 2022-02-13 08:15 412阅读 0赞

上一篇文章我们已经走到差不多最后一步了，只需要处理如果then接受状态的返回值是一个promise，我们递归处理即可。

最后的代码长这样：

  1. function Promise5(executor) { 
  2.   this.status = 'pending'
  3.   this.value = void 0
  4.   this.error = void 0
  5.   this.fulFillTasks = []
  6.   this.rejectTasks = []
  9.   const _resolve = (resolveValue) => { 
  10.     if (this.status === 'pending') { 
  11.       this.status = 'resolved'
  12.       this.value = resolveValue
  13.       this.fulFillTasks.forEach(fn => { 
  14.         fn && fn(resolveValue)
  15.       })
  16.     }
  17.   }
  19.   const _reject = (rejectError) => { 
  20.     if (this.status === 'pending') { 
  21.       this.status = 'rejected'
  22.       this.error = rejectError
  23.       this.rejectTasks.forEach(fn => { 
  24.         fn && fn(rejectError)
  25.       })
  26.     }
  27.   }
  28.   executor(_resolve, _reject)
  29. }
  31. // Promise5.prototype.then = function (onFulfilled, onRejected) { 
  32. // if (this.status === 'resolved') { 
  33. // return new Promise5((resolve, reject) => { 
  34. // setTimeout(() => { 
  35. // let val = onFulfilled(this.value)
  36. // resolve(val)
  37. // }, 0)
  38. // })
  39. // }
  41. // if (this.status === 'rejected') { 
  42. // return new Promise5((resolve, reject) => { 
  43. // let error = onRejected(this.error)
  44. // reject(error)
  45. // }, 0)
  46. // }
  48. // return new Promise5((resolve, reject) => { 
  49. // var resolveFunc = (val) => { 
  50. // return setTimeout(() => { 
  51. // let ret = onFulfilled(val)
  52. // resolve(ret)
  53. // }, 0)
  54. // }
  55. // this.fulFillTasks.push(resolveFunc)
  57. // var rejectFunc = (val) => { 
  58. // return setTimeout(() => { 
  59. // let errRet = onRejected(err)
  60. // resolve(errRet)
  61. // }, 0)
  62. // }
  63. // this.rejectTasks.push(rejectFunc)
  64. // })
  65. // }
  68. Promise5.prototype.then = function (onFulfilled, onRejected) { 
  69.   // 可能不是传入的函数，需要处理
  70.   onFulfilled = typeof onFulfilled === "function" ? onFulfilled : value => value;
  71.   onRejected = typeof onRejected === "function" ? onRejected : reason =>{  throw reason };
  73.   // onFulfilled 和 onRejected返回的可能是Promise
  74.   // ret 是返回值
  75.   function resolvePromise(ret, resolve, reject) { 
  76.     // todo 判断resolve 和 reject是否是函数
  77.     // 判断ret是不是promise
  78.     if (ret !== null && (typeof ret === 'object')) { 
  79.       try { 
  80.         let then = ret.then
  81.         if (typeof then === 'function') { 
  82.           then.call(ret, x => { 
  83.               resolvePromise(x, resolve, reject)
  84.           }, y => { 
  85.               reject(y)
  86.           })
  87.         } else { 
  88.          resolve(ret)
  89.         }
  90.       } catch (err) { 
  91.         reject(err)
  92.       }
  94.     // 不是promise直接resolve onFulfilled的返回值
  95.     } else { 
  96.       resolve(ret)
  97.     }
  99.   }
  102.   if (this.status === 'resolved') { 
  103.     return new Promise5((resolve, reject) => { 
  104.       setTimeout(() => { 
  105.         try { 
  106.           let ret = onFulfilled(this.value)
  107.           // resolve(val)
  108.           resolvePromise(ret, resolve, reject)
  109.         } catch (e) { 
  110.           reject(e)
  111.         }
  112.       }, 0)
  113.     })
  114.   }
  116.   if (this.status === 'rejected') { 
  117.     return new Promise5((resolve, reject) => { 
  118.       try { 
  119.         let errRet = onRejected(this.error)
  120.         // reject(error)
  121.         resolvePromise(errRet, resolve, reject)
  122.       } catch (e) { 
  123.         reject(e)
  124.       }
  125.     }, 0)
  126.   }
  128.   return new Promise5((resolve, reject) => { 
  129.     var resolveFunc = (val) => { 
  130.       return setTimeout(() => { 
  131.         try { 
  132.           let ret = onFulfilled(val)
  133.           // resolve(ret)
  134.           resolvePromise(ret, resolve, reject)
  135.         } catch (e) { 
  136.           reject(e)
  137.         }
  138.       }, 0)
  139.     }
  140.     this.fulFillTasks.push(resolveFunc)
  142.     var rejectFunc = (val) => { 
  143.       return setTimeout(() => { 
  144.         try { 
  145.           let errRet = onRejected(err)
  146.           // resolve(errRet)
  147.           resolvePromise(errRet, resolve, reject)
  148.         } catch (e) { 
  149.           reject(e)
  150.         }
  151.       }, 0)
  152.     }
  153.     this.rejectTasks.push(rejectFunc)
  154.   })
  155. }

all code : https://github.com/aeolusheath/FrontExersize/tree/master/pure-js-demo/promise-diy

参考资料：

https://promisesaplus.com/
https://segmentfault.com/a/1190000018335648

发表评论

表情：
评论列表 （有 0 条评论，412人围观）

还没有评论，来说两句吧...

相关阅读