• 手写 Promise（2）实例方法与静态方法的实现

    一：什么是 Promise

            Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。    

    Promise对象有以下两个特点。

    （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

    （2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

    二：手写Promise

    1、实例方法（catch、finally）

    设计思路

    内部调用then

    处理异常

    代码实现

    2.     <script>
    3.         // 定义函数
    4.         function runAsynctask(callback) {// callback 是一个回调函数
    5.             // 调用核心api
    6.             if (typeof queueMicrotask === 'function') { // 调用三个函数是为了解决浏览器不兼容问题，先判断是不是函数
    7.                 queueMicrotask(callback)
    8.             } else if (typeof MutationObserver === "function") {
    9.                 const obs = new MutationObserver(callback)
    10.                 const divNode = document.createElement('div')
    11.                 obs.observe(divNode, { childList: true })
    12.                 divNode.innerHTML = '打酱油改变以下内容'
    13.             } else {
    14.                 setTimeout(callback, 0)
    15.             }
    16.         }
    17.  
    18.         const PENDING = 'pending'
    19.         const FULFILLED = 'fulfilled'
    20.         const REJECTED = 'rejected'
    21.         class wePromise {
    22.             state = PENDING // 状态
    23.             result = undefined // 原因
    24.             #handlers = [] // [{onFulfilled,onReject},......]
    25.             // 构造函数
    26.             constructor(func) {
    27.                 // 改状态，pending => fulfilled
    28.                 const reslove = (result) => {
    29.                     if (this.state === PENDING) {
    30.                         this.state = FULFILLED
    31.                         this.result = result
    32.                         // 下面这个是异步的时候，先保存，然后到这一步执行，就取出保存的函数并且执行
    33.                         this.#handlers.forEach(({ onFulfilled }) => { // 解构
    34.                             onFulfilled(this.result)
    35.                         })
    36.                     }
    37.                 }
    38.                 // 改状态，pending => rejected
    39.                 const reject = (result) => {
    40.                     if (this.state === PENDING) {
    41.                         this.state = REJECTED
    42.                         this.result = result
    43.                         this.#handlers.forEach(({ onReject }) => {
    44.                             onReject(this.result)
    45.                         })
    46.                     }
    47.                 }
    48.  
    49.                 // 异常的处理
    50.                 try {
    51.                     // 执行回调函数
    52.                     func(reslove, reject)
    53.                 } catch (error) {
    54.                     reject(error)
    55.                 }
    56.             }
    57.  
    58.             then(onFulfilled, onReject) {
    59.                 // 判断传入的参数是不是函数
    60.                 onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : x => x
    61.                 onReject = typeof onReject === 'function' ? onReject : x => { throw x }
    62.  
    63.                 const p2 = new wePromise((reslove, reject) => {
    64.                     // 判断执行完成后的状态
    65.                     if (this.state === FULFILLED) {
    66.                         runAsynctask(() => {
    67.                             try {
    68.                                 // 获取返回值
    69.                                 const x = onFulfilled(this.result) // 返回结果
    70.                                 reslovePromise(p2, x, reslove, reject)
    71.                             } catch (error) {
    72.                                 // 处理异常
    73.                                 reject(error)
    74.                             }
    75.  
    76.                         })
    77.                     } else if (this.state === REJECTED) {
    78.                         runAsynctask(() => {
    79.                             try {
    80.                                 const x = onReject(this.result)
    81.                                 reslovePromise(p2, x, reslove, reject)
    82.                             } catch (error) {
    83.                                 reject(error)
    84.                             }
    85.                         })
    86.                     } else if (this.state === PENDING) { // 还没有改变状态，说明是异步
    87.                         // 保存回调函数
    88.                         this.#handlers.push({
    89.                             onFulfilled: () => {
    90.                                 runAsynctask(() => {
    91.                                     try {
    92.                                         const x = onFulfilled(this.result) // 返回结果
    93.                                         reslovePromise(p2, x, reslove, reject)
    94.                                     } catch (error) {
    95.                                         reject(error)
    96.                                     }
    97.                                 })
    98.                             },
    99.                             onReject: () => {
    100.                                 runAsynctask(() => {
    101.                                     try {
    102.                                         const x = onReject(this.result) // 返回结果
    103.                                         reslovePromise(p2, x, reslove, reject)
    104.                                     } catch (error) {
    105.                                         reject(error)
    106.                                     }
    107.                                 })
    108.                             }
    109.                         })
    110.                     }
    111.                 })
    112.  
    113.  
    114.                 return p2
    115.             }
    116.             catch(onReject) {
    117.                 // 内部调用then方法
    118.                 return this.then(undefined, onReject)
    119.             }
    120.             finally(onFinally){
    121.                 return this.then(onFinally,onFinally)
    122.             }
    123.         }
    124.  
    125.         function reslovePromise(p2, x, reslove, reject) {
    126.             // 处理重复引用
    127.             if (x === p2) {
    128.                 // 抛出错误
    129.                 throw new TypeError('Chaining cycle detected for promise #')
    130.             }
    131.             // 处理返回的Promise
    132.             if (x instanceof wePromise) {
    133.                 // 调用then方法
    134.                 x.then(res => reslove(res), err => reject(err))
    135.             } else {
    136.                 // 处理返回值
    137.                 reslove(x)
    138.             }
    139.         }
    140.         // 创建对象，调用两个方法
    141.         const p = new wePromise((reslove, reject) => {
    142.             // reslove('success')
    143.             // reject('reject')
    144.             throw 'throw-error'
    145.         })
    146.         p.then(res => {
    147.             console.log('成功回调1：', res);
    148.             // throw 'throw-error'
    149.             // return 2
    150.         }).catch(err => {
    151.             console.log('失败回调1：', err);
    152.  
    153.         }).finally(() => {
    154.             console.log('finally');
    155.         })
    156.     script>
    157. body>

    运行效果

    2、静态方法（reslove、reject、race）

    reslove、reject设计思路

    • 判断传入值
    • Promise返回
    • 转换为Promise返回

     race设计思路

    •  返回Promise
    • 判断是否为数组
    • 等待第一个敲定

    all设计思路

    • 返回Promise
    • 判断是否为数组
    • 空数组直接兑换
    • 处理全部兑换（记录结果 --> 判断全部兑现）
    • 处理第一个拒绝 

    allSettled设计思路

    • 返回Promise
    • 判断是否为数组
    • 空数组直接兑换
    • 等待全部敲定（记录结果 --> 处理兑换 或 拒绝）

    any设计思路

    • 返回Promise
    • 判断是否为数组
    • 空数组直接拒绝
    • 等待结果（第一个兑现，全部拒绝）

    代码实现

    2.     <script>
    3.         // 定义函数
    4.         function runAsynctask(callback) {// callback 是一个回调函数
    5.             // 调用核心api
    6.             if (typeof queueMicrotask === 'function') { // 调用三个函数是为了解决浏览器不兼容问题，先判断是不是函数
    7.                 queueMicrotask(callback)
    8.             } else if (typeof MutationObserver === "function") {
    9.                 const obs = new MutationObserver(callback)
    10.                 const divNode = document.createElement('div')
    11.                 obs.observe(divNode, { childList: true })
    12.                 divNode.innerHTML = '打酱油改变以下内容'
    13.             } else {
    14.                 setTimeout(callback, 0)
    15.             }
    16.         }
    17.  
    18.         const PENDING = 'pending'
    19.         const FULFILLED = 'fulfilled'
    20.         const REJECTED = 'rejected'
    21.         class wePromise {
    22.             state = PENDING // 状态
    23.             result = undefined // 原因
    24.             #handlers = [] // [{onFulfilled,onReject},......]
    25.             // 构造函数
    26.             constructor(func) {
    27.                 // 改状态，pending => fulfilled
    28.                 const reslove = (result) => {
    29.                     if (this.state === PENDING) {
    30.                         this.state = FULFILLED
    31.                         this.result = result
    32.                         // 下面这个是异步的时候，先保存，然后到这一步执行，就取出保存的函数并且执行
    33.                         this.#handlers.forEach(({ onFulfilled }) => { // 解构
    34.                             onFulfilled(this.result)
    35.                         })
    36.                     }
    37.                 }
    38.                 // 改状态，pending => rejected
    39.                 const reject = (result) => {
    40.                     if (this.state === PENDING) {
    41.                         this.state = REJECTED
    42.                         this.result = result
    43.                         this.#handlers.forEach(({ onReject }) => {
    44.                             onReject(this.result)
    45.                         })
    46.                     }
    47.                 }
    48.  
    49.                 // 异常的处理
    50.                 try {
    51.                     // 执行回调函数
    52.                     func(reslove, reject)
    53.                 } catch (error) {
    54.                     reject(error)
    55.                 }
    56.             }
    57.  
    58.             then(onFulfilled, onReject) {
    59.                 // 判断传入的参数是不是函数
    60.                 onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : x => x
    61.                 onReject = typeof onReject === 'function' ? onReject : x => { throw x }
    62.  
    63.                 const p2 = new wePromise((reslove, reject) => {
    64.                     // 判断执行完成后的状态
    65.                     if (this.state === FULFILLED) {
    66.                         runAsynctask(() => {
    67.                             try {
    68.                                 // 获取返回值
    69.                                 const x = onFulfilled(this.result) // 返回结果
    70.                                 reslovePromise(p2, x, reslove, reject)
    71.                             } catch (error) {
    72.                                 // 处理异常
    73.                                 reject(error)
    74.                             }
    75.  
    76.                         })
    77.                     } else if (this.state === REJECTED) {
    78.                         runAsynctask(() => {
    79.                             try {
    80.                                 const x = onReject(this.result)
    81.                                 reslovePromise(p2, x, reslove, reject)
    82.                             } catch (error) {
    83.                                 reject(error)
    84.                             }
    85.                         })
    86.                     } else if (this.state === PENDING) { // 还没有改变状态，说明是异步
    87.                         // 保存回调函数
    88.                         this.#handlers.push({
    89.                             onFulfilled: () => {
    90.                                 runAsynctask(() => {
    91.                                     try {
    92.                                         const x = onFulfilled(this.result) // 返回结果
    93.                                         reslovePromise(p2, x, reslove, reject)
    94.                                     } catch (error) {
    95.                                         reject(error)
    96.                                     }
    97.                                 })
    98.                             },
    99.                             onReject: () => {
    100.                                 runAsynctask(() => {
    101.                                     try {
    102.                                         const x = onReject(this.result) // 返回结果
    103.                                         reslovePromise(p2, x, reslove, reject)
    104.                                     } catch (error) {
    105.                                         reject(error)
    106.                                     }
    107.                                 })
    108.                             }
    109.                         })
    110.                     }
    111.                 })
    112.  
    113.  
    114.                 return p2
    115.             }
    116.  
    117.             // 实例方法
    118.             catch(onReject) {
    119.                 // 内部调用then方法
    120.                 return this.then(undefined, onReject)
    121.             }
    122.             finally(onFinally) {
    123.                 return this.then(onFinally, onFinally)
    124.             }
    125.  
    126.             // 静态方法
    127.             static reslove(value) {
    128.                 // 判断传入的是不是Promise对象
    129.                 if (value instanceof wePromise) {
    130.                     return value
    131.                 }
    132.                 return new wePromise((reslove, reject) => {
    133.                     reslove(value)
    134.                 })
    135.  
    136.             }
    137.             static reject(value) {
    138.                 return new wePromise((reslove, reject) => {
    139.                     reject(value)
    140.                 })
    141.             }
    142.             static race(promises) {
    143.                 return new wePromise((reslove, reject) => {
    144.                     // 判断是否为数组
    145.                     if (!Array.isArray(promises)) {
    146.                         return reject(new TypeError('Argument is not iterable'))
    147.                     }
    148.                     // 等待第一个敲定
    149.                     promises.forEach(p => {
    150.                         wePromise.reslove(p).then(res => { reslove(res) }, err => { reject(err) })
    151.                     })
    152.                 })
    153.             }
    154.             // 重要
    155.             static all(promises) {
    156.                 // 返回Promise实例
    157.                 return new wePromise((reslove, reject) => {
    158.                     // 判断是否为数组
    159.                     if (!Array.isArray(promises)) {
    160.                         return reject(new TypeError('Argument is not iterable'))
    161.                     }
    162.                     // 空数组直接兑换
    163.                     promises.length === 0 && reslove(promises)
    164.                     // 处理全部兑现
    165.                     const results = []
    166.                     let count = 0
    167.                     promises.forEach((p, index) => {
    168.                         wePromise.reslove(p).then(res => {
    169.                             results[index] = res
    170.                             count++
    171.                             // 判断全部兑现
    172.                             count === promises.length && reslove(results)
    173.                         }, err => {
    174.                             // 处理第一个拒绝
    175.                             reject(err)
    176.                         })
    177.                     })
    178.                 })
    179.             }
    180.             static allSettled(promises) {
    181.                 // 返回Promise实例
    182.                 return new wePromise((reslove, reject) => {
    183.                     // 判断是否为数组
    184.                     if (!Array.isArray(promises)) {
    185.                         return reject(new TypeError('Argument is not iterable'))
    186.                     }
    187.                     // 空数组直接兑换
    188.                     promises.length === 0 && reslove(promises)
    189.                     // 等待全部敲定
    190.                     const results = []
    191.                     let count = 0
    192.                     promises.forEach(p => {
    193.                         // 之所以是使用这个静态方法，是因为这个将传入的对象包装成了wePromise
    194.                         wePromise.reslove(p).then((res => {
    195.                             // 处理兑现
    196.                             results[index] = { status: FULFILLED, value: res }
    197.                             count++
    198.                             count === promises.length && reslove(results)
    199.                         }, err => {
    200.                             results[index] = { status: REJECTED, reason: err }
    201.                             count++
    202.                             count === promises.length && reslove(results)
    203.                         }))
    204.                     })
    205.  
    206.                 })
    207.             }
    208.             static any(promises) {
    209.                 return new wePromise((reslove, reject) => {
    210.                     // 判断是否为数组
    211.                     if (!Array.isArray(promises)) {
    212.                         return reject(new TypeError('Argument is not iterable'))
    213.                     }
    214.                     // 空数组直接拒绝
    215.                     promises.length === 0 && reject(new AggregateError(promises, 'All promises were rejected'))
    216.  
    217.                     // 等待结果
    218.                     const errors = []
    219.                     let count = 0
    220.                     promises.forEach((p, index) => {
    221.                         wePromise.reslove(p).then(res => {
    222.                             // 第一个兑现
    223.                             reslove(res)
    224.                         }, err => {
    225.                             // 全部拒绝
    226.                             errors === promises.length && reject(new AggregateError(errors, 'All promises were rejected'))
    227.                         })
    228.                     })
    229.  
    230.  
    231.                 })
    232.             }
    233.  
    234.         }
    235.  
    236.         function reslovePromise(p2, x, reslove, reject) {
    237.             // 处理重复引用
    238.             if (x === p2) {
    239.                 // 抛出错误
    240.                 throw new TypeError('Chaining cycle detected for promise #')
    241.             }
    242.             // 处理返回的Promise
    243.             if (x instanceof wePromise) {
    244.                 // 调用then方法
    245.                 x.then(res => reslove(res), err => reject(err))
    246.             } else {
    247.                 // 处理返回值
    248.                 reslove(x)
    249.             }
    250.         }
    251.         // 创建对象，调用两个方法
    252.         const p = new wePromise((reslove, reject) => {
    253.             // reslove('success')
    254.             // reject('reject')
    255.             throw 'throw-error'
    256.         })
    257.         p.then(res => {
    258.             console.log('成功回调1：', res);
    259.             // throw 'throw-error'
    260.             // return 2
    261.         }).catch(err => {
    262.             console.log('失败回调1：', err);
    263.  
    264.         }).finally(() => {
    265.             console.log('finally');
    266.         })
    267.     script>
    268. body>

    运行效果

            这里运行效果请复制代码自己测，实例方法和静态方法已经是全部实现了的。

    三：总结

            Promise 是异步编程的一种解决方案，其在工作的项目开发中是非常常用的，熟练的掌握Promise 的内容，熟悉底层源码，可以让我们在项目开发中具备更高超的代码书写能力，同时降低自己在使用Promise 出现的各种bug。好啦，Promise 源码系列到此就算是结束啦，希望能够对各位小伙伴有所帮助哦！

  • 相关阅读:
    LLVM系列第二十章：写一个简单的Function Pass
    JavaWeb过滤器Filter（附tomcat部分源码分析）
    猿创征文|Spring系列框架之面向切面编程AOP
    CFA一级学习-CFA一级中文精讲(第三版)-第一章(1)
    Docker 概念构成
    基于蜜蜂算法的函数寻优及TSP搜索算法
    论文浅尝 | Continual Learning for Named Entity Recognition
    SpringCloud Nacos + Ribbon 调用服务的 2 种方法！
    C · 进阶 | 慎看！深剖文件操作，怕你停不下
    do while实现九宫格概率抽奖
  • 原文地址：https://blog.csdn.net/c18559787293/article/details/133970570