ES6-22【Promise源码重写】

已于 2022-05-14 13:53:54 修改
阅读量316 收藏 1
点赞数
分类专栏： # ES6 文章标签： javascript 前端 es6
于 2022-05-11 20:46:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42647547/article/details/124692701
版权

一、Promise源码重写

  1. 基本功能

    class MyPromise { // new的时候传入executor函数
    constructor(executor) {
        this.state = 'pending'; // 提供状态、成功返回值与失败返回值
        this.value = undefined;
        this.reason = undefined;

        let resovle = (value) => { // 定义resolve函数
            this.state = 'fullFilled';
            this.value = value;
        }

        let reject = (reason) => { // 定义reject函数
            this.state = 'reject';
            this.reason = reason;
        }

        executor(resovle, reject); // 提供resolve和reject两个函数
    }

    then(onFullFilled, onRejected) { // 定义then方法，接收成功与失败的回调函数
        if (this.state === 'fullFilled') { // 如果状态为成功，则返回成功的返回值，通过形参传给回调函数
            onFullFilled(this.value);
        }
        if (this.state === 'rejected') { // 如果状态为失败，则返回失败的返回值，通过形参传给回调函数
            onRejected(this.reason);
        }
    }
}

const p1 = new MyPromise((resolve, reject) => {
    resolve(1);
});
p1.then((res) => {
    console.log(res);
}, (err) => {
    console.log(err);
});
// 输出1

  2. 处理异步任务、绑定多个回调

    executor执行的时候，resolve并没有执行，1秒钟后resolve才执行

    所以说在new MyPromise的时候，MyPromise的状态还是pennding，此时就可以认定是在处理异步任务

    class MyPromise {
    constructor(executor) {
        this.state = 'pending';
        this.value = undefined;
        this.reason = undefined;
        this.onFullFilledCallbacks = []; // 当多次绑定回调，则将其存入对应的成功/失败数组中遍历执行
        this.onRejectedCallbacks = [];

        let resovle = (value) => {
            this.state = 'fullFilled';
            this.value = value;
            this.onFullFilledCallbacks.forEach(fn => fn()); // 这里可以传参fn(this.value)，但是并不好，应该在then中统一处理参数
        }

        let reject = (reason) => {
            this.state = 'reject';
            this.reason = reason;
            this.onRejectedCallbacks.forEach(fn => fn()); // fn(this.reason)
        }

        executor(resovle, reject);
    }

    then(onFullFilled, onRejected) {
        // 同步情况
        if (this.state === 'fullFilled') {
            onFullFilled(this.value);
        }
        if (this.state === 'rejected') {
            onRejected(this.reason);
        }
        // 异步情况
        if (this.state === 'pending') {
            //             用函数包装一次，有点像代理模式
            this.onFullFilledCallbacks.push(() => {
                onFullFilled(this.value);
            });
            this.onRejectedCallbacks.push(() => {
                onRejected(this.reason);
            });
        }
    }
}

const p1 = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve(1); // executor执行的时候，resolve并没有执行，1秒钟后resolve才执行 
    }, 1000)
});
p1.then((res) => {
    console.log(res);
}, (err) => {
    console.log(err);
});
p1.then((res) => {
    console.log(res);
}, (err) => {
    console.log(err);
});
// 输出1 1

  3. 链式调用、问题检测工具

    1. 链式调用

      链式操作不能返回this，因为this是上一次的promise，而我们需要返回的是一个全新的promise

      const isFunction = (value) => typeof value === 'function';
class MyPromise {
    constructor(executor) {
        this.state = 'pending'; // 初始状态：fulfilled，rejected
        this.value = undefined; // 成功的返回值
        this.reason = undefined; // 失败的返回值
        this.onFullFilledCallbacks = [];
        this.onRejectedCallbacks = [];

        let resovle = (value) => {
            this.state = 'fullFilled';
            this.value = value;
            this.onFullFilledCallbacks.forEach(fn => fn());
        }

        let reject = (reason) => {
            this.state = 'rejected';
            this.reason = reason;
            this.onRejectedCallbacks.forEach(fn => fn());
        }

        try {
            executor(resovle, reject);
        } catch (err) {
            reject(err);
        }
    }

