实现简单的Promise

最新推荐文章于 2023-04-20 08:09:36 发布
最新推荐文章于 2023-04-20 08:09:36 发布
阅读量149 收藏
点赞数 2
文章标签： javascript 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43536982/article/details/129161733
版权

什么是Promise

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。

Promise出现之前都是通过回调函数来实现，回调函数本身没有问题，但是嵌套层级过深，很容易掉进回调地狱。

const fs = require('fs');
fs.readFile('1.txt', (err,data) => {
    fs.readFile('2.txt', (err,data) => {
        fs.readFile('3.txt', (err,data) => {
            //可能还有后续代码
        });
    });
});

如果每次读取文件后还要进行逻辑的判断或者异常的处理，那么整个回调函数就会非常复杂且难以维护。Promise的出现正是为了解决这个痛点，我们可以把上面的回调嵌套用Promise改写一下：

const readFile = function(fileName){
    return new Promise((resolve, reject)=>{
        fs.readFile(fileName, (err, data)=>{
            if(err){
                reject(err)
            } else {
                resolve(data)
            }
        })
    })
}

readFile('1.txt')
    .then(data => {
        return readFile('2.txt');
    }).then(data => {
        return readFile('3.txt');
    }).then(data => {
        //...
    });

Promise规范

promise最早是在commonjs社区提出来的，当时提出了很多规范。比较接受的是promise/A规范。但是promise/A规范比较简单，后来人们在这个基础上，提出了promise/A+规范，也就是实际上的业内推行的规范；es6也是采用的这种规范，但是es6在此规范上还加入了Promise.all、Promise.race、Promise.catch、Promise.resolve、Promise.reject等方法。

首先看出来，Promise是通过构造函数实例化一个对象，然后通过实例对象上的then方法，来处理异步返回的结果。同时，promise/A+规范规定了：

promise 是一个拥有 then 方法的对象或函数，其行为符合本规范；
一个 Promise 的当前状态必须为以下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。 
// 定义一个表示promise的状态
    status_m = {
        PENDING: "PENDING",
        FULFILLED: "FULFILLED",
        REJECTED: "REJECTED",
    };
    // 设置默认的状态为PENDING
    #status = this.status_m.PENDING;
    // 存储promise成功的值
    #value;
    // 存储promise失败的值
    #reason;
    // 定义一个存储回调函数的函数池
    #callbacks = [];

不可变

promise/A+规范中规定，当Promise对象已经由等待态（Pending）改变为执行态（Fulfilled）或者拒绝态（Rejected）后，就不能再次更改状态，且终值也不可改变。

// 定义一个执行成功的方法
    #resolve(value) {
        // 判断当前promise的状态只要不是PENDING就直接返回不能修改
        if (this.#status !== this.status_m.PENDING) return;
        // 改变状态为成功
        this.#status = this.status_m.FULFILLED;
        // 将成功的值拿到
        this.#value = value;
        // 执行存储在函数池中的成功的resolve函数
        queueMicrotask(() => {
            this.#callbacks.forEach((c) => {
                c.resolve();
            });
        });
    }
    //定义promise失败的执行方法
    #reject(reason) {
        if (this.#status !== this.status_m.PENDING) return;
        this.#status = this.status_m.REJECTED;
        this.#reason = reason;
        queueMicrotask(() => {
            this.#callbacks.forEach((c) => {
                c.reject();
            });
        });
    }

支持异步

那么如何让我们的Promise来支持异步呢？我们可以参考发布订阅模式，在执行then方法的时候，如果当前还是PENDING状态，就把回调函数寄存到一个数组中，当状态发生改变时，去数组中取出回调函数；因此我们先在Promise中定义一下变量：

// 定义一个存储回调函数的函数池
    #callbacks = [];
