Promise | 手写原理（代码版）

最新推荐文章于 2022-03-29 11:58:24 发布
最新推荐文章于 2022-03-29 11:58:24 发布
阅读量188 收藏
点赞数
分类专栏： 朝霞的光影笔记 文章标签： js javascript 前端 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aningde/article/details/104051392
版权

文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
图 / 自己画

❥❥❥❥点个赞，让我知道你来过~❥❥❥❥

Promise的好处

Promise 可以解决的问题

  1. 把你从回调地狱中解救出来
  2. 让你优雅的捕获错误
  3. 为你分担异步并发的难题
// 此处使用node举例，不会不要紧，先混个脸熟。再见就不陌生了呀
let fs = require('fs');
// 异步读取文件
fs.readFile('./name', function (err, data){
    if(err){}
    fs.readFile(data, function (err, address){
        if(err){}
        fs.readFile(address, function (err, product){
            // 1）深陷在回调地域中不能抽身
            if(err){
                // 2）捕获错误。OMG，我哪里错了？！？！告诉我，肯定改~
            }
        });
    });
});

// 3） 你的名字、你的地址。都告诉我，惊喜才会送到你面前呀~
fs.readFile('./name', function (err, data){});
fs.readFile('./address', function (err, data){});

Promise 使用的例子

状态变化

  • Promise 有3种状态
  • pending 等待态
  • fulfilled 成功态
  • rejected 失败态

【等待态 -> 成功态】 or 【等待态 -> 失败态】二选一，你来定。

我在这里等你，公众号：朝霞的世界

  • Promise 是个类，接收一个函数参数 executor 执行器，一上来就执行了。这里是同步的。
  • 每一个Promise的实例上都有一个then方法。是基于回调实现的。
console.log('一封情书');

let p = new Promise((resolve, reject)=>{
    console.log('executor请说出你的选择：');
    resolve('你中意我~(*^▽^*)');
    reject('你发了好人卡(╥﹏╥)o');
});

p.then((value)=>{
    console.log('成功态', value);
}, (reason) => {
    console.log('失败态', reason);
});

console.log('纸短情长');

我在这里等你，公众号：朝霞的世界

链式调用

console.log('-----一封情书-----');

let p = new Promise((resolve, reject) => {
    console.log('executor 请说出你的选择：');
    resolve('你中意我~(*^▽^*)');
    reject('你发了好人卡(╥﹏╥)o');
});

p.then((value) => {
    console.log('成功态---', value);
}, (reason) => {
    console.log('失败态---', reason);
}).then((value) => {
    console.log('---爱你一万年~(*^▽^*)');
}, (reason) => { 
    console.log('---伤心总是难免的o(╥﹏╥)o');
});
console.log('~~~纸短情长~~~');

我在这里等你，公众号：朝霞的世界

异步请求

  • name.txt
zhaoxiajingjing
  • 3.js
let fs = require('fs');
let p = new Promise((resolve, reject)=>{
    fs.readFile('./name.txt', 'utf8', function (err, data){
        if(err){
            return reject(err);
        }
        resolve(data);
    });
});
p.then((value)=>{
    console.log('成功了', value);
}, (reason)=>{
    console.log('失败了', reason);
});

我在这里等你，公众号：朝霞的世界

复杂的使用 Promise

下面的例子输出什么呢？

let fs = require('fs');

function read(filePath) {
    return new Promise((resolve, reject) => {
        fs.readFile(filePath, 'utf8',function(err, data){
            if(err) {
                return reject(err);
            }
            resolve(data);
        });
    });
}

read('./name.txt')
// then-1
.then(function (data) {
    console.log('data①', data);
    return new Promise((resolve, reject) => {
        reject('错误了');
    });
})
// then-2
.then((data) => {
    console.log('data②', data);
}, err => {
    console.log('err②', err);
})
// then-3
.then((data) => {
    console.log('data③', data);
}, (err) => {
    console.log('err③', err);
});

我在这里等你，公众号：朝霞的世界

** OK，提炼一下重点： **

  1. 有三个状态。怎么变化的？
  2. executor。怎么执行的？
  3. then方法，成功态和失败态的回调。
  4. then方法的链式调用。
  5. Promise 处理异步。

