手写Promise

最新推荐文章于 2024-11-05 22:07:06 发布
最新推荐文章于 2024-11-05 22:07:06 发布
阅读量74 收藏
点赞数
分类专栏： 前端学习笔记-函数式编程 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59785331/article/details/124789717
版权
手写Promise

  1. Promise为一个类，初始化时将为其传入一个执行器，该执行器会立即执行。执行器接收两个参数：Promise内部resolve和reject方法

  2. Promise有三个状态：Pending、Fulfilled、Rejected，状态只能由Pending->Fulfilled或Pending->Rejected,状态一旦变更就固定了，无法再次改变

  3. Promise使用内部resolve和reject方法更改Promise状态。在调用时除了更改状态外，还会去判断是否缓存了成功或失败的回调函数，若存在则按顺序执行对应的回调函数

  4. then方法

    ​ then方法接收两个参数，成功回调和失败回调。调用then方法时，会去判断当前实例的状态，若状态为Fulfilled则调用成功回调，若状态为失败则调用失败回调，若状态为Pending则将两个回调函数缓存下来，等待resolve或reject时调用

    ​ 同一个实例的then方法可以被多次调用

    ​ then方法可以链式调用，其回调函数的返回值将传递给下一个then方法。若返回值为普通值，则直接调用resolve将值传递给下一个then的成功回调；若返回值为promise则会根据promise执行后的结果，来决定调用resolve传递值还是调用reject抛出失败原因

    ​ 为避免then回调函数循环调用，需判断回调函数的返回值是否为then自身promise，若为then自身promise则抛出类型错误异常
    ​ then方法的参数是可选的，若不传递，默认成功时返回成功结果，失败时抛出失败原因

  5. catch方法

    ​ 内部调用实例then方法返回一个新的promise对象，then方法中成功回调设为undefined，失败回调设为传入的参数

  6. finally方法

    ​ finally方法参数接收一个回调函数，返回一个新的promise，无论Promise成功还是失败都会调用该回调函数
    ​ 因为需要在上一个Promise返回结果后再执行传入的callback，所以需调用实例then方法，在成功和失败的回调中分别调用callback。若callback返回值为promise对象，下一个then方法中的回调函数，将会等待promise执行后再调用。

  7. Promise.resolve 静态方法

    ​ 接收一个参数，若该参数为Promise对象，则直接返回该参数；若为普通值，则返回一个新的Promise对象，并resolve该值

  8. Promise.reject 静态方法

    ​ 接收一个参数，返回一个新的Promise对象，并reject该值

  9. Promise.all 静态方法

    ​ 接收一个参数返回一个新的Promise对象，该参数为一个数组，all方法将会等待数组中全部成员成功的结果返回后，统一返回包含对应结果的结果数组。
    若其中一个成员的返回结果为失败，则立即抛出该失败原因

  10. Promise.race 静态方法

    ​ 接收一个参数返回一个新的Promise对象，该参数为一个数组，race方法将会等待数组成员中最先返回的结果，将其结果作为自己Promise的值。

const PENDING = 'Pending'
const FULFILLED = 'Fulfilled'
const REJECTED = 'Rejected'

class MyPromise {
    // 构造函数，接收一个执行器
    constructor(executor) {
        try {
            executor(this.resolve, this.reject)
        } catch (e) {
            this.reject(e)
        }
    }
    // 状态值
    status = PENDING
    // 成功的结果
    value = undefined
    // 失败的原因
    reason = undefined
    // 成功回调
    successCallback = []
    // 失败回调
    failCallback = []

    // resolve和reject方法是在执行器内直接调用的，普通函数直接调用，this指向window或undefined，为保证内部this指向MyPromise实例对象，需使用箭头函数。若使用普通函数，需在构造器函数中给executor传参时绑定this（executor(this.resolve.bind(this),this.reject.bind(this))）
    resolve = (value) => {
        // 状态只能由pending->fulfilled或pending->rejected,且一旦变更状态就凝固了，重复调用resolve/reject也无法再次修改
        if (this.status === PENDING) {
            // 状态改为成功
            this.status = FULFILLED
            // 保存成功结果
            this.value = value
            // 判断是否存在成功回调函数
            while (this.successCallback.length) this.successCallback.shift()()
        }
    }

