Promise 简单实现

最新推荐文章于 2023-01-27 10:00:24 发布
最新推荐文章于 2023-01-27 10:00:24 发布
阅读量126 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5b5180a46fb9a04fb212ab73
版权

今天的任务是根据Promise A+ 规范简单实现一个 Promise 库。开始之前，我们可以先通读一下这个规范，戳这里。

静心读一下这个规范真的很重要，很重要，很重要。虽然是英文版，但是读起来也许会比汉语更能让人理解。

A promise represents the eventual result of an asynchronous operation. The primary way of interacting with a promise is through its then method, which registers callbacks to receive either a promise’s eventual value or the reason why the promise cannot be fulfilled.

提到 Promise 自然想到异步，异步想到回调，回调就是回头在调。回头在调的前提是提前存储回调内容，等到时间后从存储的地方取到对应的内容再执行即可。

一、Promise 构造函数实现

2.1 A promise must be in one of three states: pending, fulfilled, or rejected.

2.1.1 A pending promise may transition to either the fulfilled or rejected state.

2.1.2 A fulfilled promise must have a value, which must not change.

2.1.3 A rejected promise must have a reason, which must not change.

我们平时但凡做什么事情，大概都有三种基本状态，正在进行、成功、失败。一个 Promise 代表一个异步操作，也有这三种状态，且状态只能从正在进行到成功或者失败，不可逆转。不管事情最终什么状态，既然结果出来了，那就通知之前缓存回调的数组（因为可以 then 多次，故为数组）并把结果给它吧。

Promise 基本使用：

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('success')
    }, 1000)
})
promise.then((data) => {console.log(data)})
复制代码

首先 Promise 是一个类，通过 new 创建一个实例，参数是一个函数，函数参数默认命名为 resolve 和 reject，我们称该函数为一个执行器 executor，默认执行。构造函中还需要一个状态变量 status，保存当前执行状态；以及执行成功 value 或失败 reason 的结果变量；最后还需要上面提及的缓存回调的数组。实现代码如下：

class Promise () {
    constructor (executor) {
        // 默认等待态
        this.status = 'pending'
        // 成功结果
        this.value = undefined
        // 失败原因
        this.reason = undefined
        // 存储成功回调数组
        this.onResolvedCallbacks = []
        // 存储失败回调数组
        this.onRejectedCallbacks = []
        // 执行器
        executor(resolve, reject)
    }
}
复制代码

执行器函数参数是 resolve 和 reject， 同样也是函数，功能是有结果后触发缓存回调数组，也可以理解为发布。实现代码如下：

class Promise () {
    constructor (executor) {
        // 变量声明
        this.status = 'pending'
        this.value = undefined
        this.reason = undefined
        this.onResolvedCallbacks = []
        this.onRejectedCallbacks = []
        // 结果成功，通知函数定义
        let resolve = (value) => {
            if (this.status === 'pending') {
                this.status = 'resolved'
                this.value = value
                this.onFulfilledCallbacks.forEach(fn => fn())
            }
        }
        // 结果失败，通知函数定义
        let reject = (reason) => {
            if (this.status === 'pending') {
                this.status = 'rejected'
                this.reason = reason
                this.onRejectedCallbacks.forEach(fn => fn())
            }
        }
        try {
            executor(resolve, reject)
        } catch (e) {
            reject(e)
        }
    }
}
复制代码

既然有结果后要触发缓存回调数组，那么接下来我们看一下这个回调数组如何缓存。

二、Promise.then 实现

2.2 A promise must provide a then method to access its current or eventual value or reason.

1、then 订阅功能

我们都知道，promise 实例只有通过调用 then 函数才能拿到结果，then 函数参数分别为成功回调和失败回调，回调参数为成功值和失败值。固 then 函数的主要功能即是缓存回调函数，也可以理解为订阅。实现代码如下：

