手写Promise方法（直击Promise A+规范）-六虎

开启成长之旅！这是我参加「日新计划 12 月更文挑战」的第4天，点击检查活动详情

前语：大家好，我是前端獭子。高效优雅是我的创造方式。学习是一个渐进的过程，要把知识串联起来才能处理某一方面的问题。

Promise 结构函数

咱们先来写 Promise 结构函数的特点和值，以及处理new Promise()时会传入的两个回调函数。如下：

class myPromise {
    constructor(func) {
        this.state = 'pending' // Promise状况
        this.value = undefined // 成功的值
        this.reason = undefined // 过错的值
        this.resolveCallbacks = [] // 搜集处理回调函数
        this.rejectCallbacks = [] // 搜集过错回调函数
        try { // 对传入的函数进行try...catch...做容错处理
            func(this.resolve, this.reject) // 履行传入的两个回调函数
        } catch (e) {
            this.reject(e)
        }
    }
}

三个状况（pending、rejected和fulfilled）

pending：待定状况。待定 Promise 。只要在then办法履行后才会保持此状况。

rejected：回绝状况。停止 Promise 。只要在reject办法履行后才会由 pending 更改为此状况。

fulfilled：处理状况。停止 Promise 。只要在resolve办法履行后才会由 pending 更改为此状况。

留意：其间只要 pedding 状况能够变更为 rejected 或 fulfilled 。rejected 或 fulfilled 不能更改其他任何状况。

三个办法（resolve、reject和then）

`resolve`办法完成关键

状况由pending为fulfilled。
resolve办法传入的value参数赋值给this.value
按顺序履行resolveCallbacks里边一切处理回调函数
使用call办法将处理回调函数内部的 this 绑定为undefined

坑点 1：resolve办法内部 this 指向会丢掉，从而形成this.value丢掉。

处理办法：咱们将resolve办法界说为箭头函数。在结构函数履行后，箭头函数能够绑定实例目标的 this 指向。

// 2.1. Promise 状况
resolve = (value) => { // 在履行结构函数时内部的this通过箭头函数绑定实例目标
    if (this.state === 'pending') {
        this.state = 'fulfilled' // 第一点
        this.value = value // 第二点
        while (this.resolveCallbacks.length > 0) { // 第三点
            this.resolveCallbacks.shift().call(undefined) // 第四点
        }
    }
}

`reject`办法完成关键

状况由pending为rejected
reject办法传入的reason参数赋值给this.reason
按顺序履行rejectCallbacks里边一切回绝回调函数
使用call办法将回绝回调函数内部的 this 绑定为undefined

坑点 1： reject 办法内部 this 指向会丢掉，从而形成this.reason丢掉。

处理办法：咱们将reject办法界说为箭头函数。在结构函数履行后，箭头函数能够绑定实例目标的 this 指向。

// 2.1. Promise 状况
reject = (reason) => { // 在履行结构函数时内部的this通过箭头函数绑定实例目标
    if (this.state === 'pending') {
        this.state = 'rejected' // 第一点
        this.reason = reason // 第二点
        while (this.rejectCallbacks.length > 0) {  // 第三点
            this.rejectCallbacks.shift().call(undefined) // 第四点
        }
    }
}

`then`办法完成关键

判别then办法的两个参数onRejected和onFulfilled是否为function。

1.1 onRejected和onFulfilled都是function，持续履行下一步。

1.2 onRejected不是function，将onRejected赋值为箭头函数，参数为reason履行throw reason

1.3 onFulfilled不是function，将onFulfilled赋值为箭头函数，参数为value履行return value
当时Promise状况为rejected：

2.1 onRejected办法传入this.reason参数，异步履行。

2.2 对履行的onRejected办法做容错处理，catch过错作为reject办法参数履行。
当时Promise状况为fulfilled：

3.1 onFulfilled办法传入this.value参数，异步履行。

3.2 对履行的onFulfilled办法做容错处理，catch过错作为reject办法参数履行。
当时Promise状况为pending：

4.1 搜集onFulfilled和onRejected两个回调函数分别push给resolveCallbacks和rejectCallbacks。

4.2 搜集的回调函数相同如上所述，先做异步履行再做容错处理。
返回一个 Promise 实例目标。