    // resolve和reject方法是在执行器内直接调用的，普通函数直接调用，this指向window或undefined，为保证内部this指向MyPromise实例对象，需使用箭头函数。若使用普通函数，需在构造器函数中给executor传参时绑定this（executor(this.resolve.bind(this),this.reject.bind(this))）
    reject = (reason) => {
        // 状态只能由pending->fulfilled或pending->rejected,且一旦变更状态就凝固了，重复调用resolve/reject也无法再次修改
        if (this.status === PENDING) {
            // 状态改为失败
            this.status = REJECTED
            // 保存成功结果
            this.reason = reason
            // 判断是否存在失败回调函数
            while (this.failCallback.length) this.failCallback.shift()()
        }
    }

    //then方法为实例调用无this指向问题（p1.then()),且所有实例都能调用该方法，应将其定义在原型对象上
    then(successCallback, failCallback) {
        // then方法参数为可选值
        successCallback = successCallback ? successCallback : value => value;
        failCallback = failCallback ? failCallback : reason => {
            throw reason
        };
        let thenPromise = new MyPromise((resolve, reject) => {
            // 判断状态
            if (this.status === FULFILLED) {
                try {
                    // 通过异步，让同步代码先执行，以获取thenPromise
                    setTimeout(() => {
                        // 成功
                        let result = successCallback(this.value)
                        // 判断回调函数结果是否为Promise对象，是否为thenPromise本身
                        resolvePromise(thenPromise, result, resolve, reject)
                    }, 0)
                } catch (e) {
                    reject(e)
                }
            } else if (this.status === REJECTED) {
                try {
                    setTimeout(() => {
                        // 失败
                        let reason = failCallback(this.reason)
                        // 判断回调函数结果是否为Promise对象，是否为thenPromise本身
                        resolvePromise(thenPromise, reason, resolve, reject)
                    }, 0)
                } catch (e) {
                    reject(e)
                }
            } else {
                // 等待
                // 保存成功或失败回调函数，等待resolve或reject调用时执行
                this.successCallback.push(() => {
                    try {
                        setTimeout(() => {
                            // 成功
                            let result = successCallback(this.value)
                            // 判断回调函数结果是否为Promise对象，是否为thenPromise本身
                            resolvePromise(thenPromise, result, resolve, reject)
                        }, 0)
                    } catch (e) {
                        reject(e)
                    }
                })
                this.failCallback.push(() => {
                    try {
                        setTimeout(() => {
                            // 失败
                            let reason = failCallback(this.reason)
                            // 判断回调函数结果是否为Promise对象，是否为thenPromise本身
                            resolvePromise(thenPromise, reason, resolve, reject)
                        }, 0)
                    } catch (e) {
                        reject(e)
                    }
                })
            }
        })
        return thenPromise;
    }

    // catch方法 接收一个失败回调函数
    catch (failCallback) {
        return this.then(undefined, failCallback)
    }

    // finally方法 返回一个promise，无论成功失败都会调用callback，且finally后续then中的回调会等待callback执行完毕再执行。
    finally(callback) {
        return this.then(value => {
            // 此处需注意，将then的成功回调返回上面的value值，而不是返回自身的返回值，所以需定义成功回调() => value。失败回调未定义，then内部会自动赋值reason=>{throw reason}抛出自身异常。
            MyPromise.resolve(callback()).then(() => value)
        }, reason => {
            // 此处需注意，将then的成功回调抛出上面的reason异常，而不是返回自身的返回值，所以需定义成功回调() => {throw reason}。失败回调未定义，then内部会自动赋值reason=>{throw reason}抛出自身异常。
            MyPromise.resolve(callback()).then(() => {
                throw reason
            })
        })
    }

    // MyPromise.resolve
    static resolve(value) {
        // 判断是否为promise对象
        // 参数为Promise对象，直接返回
        if (value instanceof MyPromise) return value;
        // 参数非Promise对象，返回new MyPromise
        return new MyPromise(resolve => resolve(value))
    }

    // MyPromise.reject
    static reject(reason) {
        return new MyPromise((resolve, reject) => reject(reason))
    }

    // MyPromise.all    按照异步API调用顺序得到异步API的执行结果，得到所有成员成功结果后一并返回，若失败则立即返回该成员的失败原因
    static all(array) {
        let result = []
        let index = 0
        return new MyPromise((resolve, reject) => {
            // 声明添加方法
            function addData(key, value) {
                result[key] = value
                index++
                // 此处不能写result.length === array.length，因为result[n]=value时，result的长度已经是n了
                if (index === array.length)
                    resolve(result)
            }
            // 遍历参数数组
            for (let i = 0; i < array.length; i++) {
                const item = array[i];
                // 判断是否为promise对象
                if (item instanceof MyPromise) {
                    // promise对象 在回调函数中向result添加返回结果
                    item.then(value => addData(i, value), reason => reject(reason))
                } else {
                    // 普通值
                    addData(i, item)
                }
            }
        })
    }