    then(onFullFilled, onRejected) {
        onFullFilled = isFunction(onFullFilled) ? onFullFilled : data => data;
        onRejected = isFunction(onRejected) ? onRejected : err => {
                throw err;
            }
            // 每一次调用then, 都会有一个p2
        const p2 = new MyPromise((resolve, reject) => { // 每当new MyPromise的时候，里面的代码是同步执行的
            let x;
            // 同步情况
            if (this.state === 'fullFilled') {
                setTimeout(() => {
                    try {
                        x = onFullFilled(this.value);
                        // resolve(x);
                        // 判断返回值是否为promise，然后作相应的处理
                        resolvePromise(p2, x, resolve, reject);
                    } catch (err) {
                        reject(err);
                    }
                }, 0);
            }
            if (this.state === 'rejected') {
                setTimeout(() => {
                    try {
                        x = onRejected(this.reason);
                        resolvePromise(p2, x, resolve, reject);
                    } catch (err) {
                        reject(err);
                    }
                }, 0);
            }
            // 异步情况
            if (this.state === 'pending') {
                this.onFullFilledCallbacks.push(() => {
                    setTimeout(() => {
                        try {
                            x = onFullFilled(this.value);
                            resolvePromise(p2, x, resolve, reject);
                        } catch (err) {
                            reject(err);
                        }
                    }, 0);
                });
                this.onRejectedCallbacks.push(() => {
                    setTimeout(() => {
                        try {
                            x = onRejected(this.reason);
                            resolvePromise(p2, x, resolve, reject);
                        } catch (err) {
                            reject(err);
                        }
                    }, 0);
                });
            }
        })

        return p2; // 返回全新的promise
    }
}

function resolvePromise(p2, x, resolve, reject) {
    let called;
    if (p2 === x) {
        return reject(new TypeError('typeErr'));
    }

    if ((typeof x === 'object' && x !== null) || typeof x === 'function') {
        try {
            let then = x.then;
            if (typeof then === 'function') {
                then.call(x, y => {
                    if (called) return;
                    called = true;
                    // console.log(y);
                    // resolve(y);
                    resolvePromise(p2, y, resolve, reject);
                }, r => {
                    if (called) return;
                    called = true;
                    // console.log(r)
                    reject(r);
                })
            } else {
                if (called) return;
                called = true;
                resolve(x);
            }
        } catch (err) {
            if (called) return;
            called = true;
            reject(err);
        }
    } else {
        resolve(x);
    }
}

const p1 = new MyPromise((resolve, reject) => {
    // setTimeout(() => {
    resolve(1);
    // reject(1);
    // }, 1000)
});

const p2 = p1.then((res) => {
    // console.log(res);
    // 这里希望能够链式操作、返回一个promise
    return new MyPromise((resolve, reject) => {
        resolve(new MyPromise((resolve, reject) => {
            resolve(new MyPromise((resolve, reject) => {
                resolve(new MyPromise((resolve, reject) => {
                    resolve(1000);
                }));
            }));
        }));
    })
}, (err) => {
    console.log(err);
    // return err + 2;
});

p2.then((res) => {
    // 希望res能够拿到上一次回调的结果
    console.log(res, 'success');
}, (err) => {
    console.log(err);
});

MyPromise.defer = MyPromise.deferred = function() {
    let dfd = {};
    dfd.promise = new MyPromise((resolve, reject) => {
        dfd.resolve = resolve;
        dfd.reject = reject;
    });
    return dfd;
};
// 安装promises-aplus-tests工具测试

module.exports = MyPromise;

    2. 问题检测

      安装promises-aplus-tests：

      npm i promises-aplus-tests -g

      终端输入如下命令进行检测：

      promises-aplus-tests index.js

      输出这样就说明代码没有问题在这里插入图片描述