// 2.2. then 办法
then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value // 第一点 
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason } // 第一点 
    const p2 = new myPromise((resolve, reject) => {
        if (this.state === 'rejected') { // 第二点
            queueMicrotask(() => {
                try {
                    onRejected(this.reason)
                } catch (e) {
                    reject(e)
                }
            })
        } else if (this.state === 'fulfilled') { // 第三点
            queueMicrotask(() => {
                try {
                    onFulfilled(this.value)
                } catch (e) {
                    reject(e)
                }
            })
        } else if (this.state === 'pending') { // 第四点
            this.resolveCallbacks.push(() => {
                queueMicrotask(() => {
                    try {
                        onFulfilled(this.value)
                    } catch (e) {
                        reject(e)
                    }
                })
            })
            this.rejectCallbacks.push(() => {
                queueMicrotask(() => {
                    try {
                        onRejected(this.reason)
                    } catch (e) {
                        reject(e)
                    }
                })
            })
        }
    })
    return p2 // 第五点
}

Promise 处理程序（resolvePromise办法）

旁白：其实这个处理程序才是完成核心Promise最难的一部分。因为Promise A+标准对于这部分说的比较绕。

咱们直击其完成关键，能跑通一切官方用例就行。如下：

假如x和promise引证同一个目标：

1.1 调用reject办法，其参数为new TypeError()
假如x是一个promise或x是一个目标或函数：

2.1 界说一个called变量用于记载then.call参数中两个回调函数的调用状况。

2.2 界说一个then变量等于x.then

2.3 then是一个函数。使用call办法绑定x目标，传入处理回调函数和回绝回调函数作为参数。同时使用called变量记载then.call参数中两个回调函数的调用状况。

2.4 then不是函数。调用resolve办法处理Promise，其参数为x

2.5 对以上 2.2 检索特点和 2.3 调用办法的操作放在一同做容错处理。catch过错作为reject办法参数履行。相同使用called变量记载then.call参数中两个回调函数的调用状况。
假如x都没有呈现以上两种状况：

调用resolve办法处理Promise，其参数为x

