Promise简洁版实现流程

已于 2023-02-17 11:33:16 修改
阅读量106 收藏
点赞数
分类专栏： javascript 文章标签： 前端 javascript 开发语言 es6 Powered by 金山文档
于 2023-02-15 17:35:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62434937/article/details/129038365
版权

目标：实现1.Promise的异步机制，2.then的链式调用

1.resolve和reject调用(同步)

// 等待中
const PENDING = 'pending';
// 成功
const RESOLVE = 'resolve';
// 失败
const REJECT = 'reject';
class MyPromise {
    constructor(execute) {
        execute(this.resolve, this.reject);
    }

    // 当前状态
    status = PENDING;
    // 成功的数据
    value = null;
    // 失败数据
    fail = null;

    resolve = value => {
        if (this.status === PENDING) {
            this.value = value;
            this.status = RESOLVE;
        }
    };

    reject = value => {
        if (this.status === PENDING) {
            this.fail = value;
            this.status = REJECT;
        }
    };

    then(onFuResolv, onFuReject) {
        // 容错处理，使then里面的参数可以选
        onFuResolv = typeof onFuResolv === 'function' ? onFuResolv : value => value;
        onFuReject = typeof onFuReject === 'function' ? onFuReject : value => new Error(this.fail);

        if (this.status === RESOLVE) {
            onFuResolv(this.value);
        } else if (this.status === REJECT) {
            onFuReject(this.fail);
        }
    }
}

module.exports = MyPromise;

// 测试
const p1 = new MyPromise((resolve, reject) => {
                resolve('成功');
                reject('失败');
            });

            p1.then(
                res => {
                    console.log('res', res);
                },
                e => {
                    console.log('e', e);
                }
            );
// res 成功

上面只支持同步调用，如果new MyPromise 里面有异步任务就不会有返回值：如

const p1 = new MyPromise((resolve, reject) => {
                setTimeout(() => {
                    resolve('成功');
                }, 0);
            });
p1.then(res => {
  console.log('res', res); // 不会有返回结构  
  })

2.实现在 new MyPromise时如果异步调用 resolve 或 reject在then里面能拿到结果

因为在 then 里面 判断 status 是 PENDING 状态时，将未执行的方法添加到了数组里面，在 resolve 或 reject 执行时会循环调用 成功 或 失败 的回调函数，这就实现了另一个功能，多次 new MyPromise，不会产生冲突

class MyPromise {
    constructor(execute) {
        execute(this.resolve, this.reject);
    }

    // 当前状态
    status = PENDING;
    // 成功的数据
    value = null;
    // 失败数据
    fail = null;

    // 新增
    // 成功回调的集合
    onFuResolvCallback = [];
    // 失败回调的集合
    onFuRejectCallback = [];

    resolve = value => {
        if (this.status === PENDING) {
            this.value = value;
            this.status = RESOLVE;
            
            // 新增
            // 当 resolve 异步执行时 onFuResolvCallback有未执行的回调时
            while (this.onFuResolvCallback.length) {
                this.onFuResolvCallback.shift()(this.value);
            }
        }
    };

    reject = value => {
        if (this.status === PENDING) {
            this.fail = value;
            this.status = REJECT;

            // 新增
            // 当 reject 异步执行时 onFuResolvCallback有未执行的回调时
            while (this.onFuRejectCallback.length) {
                this.onFuRejectCallback.shift()(this.fail);
            }
        }
    };

    then(onFuResolv, onFuReject) {
        // 容错处理，使then里面的参数可以选
        onFuResolv = typeof onFuResolv === 'function' ? onFuResolv : value => value;
        onFuReject = typeof onFuReject === 'function' ? onFuReject : value => new Error(this.fail);

        if (this.status === RESOLVE) {
            onFuResolv(this.value);
        } else if (this.status === REJECT) {
            onFuReject(this.fail);
            // 新增
        } else if (this.status === PENDING) {
            this.onFuResolvCallback.push(onFuResolv);
            this.onFuRejectCallback.push(onFuReject);
        }
    }
}