小管打天下
关注
专栏目录
关于Promise部分原理重写
qq_44891829的博客
12-14 907
Promise手写
ES6-11一些新特性
WANG944282的博客
05-12 211
ECMAScript6 从ES6开始，每年发布一个版本，版本号比年份最后一位大1。ES6就是ES2015 1.let：声明变量 变量不能重复声明（var可以重复声明） 块级作用域，变量只在{}代码块里面有效。（全局作用域、函数作用域、块级作用域eval） 不存在变量提升（在声明前使用报错，var有变量提升） 虽然是块级作用域，但是不影响作用域链 //遍历并绑定事件 for(let i = 0;i<items.length;i++){ items[i].onclick = function(){
Promise笔记promise重写
qq_30258495的博客
08-21 494
util.promisify()参数为一个错误优先的回调函数，即(err,data)=>{}状态改变，为他所定义多有回调都会执行（就是多个。一个对象只能改变一次状态一般成功的结果是。只能由pending变为成功或者失败。不管执行哪个回调都是这4点。
Promise 重写 （第一部分）
shaoyahu的博客
11-15 345
promise 重写 promise
ES6笔记 22.Promise重写
syhdqdzs的博客
10-25 177
ES6笔记 22
自己重写Promise
08-12
研究过js异步及其解决方案的时候，接触到了Promise。一开始只是会用，然后渐渐的感觉这个小 东西的设计及其巧妙。就想到花时间自己实现一个
portfolio-site-rewrite:在 Node 中重写我的投资组合站点
06-09
你需要熟悉 ES6+ 的语法特性，如箭头函数、模板字符串、Promise 和 async/await 等。同时，对于前端开发，DOM 操作、事件处理、AJAX 请求等也是必不可少的。 4. **静态文件服务**：为了展示网页，项目可能包含了...
js实例源码案例 精典案例
11-24
本压缩包中的"js实例源码案例 精典案例"包含了多个JavaScript的经典应用示例，旨在帮助开发者深入理解和熟练运用JavaScript。 在JavaScript的世界里，学习和实践是提升技能的关键。以下将详细解析这些实例可能涵盖...
前端面试js+es6
LG的博客
05-13 320
js基本数据类型 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。 注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。 引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。 OSI七层 五层参考模型 传输层用到的协议 TCP/IP四层模型 TCP/IP是一个四层
java源码练习-javascript_complete_exercises:此源代码包含javascript练习
05-25
7. **ES6及以后的新特性**: 解构赋值、模板字符串、let和const、箭头函数、类与继承、模块（import和export）、async/await。 8. **JavaScript设计模式**: 单例模式、工厂模式、观察者模式、装饰器模式、策略模式等...
node.js学习笔记--HTTP之Promise重写小爬虫
sriting的博客
03-20 457
注：此博客是在学习进击Node.js基础（一）这门课程时的学习笔记，感谢Scott老师的课程。 一、使用Promise处理异步、嵌套 1. 用传统的回调来按顺序执行小球动画 &lt;!doctype&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Promise animation&lt;/title&gt; &lt;style&...
重写promise 写一个类似于promise的方法
致我逝去的青春的博客
03-05 577
1.重写promise 写一个类似于promise的方法 // promise 内置类 //重写promise 写一个类似于promise的方法 class MyPromise{ constructor(excutor){//当new Mypromise constructor执行l //this -》Promise 的实例 ...
深入ES6中Promise的核心知识,重写实现Promise
webMinStudent的博客
10-13 400
深入讲解ES6中Promise的核心知识,重写Promise ：重写实现Promise 手写Promise： Promise.prototype.then() Promise.prototype.catch() Promise.resolve() Promise.reject() Promise.all() / Promise.race() Promise.prototype.then： function Promise(extceu) { const _this
ES6---promise源码
赵佳敏的博客
01-14 262
function Promise(executor) { let self = this; // 保存成功的值和失败的原因 self.value = undefined; self.reason = undefined; // 专门存成功的回调 self.onResolvedCallbacks = []; // 专门存失败的回调 self.onRejectedCallbac...
Promise的运行原理以及重写Promise内置类
mister、奎
07-19 1031
1.为什么用？ 假设我们需要发三次请求A,B,C,B请求需要用到A请求回来的数据，C需要用到B请求回来的数据，怎么发送？ $.ajax({ url:'jsonA.json', success(data) { $.ajax({ url:'jsonB.json', success(data) { ...
es6 手写Promise实现源码
weixin_43294560的博客
03-27 478
实现思路: 因为Promise是es6出来的,所以整体设计都使用es5的类和普通function 基本大纲: (1)当new Promise时,在Promise类内部执行传入的方法体,形参resovle和reject都是类内部定义的方法,用来改变Promise内部的状态和值 (2)当使用.then接收时 会使用.then传入的方法参数,调用该方法,传入Promise的值,若执行器同步执行,直接调用,若执行器异步执行,则保存方法,带到执行器执行时再一起调用 (3)当使用.then返
es6 promise 源码解析
qq_42389674的博客
07-17 387
promise 源码解析
ES6-Promise 源码阅读
weixin_34077371的博客
09-27 852
前言 此次阅读的 promise 实现是 ES6-Promise ，是 promise 的众多实现中较为完善的一个例子，从入口文件 lib/es6-promise/promise.js 开始阅读，可以看到 Promise 定义有如下的静态方法 Promise.all Promise.race Promise.resolve Promise.reject 以及挂载在 Promise.protoype...
ES6 Promise.then的源码（转载）
kerryabc的博客
01-16 460
写源码可以了解一个函数的本质，通过对源码的理解可以让你对知识有更多的了解，欢迎大家留言交流学习。 functionmyPromise(fn){ if(typeof(fn)!=='function'){ throwError(`Promiseresolver${fn}isnotafunction`) ...
es6-promise依赖下载
最新发布
06-09
ES6-Promise是一个用于在JavaScript中实现Promise功能的库，它为浏览器和Node.js环境提供了对Promise规范的支持，特别适用于那些不直接支持ES6 Promise特性的环境。它解决了早期浏览器对Promise的不完全支持问题。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值