// 2.3 Promise处理程序
function resolvePromise(p2, x, resolve, reject) {
    if (x === p2) {
        // 2.3.1 假如promise和x引证同一个目标
        reject(new TypeError())
    } else if ((x !== null && typeof x === 'object') || typeof x === 'function') {
        // 2.3.2 假如x是一个promise
        // 2.3.3 假如x是一个目标或函数
        let called
        try {
            let then = x.then // 检索x.then特点，做容错处理
            if (typeof then === 'function') {
                then.call(x, // 使用call绑定会当即履行then办法，做容错处理
                    (y) => { // y也可能是一个Promise，递归调用直到y被resolve或reject
                        if (called) { return }
                        called = true
                        resolvePromise(p2, 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)
    }
}

called变量的作用：记载then.call传入参数（两个回调函数）的调用状况。

根据Promise A+ 2.3.3.3.3标准：两个参数作为函数第一次调用优先，今后的调用都会被疏忽。

因而咱们在以上两个回调函数中这样处理：

现已调用过一次：此刻called现已为true，直接return疏忽
首次调用：此刻called为undefined，调用后called设为true

留意：2.3 中的catch可能会发生（两个回调函数）现已调用但呈现过错的状况，因而相同按上述阐明处理。

运行官方测验用例

在完成上面的代码后，咱们最终整合如下：

class myPromise {
    constructor(func) {
        this.state = 'pending'
        this.value = undefined
        this.reason = undefined
        this.resolveCallbacks = []
        this.rejectCallbacks = []
        try {
            func(this.resolve, this.reject)
        } catch (e) {
            this.reject(e)
        }
    }
    resolve = (value) => {
        if (this.state === 'pending') {
            this.state = 'fulfilled'
            this.value = value
            while (this.resolveCallbacks.length > 0) {
                this.resolveCallbacks.shift().call(undefined)
            }
        }
    }
    reject = (reason) => {
        if (this.state === 'pending') {
            this.state = 'rejected'
            this.reason = reason
            while (this.rejectCallbacks.length > 0) {
                this.rejectCallbacks.shift().call(undefined)
            }
        }
    }
    then(onFulfilled, onRejected) {
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value
        onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }
        const p2 = new myPromise((resolve, reject) => {
            if (this.state === 'rejected') {
                queueMicrotask(() => {
                    try {
                        const x = onRejected(this.reason)
                        resolvePromise(p2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                })
            } else if (this.state === 'fulfilled') {
                queueMicrotask(() => {
                    try {
                        const x = onFulfilled(this.value)
                        resolvePromise(p2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                })
            } else if (this.state === 'pending') {
                this.resolveCallbacks.push(() => {
                    queueMicrotask(() => {
                        try {
                            const x = onFulfilled(this.value)
                            resolvePromise(p2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    })
                })
                this.rejectCallbacks.push(() => {
                    queueMicrotask(() => {
                        try {
                            const x = onRejected(this.reason)
                            resolvePromise(p2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    })
                })
            }
        })
        return p2
    }
}
function resolvePromise(p2, x, resolve, reject) {
    if (x === p2) {
        reject(new TypeError())
    } else if ((x !== null && typeof x === 'object') || typeof x === 'function') {
        let called
        try {
            let then = x.then
            if (typeof then === 'function') {
                then.call(x,
                    (y) => {
                        if (called) { return }
                        called = true
                        resolvePromise(p2, 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)
    }
}
// 新参加部分
myPromise.deferred = function () {
    let result = {};
    result.promise = new myPromise((resolve, reject) => {
        result.resolve = resolve;
        result.reject = reject;
    });
    return result;
}
module.exports = myPromise;

新建一个文件夹，放入咱们的 myPromise.js 并在终端履行以下命令：

npm init -y
npm install promises-aplus-tests

package.json 文件修正如下：

{
  "name": "promise",
  "version": "1.0.0",
  "description": "",
  "main": "myPromise.js",
  "scripts": {
    "test": "promises-aplus-tests myPromise"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "promises-aplus-tests": "^2.1.2"
  }
}

开端测验咱们的手写 Promise，在终端履行以下命令即可：

npm test

Promise 其他办法弥补

容错处理办法

Promise.prototype.catch()

catch(onRejected) {
    return this.then(undefined, onRejected)
}

Promise.prototype.finally()

finally(callback) {
    return this.then(
        value => {
            return myPromise.resolve(callback()).then(() => value)
        },
        reason => {
            return myPromise.resolve(callback()).then(() => { throw reason })
        }
    )
}

静态办法

Promise.resolve()

static resolve(value) {
    if (value instanceof myPromise) {
        return value  // 传入的参数为Promise实例目标，直接返回
    } else {
        return new myPromise((resolve, reject) => {
            resolve(value)
        })
    }
}

Promise.reject()

static reject(reason) {
    return new myPromise((resolve, reject) => {
        reject(reason)
    })
}

Promise.all()

static all(promises) {
    return new myPromise((resolve, reject) => {
        let countPromise = 0 // 记载传入参数是否为Promise的次数
        let countResolve = 0 // 记载数组中每个Promise被处理次数
        let result = [] // 存储每个Promise的处理或回绝的值
        if (promises.length === 0) { // 传入的参数是一个空的可迭代目标
            resolve(promises)
        }
        promises.forEach((element, index) => {
            if (element instanceof myPromise === false) { // 传入的参数不包含任何 promise
                ++countPromise
                if (countPromise === promises.length) {
                    queueMicrotask(() => {
                        resolve(promises)
                    })
                }
            } else {
                element.then(
                    value => {
                        ++countResolve
                        result[index] = value
                        if (countResolve === promises.length) {
                            resolve(result)
                        }
                    },
                    reason => {
                        reject(reason)
                    }
                )
            }
        })
    })
}

Promise.race()

static race(promises) {
    return new myPromise((resolve, reject) => {
        if (promises.length !== 0) {
            promises.forEach(element => {
                if (element instanceof myPromise === true)
                    element.then(
                        value => {
                            resolve(value)
                        },
                        reason => {
                            reject(reason)
                        }
                    )
            })
        }
    })
}

上述一切完成代码已放置我的Github库房。可自行下载测验，做更多优化。

[ github.com/chscript/my… ]

参考

[ [译]Promise/A+ 标准 ] [ zhuanlan.zhihu.com/p/143204897 ]

[ MDN Promise ] [ developer.mozilla.org/zh-CN/docs/… ]

手写Promise方法（直击Promise A+规范）

Promise 结构函数

三个状况（pending、rejected和fulfilled）

三个办法（resolve、reject和then）

resolve办法完成关键

reject办法完成关键

then办法完成关键

Promise 处理程序（resolvePromise办法）

运行官方测验用例

Promise 其他办法弥补

容错处理办法

静态办法

相关文章

基于PaddlePaddle对CIFAR-100数据集在简易CNN（LeNet-5修改）和简易DNN的效果对比

再看一次HTTP缓存，下次一定会！

Android搞机之编译Android13并在模拟器上运行

一文深入了解CSRF漏洞

作者信息

`resolve`办法完成关键

`reject`办法完成关键

`then`办法完成关键