js手写Promise（下）

目录

  • resolve与reject的调用时机
    • 封装优化
  • 回调返回Promise
    • isPromise
    • 手动调用then
  • 微队列
  • catch
  • resolve
  • reject
  • all
    • 传入的序列为空
    • 传入的值非Promise
  • race
  • 完整的Promise代码

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

resolve与reject的调用时机

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

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

    #run() {if (this.#state === MyPromise.#PENDING) returnwhile (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) returnwhile (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 : rejectsettled(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 : rejectsettled(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 : rejectsettled(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 = 0for (const item of promises) {i++}if (i === 0) resolve([])})
}

传入的值非Promise

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

static all(promises) {return new MyPromise((resolve, reject) => {let i = 0for (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 = 0let result = []let fulfilled = 0for (const item of promises) {let index = ii++MyPromise.resolve(item).then((data) => {result[index] = datafulfilled++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 = 0for (const item of promises) {i++Promise.resolve(item).then(resolve, reject)}if (i === 0) resolve([])})
}

完整的Promise代码

class MyPromise {#state = "pending"#value = nullstatic #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 = 0let result = []let fulfilled = 0for (const item of promises) {let index = ii++MyPromise.resolve(item).then((data) => {result[index] = datafulfilled++if (fulfilled === i) resolve(result)}, reject)}if (i === 0) resolve([])})}static race(promises) {return new MyPromise((resolve, reject) => {let i = 0for (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) returnthis.#state = statethis.#value = valuethis.#run()}#handlersPush(onFulfilled, onRejected, resolve, reject) {this.#handlers.push({onFulfilled,onRejected,resolve,reject})}#run() {if (this.#state === MyPromise.#PENDING) returnwhile (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 : rejectsettled(this.#value)} else {try {const data = callback(this.#value)if (MyPromise.#isPromise(data)) data.then(resolve, reject)else resolve(data)} catch (error) {reject(error)}}})}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/461338.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

戴上HUAWEI WATCH GT 4，解锁龙年新玩法

戴上HUAWEI WATCH GT 4，解锁龙年新玩法

春节将至，华为WATCH GT 4作为一款颜值和实力并存的手表，能为节日增添了不少趣味和便利。无论你是钟情于龙年表盘或定制属于自己的表盘，还是过年用来抢红包或远程操控手机拍全家福等等，它都能成为你的“玩伴”。接下来，…
阅读更多...
【C语言】模拟实现库函数qsort

【C语言】模拟实现库函数qsort

qsort的头文件是stdlib.h 他的四个参数分别是要进行排序的数组base的首地址，base数组的元素个数，每个元素的大小，以及一个函数指针，这个函数指针指向了一个函数，这个函数的参数是两个void*类型的指针，返回类…
阅读更多...
容斥原理基础

容斥原理基础

文章目录 容斥原理的引入从集合的角度考虑推广例子不被2、3、5整除的数错排问题求不定方程的解Devu和鲜花 容斥原理的引入 从一个小学奥数问题引入： 一个班级有50人 喜欢语文的人有20人 喜欢数学的人有30人 同时喜欢语文数学的人有10人。 问题： 两门都不…
阅读更多...
nodeJS 的 npm 设置国内高速镜像之淘宝镜像的方法

nodeJS 的 npm 设置国内高速镜像之淘宝镜像的方法

1、我们知道 nodeJS 是老外搞出来的，服务器放在了国外，国内的小朋友访问起来会比较慢，阿里巴巴的淘宝给出了有力支持，现在我们就将 nodeJS 的镜像地址切换为国内的淘宝镜像。 2、查看当前的镜像地址： npm get registr…
阅读更多...
百家cms代审

百家cms代审

环境搭建 源码链接如下所示 https://gitee.com/openbaijia/baijiacms 安装至本地后 直接解压到phpstudy的www目录下即可 接下来去创建一个数据库用于存储CMS信息。（在Mysql命令行中执行） 接下来访问CMS，会默认跳转至安装界面 数据库名称和…
阅读更多...
基于 Python 的漏洞扫描系统，附源码

基于 Python 的漏洞扫描系统，附源码

博主介绍：✌程序员徐师兄、7年大厂程序员经历。全网粉丝12W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…
阅读更多...
学习笔记——ENM模拟

学习笔记——ENM模拟

学习笔记——ENM模拟 文章目录 前言一、文献一1. 材料与方法1.1. 大致概念1.2. 生态模型的构建1.2.1. 数据来源：1.2.2. 数据处理：1.2.3. 模型参数优化： 1.3. 适生情况预测1.3.1. 预测模型构建1.3.2. 适生区划分 1.4. 模型的评估与验证 2. 结果…
阅读更多...
Redis事务和Redis管道

Redis事务和Redis管道

文章目录 1.Redis事务1.1 Redis事务是什么，能干嘛？1.2 Redis事务和数据库事务的差异1.3 Redis事务的相关命令 2.Redis管道2.1 Redis管道是什么2.2 管道与原生批量命令对比2.3 管道与事务对比2.4 使用管道注意事项 1.Redis事务 1.1 Redis事务是什么&…
阅读更多...
Kubernetes基础(十四)-Cluster Autoscaler

Kubernetes基础(十四)-Cluster Autoscaler

Kubernetes 给出的解决方案就是：自动伸缩（auto-scaling），通过自动伸缩组件之间的配合，可以 7*24 小时的监控着k8s集群，动态变化负载，以适应用户需求。 1 自动伸缩组件 1.1 自动伸缩类型 1.1.…
阅读更多...
构建中国人自己的私人GPT—支持中文

构建中国人自己的私人GPT—支持中文

上一篇已经讲解了如何构建自己的私人GPT，这一篇主要讲如何让GPT支持中文。 privateGPT 本地部署目前只支持基于llama.cpp 的 gguf格式模型，GGUF 是 llama.cpp 团队于 2023 年 8 月 21 日推出的一种新格式。它是 GGML 的替代品，llama.cpp 不再…
阅读更多...
Octave实现位置式PID算法

Octave实现位置式PID算法

由于Matlab不让用，只能“你不让爷用，爷就用别的”，选择开源的Octave以及scilab进行相关领域的学习。Octave的代码和Matlab几乎是100%相同的，只有一些专用的包的函数，可能有些还没来得及写，或者有些差异。但…
阅读更多...
测试管理_利用python连接禅道数据库并自动统计bug数据到钉钉群

测试管理_利用python连接禅道数据库并自动统计bug数据到钉钉群

测试管理_利用python连接禅道数据库并统计bug数据到钉钉 这篇不多赘述，直接上代码文件。 另文章基础参考博文：参考博文 加以我自己的需求优化而成。 统计的前提 以下代码统计的前提是禅道的提bug流程应规范化 bug未解决不删除bug未关闭不删除 db_…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023