// 测试
            const p1 = new MyPromise((resolve, reject) => {
                setTimeout(() => {
                    resolve('成功');
                    // reject('失败');
                }, 50);
            });

            const p2 = new MyPromise((resolve, reject) => {
                setTimeout(() => {
                    // resolve('成功');
                    reject('失败');
                }, 1000);
            });

            p2.then(res => {
                console.log('res', res);
            });

            p1.then(
                res => {},
                e => {
                    console.log('e', e);
                }
            );
// e 失败
// res 成功

3.使其支持链式调用及嵌套Promise

  1. 通过在then里面返回一个 MyPromise2 使其支持链式调用

  1. 在 RESOLVE，PENDING，PENDING三个状态里面添加对应的微任务，使其支持在then里面可以嵌套异步任务

  1. 通过 thenRetHandle 方法处理then返回的数据(重要)

    then(onFuResolv, onFuReject) {
        // 容错处理，使then里面的参数可以选
        onFuResolv = typeof onFuResolv === 'function' ? onFuResolv : value => value;
        onFuReject = typeof onFuReject === 'function' ? onFuReject : value => new Error(this.fail);

        // 返回一个新的 MyPromise 使其可以链式调用 then
        const MyPromise2 = new MyPromise((resolve, reject) => {
            // 成功的微任务
            const resolveMicrotask = () => {
                queueMicrotask(() => {
                    const x = onFuResolv(this.value);
                    thenRetHandle(MyPromise2, x, resolve, reject);
                });
            };

            // 失败的微任务
            const rejectMicrotask = () => {
                const x = onFuReject(this.fail);
                thenRetHandle(MyPromise2, x, resolve, reject);
            };

            if (this.status === RESOLVE) {
                resolveMicrotask();
            } else if (this.status === REJECT) {
                rejectMicrotask();
            } else if (this.status === PENDING) {
                queueMicrotask(() => {
                    this.onFuResolvCallback.push(resolveMicrotask);
                    this.onFuRejectCallback.push(rejectMicrotask);
                });
            }
        });

        return MyPromise2;
    }

// 每次 then 时返回值的处理(重要函数，用来处理then返回的数据)
function thenRetHandle(MyPromise2, x, resolve, reject) {
    // 防止重复调用
    if (x === MyPromise2) {
        return reject(new TypeError('重复调用'));
    }

    if ((typeof x === 'object' && typeof x !== null) || typeof x === 'function') {
        let then = x.then;
        if (typeof then === 'function') {
            then.call(
                x,
                y => {
                    // 递归调用，y 可能又是 promise
                    thenRetHandle(MyPromise2, y, resolve, reject);
                },
                r => {
                    reject(r);
                }
            );
        } else {
            resolve(x);
        }
    } else {
        // 不是对象或不是函数时直接返回
        resolve(x);
    }
}

// 测试结果
            const p1 = new MyPromise((resolve, reject) => {
                resolve('成功');
            });

            let p2 = p1.then(res => {
                return new MyPromise((resolve, reject) => {
                    setTimeout(() => {
                        resolve(
                            new Promise((resolve, reject) => {
                                setTimeout(() => {
                                    resolve('哈哈哈哈');
                                }, 0);
                            })
                        );
                    }, 0);
                });
            });

            let p3 = p2
                .then(res => {
                    console.log('0', res);
                    return res;
                })
                .then(res => {
                    return new Promise(resolve => {
                        setTimeout(() => {
                            console.log('1', res);
                            resolve(res);
                        }, 500);
                    });
                });

            p3.then(res => {
                console.log('p3', res);
            });
// 0 哈哈哈哈
// 1 哈哈哈哈
// p1 哈哈哈哈

4.添加错误处理及完整代码

// 等待中
const PENDING = 'pending';
// 成功
const RESOLVE = 'resolve';
// 失败
const REJECT = 'reject';

class MyPromise {
    constructor(execute) {
        try {
            execute(this.resolve, this.reject);
        } catch (e) {
            reject(e);
        }
    }

    // 当前状态
    status = PENDING;
    // 成功的数据
    value = null;
    // 失败数据
    fail = null;

    // 成功回调的集合
    onFuResolvCallback = [];
    // 失败回调的集合
    onFuRejectCallback = [];