实现以上内容

Promise 基本实现

  • new Promise 会传一个函数作为参数。这个函数有两个参数：resolve 成功 reject 失败，都是用于改变状态的。都在实例上，一个 Promise 一生只改变一次状态

  • 每个实例上都有一个 then 方法，异步的。对于成功态和失败态的回调：onFulfilled onRejected

代码1，传送门~

const PENDING = 'pending';
const SUCCESS = 'fulfilled';
const FAIL = 'rejected';

class Promise{
    constructor(execuotr){
        const status = PENDING; // 我等着你给答案~
        this.value;
        this.reason;

        let resolve = (value)=>{
            if(status === PENDING) {
                this.status = SUCCESS; // 你中意我~
                this.value = value;
            }
        };

        let reject = (reason)=>{
            if(status === PENDING) {
                this.status = FAIL; // 你发了好人卡
                this.reason = reason;
            }
        };

        // 是同步的哦~
        try {
            executor(resolve, reject);
        } catch (e) {
            reject(e);
        }
    }
    then(onFulfilled, onRejected){
        if(this.status === SUCCESS) {
            onFulfilled(this.value);  // 爱你一万年~
        }
        if(this.status === FAIL) {
            onRejected(this.reason); // 伤心总是难免的
        }
    }
}

Pomise 解决异步问题

Promise 是个容器，里面可以放一些异步的请求，请求成功了走成功态，请求失败了走失败态。当然，你要反过来走也可以哒~

代码2，传送门~

const PENDING = 'pending';
const SUCCESS = 'fulfilled';
const FAIL = 'rejected';

class Promise {
    constructor(executor){
        this.status = PENDING;
        this.value;
        this.reason;

        // 用来存储 订阅的内容的
        this.onSuccessCallbacks = [];
        this.onFailCallbacks = [];

        let resolve = (value)=>{
            if(this.status === PENDING) {
                this.status = SUCCESS;
                this.value = value;
                this.onSuccessCallbacks.forEach(fn => fn());
            }
        };
        let reject = (reason)=>{
            if(this.status === PENDING) {
                this.status = FAIL;
                this.reason = reason;
                this.onFailCallbacks.forEach(fn => fn());
            }
        };

        try {
            executor(resolve, reject);
        } catch (e) {
            reject(e);
        }
    }
    then(onFulfilled, onRejected){
        if(this.status === SUCCESS){
            onFulfilled(this.value);
        }
        if(this.status === FAIL){
            onRejected(this.reason);
        }
        // 当Promise里面有异步请求控制状态改变时，会先走到then方法里面
        if(this.status === PENDING) {
            this.onSuccessCallbacks.push(()=>{
                onFulfilled(this.value);
            });
            this.onFailCallbacks.push(()=>{
                onRejected(this.reason);
            });
        }
    }
}

Promise 里面有异步请求时候，会先走到 then方法里面了。此时，需要把成功态回调和失败态回调先存储起来，等到异步请求回来以后变更了状态，再触发执行。

Promise 的链式

then 方法 返回一个新的 Promise

Promise 一生只能改变一次状态。那么，Promise 的链式调用then方法，说明每次都会返回一个新的Promise。

代码3，传送门~

const SUCCESS = 'fulfilled';
const FAIL = 'rejected';
const PENDING = 'pending';

class Promise {
    constructor(executor) {
       // ... executor 代码
    }
    then(onFulfilled, onRejected) {
        let promise2;

        promise2 = new Promise((resolve, reject)=>{
            if (this.status === SUCCESS) {
                try { // 用 try catch 捕获同步的报错
                    // 成功态的回调的返回值 x
                    // 【问题】 如果 x 是一个promise，那么需要取得x执行后的结果
                    let x = onFulfilled(this.value);
                    resolve(x);

                } catch (e) {
                    reject(e);
                }
            }
            if (this.status === FAIL) {
                try {
                    let x = onRejected(this.reason);
                    resolve(x);
                } catch (e) {
                    reject(e);
                }
            }
            if (this.status === PENDING) {
                this.onSuccessCallbacks.push(()=>{
                    try {
                        let x = onFulfilled(this.value);
                        resolve(x);
                    } catch (e) {
                        reject(e);
                    }
                });
                this.onFailCallbacks.push(()=>{
                    try {
                        let x = onRejected(this.reason);
                        resolve(x);
                    } catch (e) {
                        reject(e);
                    }
                });
            }
        });

        return promise2;
    }
}

