js手写Promise（下）

已于 2024-02-08 15:26:25 修改
阅读量1k 收藏 18
点赞数 27
分类专栏： 前端 文章标签： javascript 前端 es6 开发语言
于 2024-02-08 15:17:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46244470/article/details/136078104
版权

目录

如果没有看过上半部分的铁铁可以看看这篇文章
js手写Promise（上）

resolve与reject的调用时机

在Promise的then中，我们需要解决两个问题，一个是onFulfilled和onRejected什么时候调用，一个是resolve和reject什么时候调用，第一个问题我们在上篇文章中解决了，现在我们需要解决第二个问题
具体而言，什么时候调用resolve和reject分为两种情况

  1. 传入的参数不是函数
    因为我们已经提前将resolve和reject传递到了handlers中，所以我们可以在run中处理相关逻辑

    #run() {
	if (this.#state === MyPromise.#PENDING) return
 	while (this.#handlers.length > 0) {
    	const handler = this.#handlers.shift()
    	if (this.#state === MyPromise.#FULFILLED) {
        	if (typeof handler.onFulfilled !== "function") {
            	handler.resolve(this.#value)
        	} else {
            	handler.onFulfilled(this.#value)
        	}
    	}
    	else if (this.#state === MyPromise.#REJECTED) {
        	if (typeof handler.onRejected !== "function") {
            	handler.reject(this.#value)
        	} else {
            	handler.onRejected(this.#value)
        	}
    	}
	}
}

    如果传入的参数不是函数的话，那then返回的Promise就穿透了，状态与调用then的Promise实例状态一致，如果调用then的实例状态为fulfilled则then返回的实例就调用resolve，反之亦然

  2. 传入的参数是函数
    如果传入的参数是函数，我们就需要判断在执行函数的时候有没有报错，如果没有就代表函数执行成功，调用resolve，否则调用reject

    #run() {
if (this.#state === MyPromise.#PENDING) return
while (this.#handlers.length > 0) {
    const handler = this.#handlers.shift()
    if (this.#state === MyPromise.#FULFILLED) {
        if (typeof handler.onFulfilled !== "function") {
            handler.resolve(this.#value)
        } else {
            try {
                const data = handler.onFulfilled(this.#value)
                handler.resolve(data)
            } catch (error) {
                handler.reject(error)
            }
        }
    }
    else if (this.#state === MyPromise.#REJECTED) {
        if (typeof handler.onRejected !== "function") {
            handler.reject(this.#value)
        } else {
            try {
                const data = handler.onRejected(this.#value)
                handler.resolve(data)
            } catch (error) {
                handler.reject(error)
            }
        }
    }
}
}

封装优化

这样问题就解决了，但是我们发现函数中有许多重复代码，我们可以将这些代码封装成一个函数

#run() {
    if (this.#state === MyPromise.#PENDING) return
    while (this.#handlers.length > 0) {
        const handler = this.#handlers.shift()
        if (this.#state === MyPromise.#FULFILLED) {
            this.#runOne(handler.onFulfilled, handler.resolve, handler.reject)
        }
        else if (this.#state === MyPromise.#REJECTED) {
            this.#runOne(handler.onRejected, handler.resolve, handler.reject)
        }
    }
}
#runOne(callback, resolve, reject) {
    if (typeof callback !== "function") {
        const settled = this.#state === MyPromise.#FULFILLED ? resolve : reject
        settled(this.#value)
    } else {
        try {
            const data = callback(this.#value)
            resolve(data)
        } catch (error) {
            reject(error)
        }
    }
}

回调返回Promise

这种情况比较特殊，如果返回的结果是一个Promise的话调用resolve还是reject由这个新的Promise实例决定，我们只需要手动调用它的then方法

isPromise

在调用它的then方法之前我们还需要判断返回的结果是不是一个Promise，PromiseA+规范规定，对象或是函数，如果存在then方法就是Promise，所以我们可以写出这么一个辅助函数

class MyPromise {
    static #isPromise(promise) {
        if (typeof promise === "function" || typeof promise === "object") {
            if (typeof promise.then === "function") return true
        }
        return false
    }
}

手动调用then

现在我们就可以手动调用then方法了

#runOne(callback, resolve, reject) {
    if (typeof callback !== "function") {
        const settled = this.#state === MyPromise.#FULFILLED ? resolve : reject
        settled(this.#value)
    } else {
        try {
            const data = callback(this.#value)
            if (MyPromise.#isPromise(data)) data.then(resolve, reject)
            else resolve(data)
        } catch (error) {
            reject(error)
        }
    }
}

微队列

至此我们的then方式实现的差不多了，还有一个小细节就是，then方法里的任务是放入微任务队列里执行的，所以我们还需要封装一个函数用于将任务放入微任务队列

#runOne(callback, resolve, reject) {
    MyPromise.#mircoTask(() => {
        if (typeof callback !== "function") {
            const settled = this.#state === MyPromise.#FULFILLED ? resolve : reject
            settled(this.#value)
        } else {
            try {
                const data = callback(this.#value)
                if (MyPromise.#isPromise(data)) data.then(resolve, reject)
                else resolve(data)
            } catch (error) {
                reject(error)
            }
        }
    })
}
static #mircoTask(callback) {
    if (typeof window === "object" && MutationObserver) {
        const observer = new MutationObserver(callback)
        const p = document.createElement('p')
        observer.observe(p, { childList: true })
        p.innerText = '1'
    } else if (typeof global === "object" && process) {
        process.nextTick(callback)
    } else {
        setTimeout(callback, 0)
    }
}

如果想要把一个任务放入微任务队列需要根据环境分类处理，具体来说有以下几种情况

  1. node环境
    node环境里有一个api叫process，process.nextTick能将一个任务放入微任务队列中
  2. 浏览器环境
    浏览器中有一个观察器叫MutationObserver，它用于观察一个元素是否变化，如果变化了就将预先设定好的函数放入微任务队列中
  3. 其他环境
    如果宿主环境既不是node也不是浏览器，或者不支持MutationObserver和process，那么就只能通过setTimeOut来模拟微队列了

最后我们来测试一下我们的then方法

let p1 = new MyPromise((resolve, reject) => {
    reject(123)
})
p1.then((res) => {
    console.log("1resolve" + res)
}, (err) => {
    console.log("1reject" + err)
})
p1.then((res) => {
    console.log("2resolve" + res)
}, (err) => {
    return new MyPromise((resolve, reject) => {
        resolve(err)
    })
}).then((res) => {
    console.log("3resolve" + res)
}, (err) => {
    console.log("3reject" + err)
})

结果

catch

catch的实现与then类似，都是向handlers里放入回调，只不过catch放入的回调中onFulfilled为undefined

class MyPromise {
    catch(onRejected) {
        return new MyPromise((resolve, reject) => {
            this.#handlersPush(undefined, onRejected, resolve, reject)
            this.#run()
        })
    }
}

我们来测试一下

let p1 = new MyPromise((resolve, reject) => {
    reject(123)
})
p1.catch((err) => {
    console.log(err)
})
let p2 = new MyPromise((resolve, reject) => {
    reject(456)
})
p2.then(null, (err) => {
    return new MyPromise((resolve, reject) => {
        reject(789)
    })
}).catch(err => {
    console.log(err)
})

结果

resolve

这里我们要实现的resolve是Promise的类方法，回忆我们之前使用Promise的经验，如果resolve中传递的不是Promise，那么Promise会将其包装成一个Promise返回，如果传入的是一个Promise，那么会调用它的then方法，知道了这些我们的代码就可以这么写

static resolve(value) {
    return new MyPromise((resolve, reject) => {
        if (MyPromise.#isPromise(value)) value.then(resolve, reject)
        else resolve(value)
    })
}

我们来测试一下

MyPromise.resolve(1).then(console.log)
MyPromise.resolve(new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve(2)
    }, 1000)
})).then(console.log)

结果

reject

reject和resolve类似，只不过resolve是调用resolve方法，而reject是调用reject方法

static reject(reason) {
    return new MyPromise((resolve, reject) => {
        if (MyPromise.#isPromise(reason)) reason.then(resolve, reject)
        else reject(reason)
    })
}

因为和resolve类似，所以我就不测试了

all

all也是Promise的一个类方法，我们需要向all里传入一个参数，表示为一系列Promise的序列，可以是set，也可以是数组，all也是返回一个Promise，知道了这些后我们就能将all的声明写出来

static all(promises) {
    return new MyPromise((resolve, reject) => {
        
    })
}

那么现在的问题就是我们什么时候调用resolve和reject

传入的序列为空

如果传入的序列为空就没什么好说的了，直接resolve([])就行，那怎么判断序列是否为空呢，定义一个长度变量，我们可以通过for...of来遍历序列，每遍历一次长度变量自增，遍历完后如果长度变量依旧为0表示序列为空

static all(promises) {
    return new MyPromise((resolve, reject) => {
        let i = 0
        for (const item of promises) {
            i++
        }
        if (i === 0) resolve([])
    })
}

传入的值非Promise

因为我们并不确定拿到的东西是否是一个Promise，所以我们需要使用Promise.resolve将它包裹起来

static all(promises) {
    return new MyPromise((resolve, reject) => {
        let i = 0
        for (const item of promises) {
            i++
            MyPromise.resolve(item).then()
        }
        if (i === 0) resolve([])
    })
}

根据Promise中all的逻辑，如果序列中有一个失败，那all返回的Promise的状态就是失败
如果当前Promise的结果为成功的话则需要做两件事，一件事汇总结果，一件事判断Promise是否全部完成
因为all要求返回的结果与传递的序列顺序要求一致，所以在汇总结果时不能使用push，而是应该使用下标
我们每完成一个Promise就记一次数，只要这个数字和我们之前统计的长度变量相同，就代表着这一串Promise执行结束，可以resolve了
所以我们的代码可以写成这个样子

static all(promises) {
    return new MyPromise((resolve, reject) => {
        let i = 0
        let result = []
        let fulfilled = 0
        for (const item of promises) {
            let index = i
            i++
            MyPromise.resolve(item).then((data) => {
                result[index] = data
                fulfilled++
                if (fulfilled === i) resolve(result)
            }, reject)
        }
        if (i === 0) resolve([])
    })
}

我们来测试一下

let p1 = new MyPromise((resolve, reject) => {
    resolve(1)
})
let p2 = new MyPromise((resolve, reject) => {
    reject(2)
})
MyPromise.all([]).then(console.log)
MyPromise.all([p1, p2]).then(console.log).catch(err => {
    console.log("err" + err)
})
MyPromise.all([p1, 2, 3, 4]).then(console.log)

结果

race

race和all都是Promise的类方法，实现思路也是大同小异，all是等待全部Promise的结果，race是只要有一个Promise有结果就行，代码如下

static race(promises) {
    return new MyPromise((resolve, reject) => {
        let i = 0
        for (const item of promises) {
            i++
            Promise.resolve(item).then(resolve, reject)
        }
        if (i === 0) resolve([])
    })
}

完整的Promise代码

class MyPromise {
    #state = "pending"
    #value = null
    static #PENDING = "pending"
    static #FULFILLED = "fulfilled"
    static #REJECTED = "rejected"
    #handlers = []
    constructor(executor) {
        const resolve = (data) => {
            this.#changeState(MyPromise.#FULFILLED, data)
        }
        const reject = (reason) => {
            this.#changeState(MyPromise.#REJECTED, reason)
        }
        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }
    then(onFulfilled, onRejected) {
        return new MyPromise((resolve, reject) => {
            this.#handlersPush(onFulfilled, onRejected, resolve, reject)
            this.#run()
        })
    }
    catch(onRejected) {
        return new MyPromise((resolve, reject) => {
            this.#handlersPush(undefined, onRejected, resolve, reject)
            this.#run()
        })
    }
    static resolve(value) {
        return new MyPromise((resolve, reject) => {
            if (MyPromise.#isPromise(value)) value.then(resolve, reject)
            else resolve(value)
        })
    }
    static reject(reason) {
        return new MyPromise((resolve, reject) => {
            if (MyPromise.#isPromise(reason)) reason.then(resolve, reject)
            else reject(reason)
        })
    }
    static all(promises) {
        return new MyPromise((resolve, reject) => {
            let i = 0
            let result = []
            let fulfilled = 0
            for (const item of promises) {
                let index = i
                i++
                MyPromise.resolve(item).then((data) => {
                    result[index] = data
                    fulfilled++
                    if (fulfilled === i) resolve(result)
                }, reject)
            }
            if (i === 0) resolve([])
        })
    }
    static race(promises) {
        return new MyPromise((resolve, reject) => {
            let i = 0
            for (const item of promises) {
                i++
                Promise.resolve(item).then(resolve, reject)
            }
            if (i === 0) resolve([])
        })
    }
    static #mircoTask(callback) {
        if (typeof window === "object" && MutationObserver) {
            const observer = new MutationObserver(callback)
            const p = document.createElement('p')
            observer.observe(p, { childList: true })
            p.innerText = '1'
        } else if (typeof global === "object" && process) {
            process.nextTick(callback)
        } else {
            setTimeout(callback, 0)
        }
    }
    static #isPromise(promise) {
        if (typeof promise === "function" || typeof promise === "object") {
            if (typeof promise.then === "function") return true
        }
        return false
    }
    #changeState(state, value) {
        if (this.#state !== MyPromise.#PENDING) return
        this.#state = state
        this.#value = value
        this.#run()
    }
    #handlersPush(onFulfilled, onRejected, resolve, reject) {
        this.#handlers.push({
            onFulfilled,
            onRejected,
            resolve,
            reject
        })
    }
    #run() {
        if (this.#state === MyPromise.#PENDING) return
        while (this.#handlers.length > 0) {
            const handler = this.#handlers.shift()
            if (this.#state === MyPromise.#FULFILLED) {
                this.#runOne(handler.onFulfilled, handler.resolve, handler.reject)
            }
            else if (this.#state === MyPromise.#REJECTED) {
                this.#runOne(handler.onRejected, handler.resolve, handler.reject)
            }
        }
    }
    #runOne(callback, resolve, reject) {
        MyPromise.#mircoTask(() => {
            if (typeof callback !== "function") {
                const settled = this.#state === MyPromise.#FULFILLED ? resolve : reject
                settled(this.#value)
            } else {
                try {
                    const data = callback(this.#value)
                    if (MyPromise.#isPromise(data)) data.then(resolve, reject)
                    else resolve(data)
                } catch (error) {
                    reject(error)
                }
            }
        })
    }
}
法玛梅林
关注
  • 27
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS手写Promise源码
12-19
4、更好地使用第三方Promise库：手写Promise可以帮助我们更好地使用和理解第三方的Promise库，如Bluebird或q.js等。通过手动实现Promise，我们可以更好地理解这些库是如何实现Promise的，并更好地使用它
js代码-手写promise.all
07-16
// 这里将实现手写Promise.all的逻辑 }); } ``` 接下来，我们需要跟踪Promise的状态。我们可以创建一个计数器来记录已解析的Promise数量，以及一个存储结果的数组： ```javascript let resolvedCount = 0; let ...
【JavaScript】手写Promise
编码世界
05-15 4612
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
JS手写Promise（详细过程）
m0_56698268的博客
03-28 1942
手写Promise
Javascript 手写一个Promise
警警的博客
08-01 723
回调函数中嵌套回调）（1）对象的不受外界影响。Promisepending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。（2）。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为。如果改变已经发生了，你再对Promise。
js手写promise。
ranshakalove的博客
07-21 125
js手写promise。
js-手写Promise
qq_32644987的博客
06-12 1021
1、Promise 创建MyPromise.js文件，在里面进行MyPromise逻辑处理 我们先看原生Promise的使用： new Promise((resolve,reject) => { }) 有代码可以看出：原生Promise通过new创建Promise对象，然后传入两个函数resolve、reject参数用于后续执行； 好的，那我们从这方面开始手写MyPromise。 首先，需要通过new创建对象，那就需要在内部实现构造函数 其次构造函数需要传入两个函数作为执行者 Pormi
JS手写Promise.all方法
HaushoLin的博客
12-11 499
用JS手写Promise.all方法
js手写Promise.prototype.finally
Dou_Hua6的博客
03-08 563
实现 Promise.finally 前面的promise不管成功还是失败，都会走到finally中，并且finally之后，还可以继续then（说明它还是一个then方法是关键），并且会将初始的promise值原封不动的传递给后面的then.如果finally函数中有promise等异步任务，会等它们全部执行完毕，再结合之前的成功与否状态，返回值；finally里的函数，无论如何都会执行，并会把前面的值原封不动传递给下一个then方法中；
promise学习——js手写promise
老古懂的博客
01-04 2528
手写promise
JS手写 Promise.all
weixin_47192515的博客
09-02 188
js手写 Promise.all
js手写实现 Promise.race
Dou_Hua6的博客
03-12 418
【代码】js手写实现 Promise.race。
Promise_js手写promise_js手写Promise_手写Promise_JS手写Promise_
09-30
在本文中，我们将深入探讨如何使用原生JavaScript手写Promise。 首先，我们需要理解Promise的基本概念。Promise有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。每个Promise实例在其生命...
js-Promise：手写系列手写promise，vue ..
02-21
本文将深入探讨 Promise 的原理，并尝试手写一个简单的 Promise 实现，同时结合 Vue.js 的异步处理，帮助你更全面地理解这一重要概念。 ### 1. Promise 的基本概念 Promise 代表了一个异步操作的最终完成或失败，...
软件著作权申请教程（超详细）（2024新版）软著申请
最新发布
m0_75269526的博客
09-09 1280
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
JS都有哪些操作数组的方法
ggq53219的博客
09-04 572
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 516
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 982
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
hiprint打印/jsPDF使用/html2canvas
song854601134的博客
09-05 1320
hiprint
js 手写promise
09-02
当你需要手写一个 Promise 的时候，你可以按照以下步骤进行： 1. 创建 Promise 构造函数，并传入一个执行器函数作为参数： ```javascript function MyPromise(executor) { // TODO: 实现 Promise 的状态和值的存储...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值