class Promise () {
    // constructor省略...
    then (onFulfilled, onRejected) {
        // 如果exector内容为同步代码，resolve函数执行后，状态已变为resolved，则直接执行回调
        if (this.status === 'resolved') {
            onFulfilled(this.value)
        } 
        // 如果exector内容为同步代码，reject函数执行后，状态已变为rejected，直接执行回调
        if (this.status === 'rejected') {
           onRejected(this.reason)
        }
        // 如果exector内容为异步代码，状态为pending时，则缓存回调函数，我们也可以理解为订阅
        if (this.status === 'pending') {
            this.onResolvedCallbacks.push(() => {
               onFulfilled(this.value)
            })
            this.onRejectedCallbacks.push(() => {
                onRejected(this.reason)
            })
        }
    }
}
复制代码

2、then 返回 promise

2.2.6 Then may be called multiple times on the same promise.

2.2.7 Then must return a promise. promise2 = promise1.then(onFulfilled, onRejected)

实现代码如下：

class Promise () {
    // constructor省略...
    then (onFulfilled, onRejected) {
        let promise2
        if (this.status === 'resolved') {
            promise2 = new Promise((resolve, reject) => {
                onFulfilled(this.value)
            })
        }
        if (this.status === 'rejected') {
            promise2 = new Promise((resolve, reject) => {
                onRejected(this.reason)
            })
        }
        if (this.status === 'pending') {
            promise2 = new Promise((resolve, reject) => {
                this.onResolvedCallbacks.push(() => {
                    onFulfilled(this.value)
                })
                this.onRejectedCallbacks.push(() => {
                    onRejected(this.reason)
                })
            })
        }
        return promise2
    }
}
复制代码

2、then 调用多次

2.2.7.1 onFulfilled or onRejected returns a value x, run the Promise Resolution Procedure [[Resolve]](promise2, x).

then 可以调用多次，且每次 then 参数 onFulFilled 函数的参数值为上一次 promise 函数的执行结果，即为 onFulfilled(this.value) 的执行结果，我们设为 x。根据 x 的不同情况做不同处理，详情见 Promise A+ 规范 2.3 Promise Resolution Procedure。

实现代码如下：

class Promise () {
    // constructor省略...
    then (onFulfilled, onRejected) {
        let promise2
        if (this.status === 'resolved') {
            promise2 = new Promise((resolve, reject) => {
                let x = onFulfilled(this.value)
                // Promise Resolution Procedure
                resolvePromise(promise2, x, resolve. reject)
            })
        }
        if (this.status === 'rejected') {
            promise2 = new Promise((resolve, reject) => {
                let x = onRejected(this.reason)
                // Promise Resolution Procedure
                resolvePromise(promise2, x, resolve. reject)
            })
        }
        if (this.status === 'pending') {
            promise2 = new Promise((resolve, reject) => {
                this.onResolvedCallbacks.push(() => {
                    let x = onFulfilled(this.value)
                    // Promise Resolution Procedure
                    resolvePromise(promise2, x, resolve. reject)
                })
                this.onRejectedCallbacks.push(() => {
                    let x = onRejected(this.reason)
                    resolvePromise(promise2, x, resolve, reject)
                })
            })
        }
        return promise2
    }
}
// 处理函数：处理promise2和x的关系
function resolvePromise (promise2, x, resolve, reject) {
    // 2.3.1 If promise and x refer to the same object, reject promise with a TypeError as the reason.
    if (promise2 === x) {
        return reject(new TypeError('循环引用'))
    }
    //  2.3.3 if x is an object or function
    if (x !== null && typeof x === 'object' || typeof x === 'function' ){
        try {
            // 2.3.3.1 Let then be x.then.
            let then = x.then
            // 2.3.3.3 If then is a function，call it with x as this.
            if (typeof then === 'function') {
                // 2.3.3.3.1 If/when resolvePromise is called with a value y, run [[Resolve]](promise, y)
                then.call(x, y => {
                    resolvePromise(promise2, y, resolve, reject)
                }, r => {
                    // 2.3.3.3.2 If/when rejectPromise is called with a reason r, reject promise with r.
                    reject(r)
                })
            }
        } catch (e) {
            // 2.3.3.4 If calling then throws an exception e
            reject(e)
        }
    } else {
        // 2.3.4 If x is not an object or function, fulfill promise with x.
        resolve(x)
    }
}
复制代码