    // MyPromise.race 等待数组成员中最先返回的结果，将其结果作为自己返回的Promise的值
    static race(array) {
        return new MyPromise((resolve, reject) => {
            for (let i = 0; i < array.length; i++) {
                const item = array[i];
                if (item instanceof MyPromise) {
                    item.then(resolve, reject)
                } else {
                    resolve(item)
                }
            }
        })
    }
}

// 判断successRes是普通值还是promise对象
// 如果是普通值，直接调用resolve返回结果。
// 如果是promise对象，需判断其状态。如果是Fulfilled，调用resolve；如果是Rejected，调用reject。
// 判断回调函数返回结果是否为thenPromise本身，避免循环调用
function resolvePromise(thenPromise, result, resolve, reject) {
    // 判断是否返回自身
    if (result === thenPromise) {
        return reject(new TypeError('[TypeError: Chaining cycle detected for promise #<Promise>]'))
    }
    if (result instanceof MyPromise) {
        // promise对象
        result.then(resolve, reject)
    } else {
        // 普通值
        resolve(result)
    }
}

module.exports = MyPromise
Aviator_huahua
关注
专栏目录
JS手写callback封装成promise的实现方式
冻书的博客
12-15 914
本篇文章以封装fs异常回调为测试对象，参考链接：https://www.cnblogs.com/hsprout/p/5588859.html const fs = require('fs') const promisify = function (fn, receiver) { return function () { let _len = arguments.length, args = Array(_len), _key = 0.
js代码-手写promise.all
07-16
// 这里将实现手写Promise.all的逻辑 }); } ``` 接下来，我们需要跟踪Promise的状态。我们可以创建一个计数器来记录已解析的Promise数量，以及一个存储结果的数组： ```javascript let resolvedCount = 0; let ...
深入学习JS — 回调函数（callBack）的理解（手写Array.sort()）
小绵杨
03-08 898
目录1、回调函数（callback）2、Array.sort()3、手写Array.sort() 1、回调函数（callback） MDN 的描述 回调函数是作为参数传给另一个函数的函数，然后通过在外部函数内部调用该回调函数以完成某种操作。 个人理解 回调函数就是一个函数使用了另一个函数作为参数，然后在内部使用该函数，从而可以增强函数的功能，也就是根据传入门的函数，一个函数可以实现许多功能。例如接下来的Array.sort()，可以根据传入的函数参数，实现正序或者逆序排序。 2、Array.sort
各种手写源码实现
qq_36696468的博客
11-07 425
阅读源码的好处，不用说都知道，首先进大厂必备，还可以提升自己的能力，学习前人的经验。源码往往是前人留下的最佳实践，我们跟着前人的脚步去学习会让我们事半功倍。call、ap...
今天教你手写 Promise （一）
小北哥哥和北妈
03-22 263
大家好，我是梦起今天我们来聊聊常见的前端手写功能之Promise首先我们来聊聊要实现的功能：1、Promise就是一个类，在执行类的时候，需要传递一个执行器(函数)进去，执行器会立刻执行2、Promise有三种状态，分别为 等待pending成功fulfilled失败rejectedpending=>fulfilled||pending=>...
【JavaScript】手写Promise
编码世界
05-15 4769
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
手写promise
lhl123400的博客
08-30 97
class Promises{ constructor(fn){ this.state="pending"; fn(this.resolve.bind(this),this.reject.bind(this)) } resolve(value){ if(this.stat...
Promise_js手写promise_js手写Promise_手写Promise_JS手写Promise_
09-30
在本文中，我们将深入探讨如何使用原生JavaScript手写Promise。 首先，我们需要理解Promise的基本概念。Promise有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。每个Promise实例在其生命...
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 439
关于react hooks的一些知识与应用
JavaScript 生成二维码
qq_30049249的博客
11-02 239
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 491
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 173
vxe-grid新增空行，并且定位到空行位置。
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
最新发布
cx18333的博客
11-05 481
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
Vue2+3
m0_73557953的博客
11-04 116
创建Vue实例 Vue指令
JavaScript-数组
weixin_64689713的博客
11-04 857
/ 定义一个长度为 4 的数组，但是这 4 项都是 undefined两种定义方法根据实际需求选择即可，两者的底层都是同样的实现逻辑。推荐：方括号定义法！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值