    resolve = value => {
        if (this.status === PENDING) {
            this.value = value;
            this.status = RESOLVE;

            // 当 resolve 异步执行时 onFuResolvCallback有未执行的回调时
            while (this.onFuResolvCallback.length) {
                this.onFuResolvCallback.shift()(this.value);
            }
        }
    };

    reject = value => {
        if (this.status === PENDING) {
            this.fail = value;
            this.status = REJECT;

            // 当 reject 异步执行时 onFuResolvCallback有未执行的回调时
            while (this.onFuRejectCallback.length) {
                this.onFuRejectCallback.shift()(this.fail);
            }
        }
    };

    then(onFuResolv, onFuReject) {
        // 容错处理，使then里面的参数可以选
        onFuResolv = typeof onFuResolv === 'function' ? onFuResolv : value => value;
        onFuReject = typeof onFuReject === 'function' ? onFuReject : value => new Error(this.fail);

        // 返回一个新的 MyPromise 使其可以链式调用 then
        const MyPromise2 = new MyPromise((resolve, reject) => {
            // 成功的微任务
            const resolveMicrotask = () => {
                queueMicrotask(() => {
                    try {
                        const x = onFuResolv(this.value);
                        thenRetHandle(MyPromise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                });
            };

            // 失败的微任务
            const rejectMicrotask = () => {
                try {
                    const x = onFuReject(this.fail);
                    thenRetHandle(MyPromise2, x, resolve, reject);
                } catch (e) {
                    reject(e);
                }
            };

            if (this.status === RESOLVE) {
                resolveMicrotask();
            } else if (this.status === REJECT) {
                rejectMicrotask();
            } else if (this.status === PENDING) {
                queueMicrotask(() => {
                    this.onFuResolvCallback.push(resolveMicrotask);
                    this.onFuRejectCallback.push(rejectMicrotask);
                });
            }
        });

        return MyPromise2;
    }
}

// 每次 then 时返回值的处理
function thenRetHandle(MyPromise2, x, resolve, reject) {
    // 防止重复调用
    if (x === MyPromise2) {
        return reject(new TypeError('重复调用'));
    }

    if ((typeof x === 'object' && typeof x !== null) || typeof x === 'function') {
        let then;
        try {
            then = x.then;
        } catch (e) {
            reject(e);
        }
        if (typeof then === 'function') {
            try {
                then.call(
                    x,
                    y => {
                        // 递归调用，y 可能又是 promise
                        thenRetHandle(MyPromise2, y, resolve, reject);
                    },
                    r => {
                        reject(r);
                    }
                );
            } catch (e) {
                reject(e);
            }
        } else {
            resolve(x);
        }
    } else {
        // 不是对象或不是函数时直接返回
        resolve(x);
    }
}

5.新增静态 all 方法

class MyPromise {
    constructor(execute) {
        try {
            execute(this.resolve, this.reject);
        } catch (e) {
            reject(e);
        }
    }

    // 当前状态
    status = PENDING;
    // 成功的数据
    value = null;
    // 失败数据
    fail = null;

    // 成功回调的集合
    onFuResolvCallback = [];
    // 失败回调的集合
    onFuRejectCallback = [];

    resolve = value => {
        .........
    };

    reject = value => {
         .........
    };

    then(onFuResolv, onFuReject) {
         .........
    }

    // 新增
    static all(array) {
        // 返回的数据
        let returns = [];
        // 记数器 （用作记录是否所有任务都执行完成(异步)）
        let index = 0;

        return new MyPromise((resolve, reject) => {
            // 错误处理
            if (!Array.isArray(array)) return reject(new TypeError('类型错误，请传入数组'));
            else if (array.length === 0) return resolve(array);

            // 添加返回值
            const addRet = (key, value) => {
                returns[key] = value;
                index++;
                if (index === array.length) resolve(returns);
            };

            for (let i = 0; i < array.length; i++) {
                try {
                    let current = array[i];
                    if (current instanceof MyPromise) {
                        current.then(
                            value => {
                                addRet(i, value);
                            },
                            e => {
                                reject(e);
                            }
                        );
                    } else {
                        addRet(i, current);
                    }
                } catch (e) {
                    reject(e);
                }
            }
        });
    }
}

// 测试
            let a1 = () => {
                return new MyPromise((resolve, reject) => {
                    setTimeout(() => {
                        // resolve('a3');
                        resolve(new Error('错误'));
                    }, 2000);
                });
            };

            let a2 = () => {
                return new MyPromise((resolve, reject) => {
                    resolve('a4');
                });
            };

MyPromise.all(['a1', 'a2', a1(), a2(), 'a5']).then(
                res => {
                    console.log('res', res);
                },
                e => console.log('/', e)
            );

// ["a1", "a2", Error: 错误 at eval...., "a4","a5"]

all的使用小技巧

// 注意：这里只能使用可迭代的map之类的方法，不确定是否描述的正常，但是forEach肯定会报错，map不会报错
 
Promise.all(arr.map(item => {
    // 在这里发送请求
    // 如果其中一项失败了，你并不想让其中断，可以通过 catch 捕获或者把错误的值赋值默认值之类的操作
    item.catch(e => '')
})).then(res => {
    //  res 是最后返回的结果，是一个数组
})

学习永无止境、、、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
es5如何实现promise_完美起航
weixin_35806027的博客
02-01 565
61.new的原理是什么？通过new的方式创建对象和通过字面量创建有什么区别？new:创建一个新对象。这个新对象会被执行[[原型]]连接。将构造函数的作用域赋值给新对象，即this指向这个新对象.如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。function new(func) {lat target = {};target.__proto__ = func.prot...
Promise 实现原理
zhangzhenshuai的博客
09-14 282
基础版本实现原理 首先 new Promise 时，传给 Promise 的函数设置定时器模拟异步的场景，接着调用 Promise 对象的 then 方法注册异步操作完成后的 onFulfilled，最后当异步操作完成时，调用 resolve(value)， 执行 then 方法注册的 onFulfilled。
Promise 最完整介绍与实现解密
oscar999的专栏
03-24 622
在 JavaScript Promise 快速入门 这一篇对Promise 及其基本用法做了简单的介绍。本篇介绍Promise 的完整功能以及对Promise 的来源以及实现进行解密。 Promise 是什么？ 该怎么解释Promise 呢？ 试着从以下几种角度来理解： 从代码的角度：　Promise 是ECMAScript 6中提供了一个类 ，Promise 对象可以让异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数的方式。 从Promise工作机制的角度：Promise 表示一个异步操作
图解 Promise 实现原理（一）—— 基础实现
ass_ace
11-07 289
摘要 很多同学在学习 Promise 时，知其然却不知其所以然，对其中的用法理解不了。本系列文章由浅入深逐步实现 Promise，并结合流程图、实例以及动画进行演示，达到深刻理解 Promise 用法的目的。 图解 Promise 实现原理（一）—— 基础实现 图解 Promise 实现原理（二）—— Promise 链式调用 图解 Promise 实现原理（三）—— Promise 原型方法实现 图解 Promise 实现原理（四）—— Promise 静态方法实现 前言 本文适合对 Prom
Promise
weixin_46485886的博客
05-19 926
Promise 本身并不是一个用于发起请求的机制，而是一种处理异步操作结果的方式(异步处理机制)。Promise对象有三种状态：待定、已实现、已拒绝。promise对象常用方法说明。Promise对象本身并不能直接发起网络请求。Promise是一个表示异步操作最终完成或失败的对象，它通常与异步函数或方法（如 FetchAPI、XMLHttpRequest、axios等）一起使用，以处理这些异步操作的结果。promise中async/await语法。 Promise相关疑问（回调地狱等问题）
图解 Promise 实现原理—— 基础实现
茉莉蜜茶~~~
01-12 262
摘要 很多同学在学习 Promise 时，知其然却不知其所以然，对其中的用法理解不了。本系列文章由浅入深逐步实现 Promise，并结合流程图、实例以及动画进行演示，达到深刻理解 Promise 用法的目的。 ...
Promise/async/Generator实现原理解析
全栈前端精选
03-24 595
点击上方“全栈前端精选“，回复“1”进交流群加入我们一起学习，天天进步笔者刚接触async/await时，就被其暂停执行的特性吸引了，心想在没有原生AP...
Promise 相关理解
qq_43645678的博客
06-24 246
Promise 相关理解
Promise系统学习笔记
一天不学习，就浑身难受
07-17 1111
2.使用 promise 封装 ajax 异步请求 3.fs模块使用Promise 4.异常穿透 5. 2、为什么要用Promise? Ⅰ-指定回调函数的方式更加灵活 Ⅱ-支持链式调用, 可以解决回调地狱问题 1、什么是回调地狱 2、回调地狱的缺点? 3、解决方案? 4、终极解决方案? 3、Promise中的常用 API 概述 Ⅰ- Promise 构造函数: Promise (excutor) {} Ⅱ-Promise.prototype.then 方法: (onResolv
javascript模式设计中文版
12-30
"观察者模式"则用于实现对象间的发布-订阅，使得多个对象可以监听并响应某一事件。 其次，书中还会讲解JavaScript的面向对象特性，如原型链、构造函数和类（ES6引入）。理解这些概念对于构建可扩展和模块化的应用至...
javascript中文版
07-28
这份"javascript 中文版"帮助文档涵盖了JavaScript的核心概念，包括变量、数据类型、运算符、流程控制、函数、对象和类。它还可能深入到DOM操作、事件处理、AJAX异步通信以及最新的ES6（ECMAScript 6）及以上的特性...
myworkflow:测试工作流程
05-23
"虽然简洁，但传达了个人或团队对于所使用的工作流程感到满意的信息。这可能意味着该工作流程设计得有效率，易于理解和执行，有助于提高生产力。 【标签】"JavaScript"提示我们这个工作流程与JavaScript编程语言...
JavaScript权威指南第6版中文版
05-14
然后，它会逐步介绍基本的语法结构，如变量、数据类型（包括原始值和引用值）、操作符、控制流程（如条件语句和循环）以及函数。这些基础知识是所有JavaScript程序的基础，无论你是构建动态网页还是复杂的Web应用。 ...
Jquery1.7.1（最新版）
12-03
4. **链式操作**：jQuery对象支持链式调用，使得代码更加简洁，如`$("p").css("color", "red").addClass("highlight")`。 5. **动画效果**：`.fadeIn()`, `.slideUp()`, `.animate()`等方法使得创建平滑的过渡效果...
前端面试题（12）答案版
最新发布
weixin_49062485的博客
06-30 452
在不同的操作系统上,设置环境变量的方式有所不同,比如在Windows上使用set命令,在Unix/Linux上使用export命令。-2） setImmediate：是Node.js中的特有API,属于微任务,会被添加到微任务队列中,在事件循环的微任务阶段执行。2) 执行完所有宏任务后,检查微任务队列(如Promise.then)是否有待执行的任务,依次执行。- 1）setTimeout：是宏任务,会被添加到宏任务队列中,在事件循环的宏任务阶段执行。在前端面试中,考察这些基本概念是非常常见的。
实战|记一次java协同办公OA系统源码审计
weixin_46239998的博客
06-26 1571
实战|记一次java协同办公OA系统源码审计
SPECweb2009调优指南
developersupport的博客
06-25 1622
 SPECweb2009 是衡量 Web 服务器性能和能效的标准化基准，可以对 Web 服务器的并发数进行性能测试，评测 Web 服务器能够支持的最大同时连接数的客户端/服务器（每秒能够响应的最大请求数）。为充分利用服务器性能，提升SPECweb2009测试结果，可通过增大系统进程数、优化服务器软件参数、绑核以及优化参数等。
React useImperativeHandle Hook
hawk2014bj的博客
06-26 662
useImperativeHandle 在 React 为我提供了一个可以为 ref 绑定处理方法的 hook，useImperativeHandle 源码中可以看到实现了绑定以及清理的逻辑。
promise底层如何实现
04-03
Promise的底层实现涉及到状态管理、回调队列和错误处理等方面。 在底层实现中，Promise通常包含以下几个关键组件： 1. 状态（State）：Promise有三种可能的状态，分别是pending（进行中）、fulfilled（已成功）和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值