3、状态不可逆转

实现代码如下：

// 处理函数：处理promise2和x的关系
function resolvePromise (promise2, x, resolve, reject) {
    // 2.3.1 If promise and x refer to the same object, reject promise with a TypeError as the reason.
    if (promise2 === x) {
        return reject(new TypeError('循环引用'))
    }
    let called
    //  2.3.3 if x is an object or function
    if (x !== null && typeof x === 'object' || typeof x === 'function' ){
        try {
            // 2.3.3.1 Let then be x.then.
            let then = x.then
            // 2.3.3.3 If then is a function，call it with x as this.
            if (typeof then === 'function') {
                // 2.3.3.3.1 If/when resolvePromise is called with a value y, run [[Resolve]](promise, y)
                then.call(x, y => {
                    // `2.3.3.3.3 If both resolvePromise and rejectPromise are called, or multiple calls to the same argument are made, the first call takes precedence, and any further calls are ignored.`
                    if (called) return
                    called = true
                    resolvePromise(promise2, y, resolve, reject)
                }, r => {
                    if (called) return
                    called = true
                    // 2.3.3.3.2 If/when rejectPromise is called with a reason r, reject promise with r.
                    reject(r)
                })
            }
        } catch (e) {
            // `2.3.3.3.4 If calling then throws an exception e，2.3.3.3.4.1 If resolvePromise or rejectPromise have been called, ignore it.`
            if (called) return
            called = true
            // 2.3.3.4 If calling then throws an exception e
            reject(e)
        }
    } else {
        // 2.3.4 If x is not an object or function, fulfill promise with x.
        resolve(x)
    }
}
复制代码

4、Promise.then 异步执行

实现代码如下：

class Promise () {
    then (onFulfilled, onRejected) {
        let promise2
        if (this.status === 'resolved') {
            promise2 = new Promise((resolve, reject) => {
                setTimeout(() => {
                    try {
                        let x = onFulfilled(this.value)
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                }, 0)
            })
        }
        if (this.status === 'rejected') {
            promise2 = new Promise((resolve, reject) => {
                setTimeout(() => {
                    try {
                        let x = onRejected(this.reason)
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                }. 0)
            })
        }
        if (this.status === 'pending') {
            promise2 = new Promise((resolve, reject) => {
                this.onResolvedCallbacks.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onFulfilled(this.value)
                            promiseResolve(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    }, 0)
                })
                this.onRejectedCallbacks.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onRejected(this.reason)
                            promiseResolve(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    }, 0)
                })
            })
        }
        return promise2
    }
}
复制代码

5、Promise.then 穿透

promise.then().then() 多次，都可以获取到最终结果，固当 then 参数 onFulfilled 为空时，需要自动 return value；当 onRejected 为空时，需要 return throw err。实现代码如下：

class Promise () {
    then (onFulfilled, onRejected) {
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => { return value }
        onRejected = typeof onRejected === 'function' ? onRejected : (err) => { throw err }
        // promise2省略...
    }
}
复制代码

三、其它方法实现

1、Promise.resolve

实现代码如下：

Promise.resolve = function (val) {
    return new Promise((resolve, reject) => {
        resolve(val)
    })
}
复制代码

2、Promise.reject

实现代码如下：

Promise.reject = function (val) {
    return new Promise((resolve, reject) => {
        reject(val)
    })
}
复制代码

3、Promise.all

实现代码如下：

Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let dataArr = []
        let count = 0
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(data => {
                dataArr[i] = data
                count++
                if (count === promises.lenth) {
                    resolve(dataArr)
                }
            }, reject)
        }
    })
}
复制代码

4、Promise.race