解析 x

如何判断 x 是Promise，还是一个普通值？【参考规范 https://promisesaplus.com “Promise A+” 2.2.7】

代码4，传送门~

const SUCCESS = 'fulfilled';
const FAIL = 'rejected';
const PENDING = 'pending';

function resolvePromise(promise2, x, resolve, reject) {
    // 死循环了，容错
    if(promise2 === x) {
        return reject('TypeError: Chaining cycle detected for promise~~~~');
    }
    // 判断 x 类型
    if(typeof x === 'function' || (typeof x === 'object' && x != null)) {
        // 这个才有可能是 promise
        try {
            let then = x.then;
            if(typeof then === 'function') {
                // 此时，认为就是个promise
                // 如果promise是成功的，那么结果向下传递，如果失败了就传到下一个失败里面去
                then.call(x, y=>{
                    resolvePromise(promise2, y, resolve, reject);
                }, r => {
                    reject(r);
                });
            } else {
                resolve(x);
            }
        } catch (e) {
            reject(e);
        }
    } else {
        // x 肯定不是一个promise
        resolve(x);
    }
}

class Promise {
    constructor(executor) {
        // ... executor 代码
    }
    then(onFulfilled, onRejected) {
        let promise2;

        promise2 = new Promise((resolve, reject) => {
            if (this.status === SUCCESS) {
                // 用定时器模拟此时promise2已经能获取到了
                setTimeout(() => {
                    try {
                        let x = onFulfilled(this.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                });
            }
            // 其他情况同理，先以一个为例说明
        });
        
        return promise2;
    }
}

严谨度

Promise 给你的承诺，一句情话：一个 Promise 一生只改变一次状态

代码5，传送门~

const SUCCESS = 'fulfilled';
const FAIL = 'rejected';
const PENDING = 'pending';

function resolvePromise(promise2, x, resolve, reject) {
    // 死循环了，容错
    if(promise2 === x) {
        return reject('TypeError: Chaining cycle detected for promise~~~~');
    }
    let called;
    if(typeof x === 'function' || (typeof x === 'object' && x != null)) {
        try {
            let then = x.then;
            if(typeof then === 'function') {
                then.call(x, y=>{
                    if(called) return;
                    called = true;
                    resolvePromise(promise2, y, resolve, reject);
                }, r => {
                    if(called) return;
                    called = true;
                    reject(r);
                });
            } else {
                resolve(x);
            }
        } catch (e) {
            if(called) return;
            called = true;
            reject(e);
        }
    } else {
        resolve(x);
    }
}

class Promise {
    constructor(executor) {
        // .... executor 的代码
    }
    then(onFulfilled, onRejected) {
        let promise2;

        promise2 = new Promise((resolve, reject) => {
            if (this.status === SUCCESS) {
                // 用定时器模拟此时promise2已经能获取到了
                setTimeout(() => {
                    try {
                        let x = onFulfilled(this.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                });
            }
            // 其他情况同理，先以一个为例说明
        });

        return promise2;
    }
}

值的穿透

let p = new Promise((resolve, reject)=>{
    resolve(1000);
});
p.then().then().then(data => {
    console.log(data);
});

值可以传过去

const SUCCESS = 'fulfilled';
const FAIL = 'rejected';
const PENDING = 'pending';

function resolvePromise(promise2, x, resolve, reject) {
    // ... 判断 x 的值
}

class Promise {
    constructor(executor) {
        // ... executor 代码
    }
    then(onFulfilled, onRejected) {
        // 值穿透
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val;
        onRejected = typeof onRejected === 'function' ? onRejected : err => {throw err};
        // ... promise2 的判断
    }
}

测试

  • 测试这个库是否符合我们的promise A+ 规范
  • promises-aplus-tests 用来测试当前的库是否符合规范
  • npm i promises-aplus-tests -g
  • promises-aplus-tests 文件名

可测试代码，传送门~
我在这里等你，公众号：朝霞的世界

Promise A+ 规范

Promise 是一个构造函数，是个类。默认高版本浏览器，node都自带了。不用考虑兼容性，放心大胆的使用吧！如果真不兼容，那就用es6-promise包自己是一套吧~

Promise A+

https://promisesaplus.com

容错

上面的内容，还需要一部分容错。就是当executor 里面的有一个promise的时候，执行的结果。

let Promise = require('./promise.js');
let p = new Promise((resolve, reject)=>{
    resolve(new Promise((resolve, reject)=>{
        reject(404);
    }));
});
p.then(value => console.log(1, value), reason => console.log(2, reason));

// 输出：
// 2 404

在同步执行时，resolve 的value是一个Promise，那么需要等它的结果。

const SUCCESS = 'fulfilled';
const FAIL = 'rejected';
const PENDING = 'pending';

function resolvePromise(promise2, x, resolve, reject) {
    // ... 校验x
}

class Promise {
    constructor(executor) {
        // ... code

        let resolve = (value) => {
            if (value instanceof Promise) {
                return value.then(resolve, reject);
            }

            if (this.status === PENDING) {
                this.status = SUCCESS;
                this.value = value;
                this.onSuccessCallbacks.forEach(fn => fn());
            }
        };
        // ... code
    }
    then(onFulfilled, onRejected) {
        // ... then 方法
    }
}

module.exports = Promise;

交流

文章首发，公众号：朝霞的光影笔记
△文章首发，公众号：朝霞的光影笔记

景同学你好
关注
专栏目录
手写promise的原理及思路
qq_35258995的博客
10-12 1701
highlight: a11y-dark theme: healer-readable 手写promise思路 先逐步分析，一步一步的写代码，最终有完整示例 1.promise是一个类，参数是一个函数执行器，且会立即执行。函数执行器接受两个参数，一个成功回调resolve，一个失败回调reject class MyPromise { constructor(executor) { executor(this.resolve.bind(this), this.reject.bind(.
js-Promise：手写系列手写promise，vue ..
02-21
js-Promise 手写一个简单的承诺无极初级核心发布订阅模式
手写源代码（三）——promise原理
qq_40619263的博客
02-20 290
手写promise原理 话不多说，直接上代码。 //第一步：控制状态的变化 // 1.未决阶段执行的函数 // 2.状态更改一次后不能再更改 // 3.抛出错误用try catch //第二步：实现后续的处理 //thenable--resolved catchable--rejected // then方法 加到队列里面去 已经是resolved则立即执行，否则加到队列里去 //第三...
Promise 原理解析
ngaiwe的博客
01-12 650
promise用法，根据promise/A+协议，分析promise原理，具体协议请查阅 https://segmentfault.com/a/1190000002452115 创建一个文件index.js并且创建一个promise实例,创建随机数num 当大于0.5时resolve，当小于0.5时reject，用then方法接收resolve返回值为value，reject返回值为r
Promise原理及手写Promise
huangzhin的博客
11-29 681
一、Promise原理： Promise 原理围绕以下三个问题进行解决： （有任何一步不了解的话请先往下看手写Promise，会一步步剖析原理，看完后再继续回顾这里！！） 1. 怎么实现异步？ Promise内部then函数注册后续需要执行的函数，resolve函数执行。需要保证函数在执行前都已注册好， 解決：resolve内部执行函数的代码需要加入延时机制setTimeout...
手写Promise核心代码
qq_51172685的博客
01-22 501
1.框架构建 class _Promise{ // 定义状态并立即执行excutor函数 constructor(){}; // 修改状态为fufilled resolve(){}; // 修改状态为reject reject(){}; // 根据excutor函数的结果执行对应的回调 then()
js代码-手写promise.all
07-16
下面我们将深入探讨如何手写一个`Promise.all`函数，以及其工作原理和应用场景。 首先，让我们看看`Promise.all`的基本用法。假设我们有以下两个Promise： ```javascript let promise1 = new Promise((resolve, ...
js代码-手写promise.allSettled
07-14
在这个手写`promise.allSettled`的过程中，我们可以深入理解Promise的工作原理和设计模式。 首先，我们需要明白`Promise.allSettled`的核心功能：当传入的Promise数组中的每个Promise都达到settled状态（即...
js代码-利用promise 手写一个限制最大并发的类
07-14
本主题聚焦于如何利用Promise来手写一个类，这个类可以限制并发执行的任务数量，这对于优化资源利用和防止服务器过载来说至关重要。 首先，让我们了解Promise的基本概念。Promise代表一个异步操作的最终完成或失败...
js代码-promise 手写
07-16
在"js代码-promise 手写"的主题中，我们将深入探讨如何从零开始构建一个简单的Promise实现。首先，我们需要理解Promise的基本结构和方法： 1. **构造函数**：Promise的构造函数接收一个执行器函数（executor），该...
Promise原理
wtianheihei的博客
01-12 1393
Promise原理 Promise主要使用了设计模式中的观察者模式 通过Promise，prototype.then和Promise.prototype.catch方法将观察者注册到被观察者Promise对象中，同时返回一个新的Promise对象，以便可以链式调用 被观察者管理内部pending，fulfilled，rejected的状态转变，同时通过构造函数中传递的resolve，reject方法以主动触发状态改变和通知观察者 Promise雏形：获取用户id的请求处理 // 没有加入延时机制/状
30分钟，让你彻底明白Promise原理
weixin_34174105的博客
05-19 885
原文链接 前言 前一阵子记录了promise的一些常规用法，这篇文章再深入一个层次，来分析分析promise的这种规则机制是如何实现的。ps:本文适合已经对promise的用法有所了解的人阅读,如果对其用法还不是太了解，可以移步我的上一篇博文。 本文的promise源码是按照Promise/A+规范来编写的（不想看英文版的移步Promis...
Promise 原理
淡定如斯的博客
11-05 329
一. Promise规范 要实现一个Promise必须要遵守Promise规范，Promise的规范有很多，Promise/A，Promise/B，Promise/D 以及 Promise/A 的升级版 Promise/A+。ES6 中采用了 Promise/A+ 规范。 具体的 Promise/A+ 规范可以跳转这里 Promise的实现 接下来我们就实现一个Promise new Promise((resolve,reject)=>{ setTimeout(()=>{ console.
promise原理
楠姐的博客
03-03 3368
Promise 是使用回调函数，是把回调封装在了内部，使用上一直通过 then方法的链式调用，使得多层的回调嵌套看起来变成了同一层的，书写上以及理解上会更直观和简洁一些。 promise 实现原理 const PENDING = 'pending'; //初始状态 const FULFILLED = 'fulfilled'; // 成功状态 const REJECTED = 'rejected'; // 成功 function Promise(extutor){ let self = this; .
手写promise核心代码
m0_51858053的博客
03-29 186
手写Promise核心代码 初始构造： 首先构造一个Commitment类 在constructor传入两个函数（resolve，reject） 在类中写入resolve和reject这两个方法 定义三个static静态状态：待定，成功，拒绝 然后写then方法，完成异步、链式功能 注意里面的一些问题： this指向问题 then 如果状态为成功，就执行传入的第一个函数，状态为拒绝则执行传入的第二个函数 要注意的地方： 要保证在执行了resolve或者reject之后再执行then，就将then的函数参
promise的原理
LN101的博客
04-02 450
promise是一个解决异步地函数，简单来说promise就是一个容器，它包裹着未来才会结束地事件。它一共有三种状态，pending(进行中),fulfiled(执行成功)，rejected(执行失败)，它只有内部包着地那个异步函数地结果来决定状态，是由pending到fulfiled呢还是pending到rejected呢，都是由这个结果来决定地，一旦状态执行完毕了，就不会再改变状态了，这就是p...
promise原理:代码实现
ziazan的博客
09-14 255
handle逻辑未抽离： (function (window) { const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' function Promise(excutor) { this._state = PENDING this._value = undefined this._callbacks = [];
手把手教你手写Promise代码
下面，我将详细介绍Promise的内部实现原理以及如何手写一个简单的Promise。 首先，Promise构造函数接收一个执行器（executor）作为参数，执行器函数有两个参数，分别是resolve和reject函数。这两个函数都是Promise...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值