// 当状态为PENDING时表示还没有进入修改需要将回调存放在函数池中
            if (this.#status === this.status_m.PENDING) {
                this.#callbacks.push({
                    resolve() {
                        try {
                            resolve(onFulfilled(that.#value));
                        } catch (e) {
                            reject(e);
                        }
                    },
                    reject() {
                        try {
                            reject(onRejected(that.#reason));
                        } catch (e) {
                            console.log(e);

                            reject(e);
                        }
                    },
                });
            }

then实现

当Promise的状态改变之后，不管成功还是失败，都会触发then回调函数。因此，then的实现也很简单，就是根据状态的不同，来调用不同处理终值的函数。

//   这里的then方法是需要暴露给外界使用，就不是私有的
    then(onFulfilled, onRejected) {
        onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (cd) => cd;
        onRejected =
            typeof onRejected === "function"
                ? onRejected
                : (reason) => {
                    throw new Error(reason);
                };

        // 保存一下this
        const that = this;
        return new MyPromise((resolve, reject) => {
            // 当状态为PENDING时表示还没有进入修改需要将回调存放在函数池中
            if (this.#status === this.status_m.PENDING) {
                this.#callbacks.push({
                    resolve() {
                        try {
                            resolve(onFulfilled(that.#value));
                        } catch (e) {
                            reject(e);
                        }
                    },
                    reject() {
                        try {
                            reject(onRejected(that.#reason));
                        } catch (e) {
                            console.log(e);

                            reject(e);
                        }
                    },
                });
            } else if (this.#status === this.status_m.FULFILLED) {
                try {
                    queueMicrotask(() => {
                        resolve(onFulfilled(this.#value));
                    });
                } catch (e) {
                    reject(e);
                }
            } else if (this.#status === this.status_m.REJECTED) {
                try {
                    queueMicrotask(() => {
                        reject(onRejected(this.#reason));
                    });
                } catch (e) {
                    reject(e);
                }
            }
        });
    }

完整代码

/*
自定义一个MyPromise来实现promise一些功能

*/

class MyPromise {
    // 定义一个表示promise的状态
    status_m = {
        PENDING: "PENDING",
        FULFILLED: "FULFILLED",
        REJECTED: "REJECTED",
    };
    // 设置默认的状态为PENDING
    #status = this.status_m.PENDING;
    // 存储promise成功的值
    #value;
    // 存储promise失败的值
    #reason;
    // 定义一个存储回调函数的函数池
    #callbacks = [];
    // 定义一个执行器
    constructor(executor) {
        try {
            // 这里使用bind()绑定this是应为执行器是一个函数，这里的this指向是调用执行器的实例所以得绑定this
            executor(this.#resolve.bind(this), this.#reject.bind(this));
        } catch (e) {
            console.log(e);
            this.#reject(e);
        }
    }
    // 定义一个执行成功的方法
    #resolve(value) {
        // 判断当前promise的状态只要不是PENDING就直接返回不能修改
        if (this.#status !== this.status_m.PENDING) return;
        // 改变状态为成功
        this.#status = this.status_m.FULFILLED;
        // 将成功的值拿到
        this.#value = value;
        // 执行存储在函数池中的成功的resolve函数
        queueMicrotask(() => {
            this.#callbacks.forEach((c) => {
                c.resolve();
            });
        });
    }
    //定义promise失败的执行方法
    #reject(reason) {
        if (this.#status !== this.status_m.PENDING) return;
        this.#status = this.status_m.REJECTED;
        this.#reason = reason;
        queueMicrotask(() => {
            this.#callbacks.forEach((c) => {
                c.reject();
            });
        });
    }
    //   这里的then方法是需要暴露给外界使用，就不是私有的
    then(onFulfilled, onRejected) {
        onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (cd) => cd;
        onRejected =
            typeof onRejected === "function"
                ? onRejected
                : (reason) => {
                    throw new Error(reason);
                };

        // 保存一下this
        const that = this;
        return new MyPromise((resolve, reject) => {
            // 当状态为PENDING时表示还没有进入修改需要将回调存放在函数池中
            if (this.#status === this.status_m.PENDING) {
                this.#callbacks.push({
                    resolve() {
                        try {
                            resolve(onFulfilled(that.#value));
                        } catch (e) {
                            reject(e);
                        }
                    },
                    reject() {
                        try {
                            reject(onRejected(that.#reason));
                        } catch (e) {
                            console.log(e);

                            reject(e);
                        }
                    },
                });
            } else if (this.#status === this.status_m.FULFILLED) {
                try {
                    queueMicrotask(() => {
                        resolve(onFulfilled(this.#value));
                    });
                } catch (e) {
                    reject(e);
                }
            } else if (this.#status === this.status_m.REJECTED) {
                try {
                    queueMicrotask(() => {
                        reject(onRejected(this.#reason));
                    });
                } catch (e) {
                    reject(e);
                }
            }
        });
    }
}

export default MyPromise;

攒一口袋糖~
关注
promise简单实现
qq_39692513的博客
06-16 1141
promise简单实现
简单实现一个promise
qq_40115279的博客
11-11 2109
我们先分析一下promise 都有哪些功能： 1、promise 是一个类，所以 我们可以使用class关键字声明 2、promise 有三种状态 pending （等待执行） fulfilled （执行成功） rejected （执行失败） - 状态只能有两种转换方式： · pending --> fulfilled · pending --> rejected - 只要状态发生了改变，这一次promise就算执行完成了。 - 不管结果是成功还是失败，都不会再变成另一种。 3.
[手写系列] 带你实现一个简单的Promise
www_xuhss_com的博客
03-08 628
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 简介 学习之前 需要先对Promise有个基本了解哦,这里都默认大家都是比较熟悉Promise的 本次将带小伙伴们实现Promise的基本功能 Promise的基本骨架 Promise的then Promise.then的多次调用 then链式调用 catch的实现 fi
实现一个简单的Promise
学习笔记
07-30 112
先看一下promise的使用 const pe = new MyPromise((resolve, reject) => { const acount = 10; if (acount > 5) { resolve("我大于5"); } else { reject("我小于5"); } }); pe.then(data => { console.log("使用then", data); }); 先定义类MyPromise，构造函数入参是一个回调函.
nodejs中简单实现Javascript Promise机制的实例
10-25
本文将详细介绍如何在Node.js中通过代码示例简单实现Promise/A+规范。 首先，我们需要理解Promise/A+规范的核心内容。Promise/A+规范是一份为JavaScript中的Promise定义实现的行为规范，该规范由一系列具体的要求和...
Promise的简单实现
08-11
在提供的标题"Promise的简单实现"中，我们可以理解为我们将讨论如何从零开始创建一个基础版本的Promise。这个实现可能不包含完整的API，但会涵盖Promise的核心概念和基本工作原理。 描述提到这是一个不含任何第三方...
js代码-Promise 的简单实现
07-16
本主题将深入探讨如何实现一个简单的Promise。 首先，Promise有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。当Promise创建时，其初始状态为pending。一旦状态由pending变为fulfilled或...
实现一个简易Promise
weixin_45953930的博客
03-30 141
Promise是什么 promise是一个对象，表示一个异步操作的整体完成和返回的值 //怎么实现 promise 接受回调，并且调用，自身带有三种状态，pendding, onFulfilled, onRejected,并且 resolve 这个函数可以让 pendding 状态变成 onFulfilled 状态，同理 reject 函数可以让 pendding 状态变成 onRejected 状态 const PENDING = pending const RESOLVE = resolve const
简单promise的实现
Goodbye_的博客
01-21 305
在实现promise之前，先简单的回顾一下promise Promise 对象有以下两个特点: 1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态： pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。 2、一旦状态改变，就不.
实现一个自己的promise
大～熊
03-29 3326
本文将探讨Promise的实现。 一、ES6中的Promise1、简介据说js很早就实现了Promise，我是不知道的，我第一次接触Promise就是在ES6中。Promise就是规定在未来达到某个状态时应该采取某种行动，而这种未来的状态是不确定的。阮一峰说Promise对象用来传递异步消息，代表了某个未来才会知道结果的事件，并为这个事件提供统一的API，供进一步处理。
promise 我自己实现个简单的
天天的博客
09-26 161
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h2&gt.
如何实现一个简单的promise
jianjieX的博客
07-07 273
一个简单的 Promise 的粗糙实现，关键点在于 当 pending 时， thenable 函数由一个队列维护 当状态变为 resolved(fulfilled) 时，队列中所有 thenable 函数执行 当 resolved 时， thenable 函数直接执行 rejected 状态同理 class Prom { static resolve (value) { if (value && value.then) { return value }
如何实现简单的promise？
weixin_38208314的博客
06-03 1099
1.实现简单的promise功能 let p1 = new Promise1((res,rej)=>{ //实现异步任务 setTimeout(()=>{ res('成功了'); },3000) // rej('失败了'); }); p1.then((res)=>{ console.log('第一次输出：',res)...
Promise通俗易懂的实现方式
最新发布
frontend_frank的博客
04-20 411
点击上方“蓝字”带你每天阅读全栈前端精选好文前言Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。本篇不注重讲解promise的用法，关于用法，可以看阮一峰老师的ECMAScript 6系列里面的Promise部分：ECMAScript 6 : Promise对象本篇主...
怎么自己实现一个promise
weixin_42583683的博客
02-12 101
在 JavaScript 中，可以通过实现一个类来实现 Promise 的功能。 下面是一个简单的实现示例： ``` class MyPromise { constructor(executor) { this.status = "pending"; this.value = undefined; this.reason = undefined; this.on...
自己实现一个Promise
qq_36297981的博客
07-10 602
序言 Promise是ES6提出的异步编程规范。接下来我们一步一步来探究下Promise的实现原理，根据Promise A+规范实现一个我们自己的Promise。 Promise的初步实现 Promise的简单使用 new Promise((resolve, reject) => { resolve('a') }).then(value => { console.log(val...
手写Promise的基本实现 （超详细）
qq_48554377的博客
09-22 7875
手写Promise的基本实现 （超详细） 面试必备！ 本文带大家实现一个基本的 promise 过多的边界情况就不在考虐,理解主要实现过程以及逻辑即可 对于一个个出现的问题我会逐步分析原因以及对应的解决思路
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值