实现代码如下：

Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            promise[i].then(resolve, reject)
        }
    })
}
复制代码

5、Promise.promisify

实现代码如下：

Promise.promisify = function (fn) {
    return function (...args) {
        return new Promise((resolve, reject) => {
            fn(...args, (err, data) => {
                if (err) reject(err)
                resolve(data)
            })
        })
    }
}
复制代码

四、Promise 校验

要想验证自己实现的 Promise 是否符合 Promise A+ 规范，可以全局安装 promises-aplus-tests 工具包。

Adapters：

In order to test your promise library, you must expose a very minimal adapter interface. These are written as Node.js modules with a few well-known exports:

  • resolved(value): creates a promise that is resolved with value.
  • rejected(reason): creates a promise that is already rejected with reason.
  • deferred(): creates an object consisting of { promise, resolve, reject }

The resolved and rejected exports are actually optional, and will be automatically created by the test runner using deferred

resolved 和 rejected 是可选的，下面我们实现一下 deferred，实现代码如下：

Promise.deferred = function () {
    let dfd = {}
    dfd.promise = new Promise((resolve, reject) => {
        dfd.resolve = resolve
        dfd.reject = reject
    })
    return dfd
}
复制代码

到这里一切准备就绪，校验步骤如下：

npm install promises-aplus-tests -g
promises-aplus-tests ./Promise.js
复制代码

源码

好了，到这里全部代码都已呈现，赶快自己亲手试一下吧！???

weixin_33811539
关注
Promise的简单实现
08-11
在提供的标题"Promise的简单实现"中，我们可以理解为我们将讨论如何从零开始创建一个基础版本的Promise。这个实现可能不包含完整的API，但会涵盖Promise的核心概念和基本工作原理。 描述提到这是一个不含任何第三方...
你该知道的promise（1）：Promise/A+规范中英文对照翻译
衣乌安、随笔
09-21 1356
自 es6 推出promise以来，promise强大的异步处理功能被广大开发者认可并广泛使用，那么其实现逻辑真的都非常清楚吗？这里我断断续续花了几天的时间将Promises/A+ 规范结合自己的一丝丝理解和实践做了翻译，方便大家更加容易的来理解 promise 的真实情况。 1. Terminology（术语） 1.1. “promise” is an object or function with a then method whose behavior conforms to this specif
理解Promise (4)
weixin_30602505的博客
08-06 150
then 方法必须返回一个新的promise promise2 = promise1.then(onFulfilled, onRejected); 新的Promise 必须返回传递两个方法 onFulfilled, onRejected If either onFulfilled or onRejected returns a value x, run the ...
[译] Promise A+ 标准
weixin_34246551的博客
05-28 121
TL;DR 一个符合promise/A+规范的promise应该具备以下特征： 描述： 首先他是一个具有then方法的object或者function； 他只有三种状态，pending, fulfilled, rejected，只能是其中一种状态； pending变为fulfilled或者rejected后不能再转变为其他状态； fulfilled状态需要一个value作为异步操作的结果； r...
【手写 Promise 源码】第四篇 - 翻译并理解 Promise A+ 规范
BraveWangDev
01-27 678
本篇，翻译并理解了整个 Promise A+ 规范；接下来，将基于 Promise A+ 规范，继续对简版 Promise 代码功能进行完善；
基于PromisesA+规范手写Promise
qq_41339169的博客
01-10 642
一、什么是 promise ？ Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。 一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层层地嵌套回调函数。 // 回调
简单实现异步编程promise模式
09-03
本篇文章主要介绍了异步编程promise模式的简单实现，并对每一步进行了分析,需要的朋友可以参考下
myPromise:简易Promise实现
05-18
myPromise简易Promise实现核心原理为了方便描述说明，给三种promise起个名字最开始的定义的promise，我们称呼为promiseSource原型上的then方法，执行结果是promise，我们称呼为promiseThenthen方法传入的函数A，函数...
nodejs中简单实现Javascript Promise机制的实例
10-25
本文将详细介绍如何在Node.js中通过代码示例简单实现Promise/A+规范。 首先，我们需要理解Promise/A+规范的核心内容。Promise/A+规范是一份为JavaScript中的Promise定义实现的行为规范，该规范由一系列具体的要求和...
promise实现原理
最新发布
11-13
Promise 是 JavaScript 中用于异步编程的核心机制，它允许开发者以一种链式调用的方式来处理复杂的异步流程。...在实践中，我们可以不断优化和完善这个简单的实现，以接近浏览器内置Promise的行为。
（promise-polyfill）手动实现一个符合Promises/A+规范的promise， 并添加Promise的常用方法
weixin_40870788的博客
01-15 855
/* Promises/A+ specification */ // 1. Terminology // 1.1. “promise” is an object or function with a then method whose behavior conforms to this specification. // 1.2. “thenable” is an object or functi...
Promises A+规范原文解读 + es6实现（附详细注释）
weixin_33774615的博客
03-01 374
英文官方文档原文：https://promisesaplus.com/ 前言 写本文的目的，是为了更好的理解promise，通过解读翻译原文，逐行解析原文通过代码一行一行实现。希望通过这篇文章，让我们能对promise有更深入的了解。 首先介绍promises是什么，英文的字面意思是“承诺”的意思，接下来promises翻译我没有用承诺...
Guzzle/promises源码解读
书山路遥
01-31 1177
最近在读guzzle/promise的源码，觉得有点绕，所以这里记录一下。 promise介绍 promise是一个异步操作的标准，它规定了应当如何写一系列相关的异步操作，主要目的是规范化异步操作，避免大量的异步操作导致的回调地域。 Guzzle中的promise promise是如何规范异步操作的 异步操作的状态只有三种：pending-等待，fulfilled-成功，rejected-失败 异步状态的变化只有两种：pending->fullfilled，pending->rejecte.
转载一篇文章，学习promise不要看其他杂七杂八的资料，那些全是辣鸡，只会把人搞糊涂！！！
廿四桥明月夜的博客
04-08 392
还可以看MDN中对Promise的讲解原文链接：https://promisesaplus.com/#point-43An open standard for sound, interoperable JavaScript promises—by implementers, for implementers.A promise represents the eventual result of a...
关于promise的一些总结
sinat_32206135的博客
08-30 521
作为前端开发人员，对于promise应该都是不陌生,基本上都有过，new promise, 然后.then, 原型里也提供了一些方案，race, all等等。。。对于解决同步的问题可谓是十分方便。然而,前段时间面试: “知道promise吗”， “知道”, “那你说说什么是promise”, “promise就是解决异步操作的一种方案,避免的函数回调”, “嗯,那还有呢,具体怎么实现的呢” “em...
58同城python_Python实战计划爬虫作业第一周作业:爬58同城
weixin_39982017的博客
12-15 312
作业要求：作业要求1.1作业要求2作业要求更改说明：由于58同城页面改版，二手商品的个人卖家均改为了“转转”，因此，本次爬虫作业，无法屏蔽转转卖家，而是直接从转转卖家的页面爬取信息。我的代码from bs4 import BeautifulSoupimport requestsimport timeimport os'''本作业是完成爬取http://bj.58.com/shouji上的商品信息,...
Promise使用经验
我只是来看看
07-27 1031
ES6中，promise是经常使用的对象。 通过promise实例，可以实现对异步代码的封装，保证当异步代码执行完成后再执行后续处理代码。 Promise的基本使用 resolve函数的结果可以通过then()方法接收，reject函数的结果可以被catch()方法接收 valid(){ return new Promise((resolve...
浅析JavaScript Promise简易实现原理
资源摘要信息:"在本资源中，我们将探讨如何用JavaScript实现Promise对象的一个简化版本。Promise是ES6引入的一个对象，用于在处理异步操作时提供一个更加优雅的解决方案。它代表了一个尚未完成但预期将来会完成的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值