【手写promise——基本功能、链式调用、promise.all、promise.race】

文章目录

  • 前言
  • 一、前置知识
  • 二、实现基本功能
  • 二、实现链式调用
  • 三、实现Promise.all
  • 四、实现Promise.race
  • 总结

前言

关于动机，无论是在工作还是面试中，都会遇到Promise的相关使用和原理，手写Promise也有助于学习设计模式以及代码设计。
本文主要介绍了如何使用自己的代码去实现Promise的一些功能。

以下是本篇文章正文内容

一、前置知识

手写之前，需要知道promise有哪些基本特性：

1、promise有三种状态：pending、fulfilled、rejected。

2、promise的默认状态是pending，状态流转有两种：pending—>fulfilled、pending—>rejected。
在这里插入图片描述

3、实例化Promise时，可以接收一个函数作为参数，这个函数有两个参数，分别是resolve、reject方法用于改变实例状态。并能够执行下一个then中的回调函数。
4、then方法中接收两个函数作为参数，第一个函数相当于执行上一个 promise 中执行 resolve 后对应的回调，第二个函数相当于执行上一个 promise 中执行 reject 后对应的回调。

// 1. 实例化 Promise 时
// 可以接收一个函数作为参数，这个函数可以接收到 resolve 和 reject 两个实例方法
// 用于更改当前实例的状态，并把它们接收到的参数传递给下一个 then 对应的参数中new Promise((resolve, reject) => {// resolve 和 reject 可以都执行，但都执行的意义不大，因为 promise 状态发生更改后，就不能在被更改resolve('ok');// reject('err');}).then((value) => {console.log("resolve callback = ", value); // 若执行 resolve，则 value = ok}, (reason) => {console.log("reject callback = ", reason); // 若执行 reject，则 value = err});

5、then操作后会返回一个新的Promise，且支持链式调用。

let promise = new Promise((resolve,reject) => {resolve(11)
})
const a = new Promise((resolve,reject) => {reject('ok')
})
promise.then(res => {console.log(res)return a
}).then(res => console.log(res))

6、Promise.all以数组的形式接收多个Promise，当所有Promise执行完成，且状态都为fulfilled时，返回执行成功的结果；有一个失败，则返回失败的结果。

7、Promise.race以数组的形式接收多个Promise，只要有一个Promise先执行成功，无论什么状态，都返回这个结果，给到下一个then中对应的回调。

二、实现基本功能

1、

  • new 操作
  • resolve、reject方法
  • then方法
// 定义三种状态
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';class Promise {constructor(executor) {// 1、默认状态 - PENDINGthis.status = PENDING;// 2、内部维护的变量值this.value = undefined;this.reason = undefined;try {executor(this.resolve.bind(this), this.reject.bind(this)) // 实例化传进来的函数会立即执行} catch(err) {this.reject(err)}}resolve(value) {if (this.status === PENDING) {this.value = value;this.status = FULFILLED;}}reject(reason) {if (this.status === PENDING) {this.reason = reason;this.status = REJECTED;}}then(onFulfilled, onRejected) {if (onFulfilled && this.status === FULFILLED) {let res = onFulfilled(this.value)this.resolvePromise(res, resolve, reject)}if (onRejected && this.status === REJECTED) {let res = onRejected(this.reason)this.resolvePromise(res, resolve, reject)}        }
}

通过以下代码自测：

new Promise((resolve,reject) => {resolve(1)
}).then(res=> {console.log(res) // 1
})

2、考虑异步的情况。
以上代码都是同步的，Promise实例化时传入了异步函数如setTimeout，在setTimeout中resolve，在下一个then的回调函数获取异步函数的状态呢？

我们可以使用回调队列缓存起来，等待执行：

// 定义三种状态
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';class Promise {constructor(executor) {// 1、默认状态 - PENDINGthis.status = PENDING;// 2、内部维护的变量值this.value = undefined;this.reason = undefined;this.onResolveCallBack = [];// 缓存 onResolve this.onRejectCallBack = [];// 缓存 onReject try {executor(this.resolve.bind(this), this.reject.bind(this)) // 实例化传进来的函数会立即执行} catch(err) {this.reject(err)}}resolve(value) {if (this.status === PENDING) {this.value = value;this.status = FULFILLED;// 遍历调用 onResolveCallBackthis.onResolveCallBack.forEach(fn => fn());}}reject(reason) {if (this.status === PENDING) {this.reason = reason;this.status = REJECTED;this.onResolveCallBack.forEach(fn => fn());}}then(onFulfilled, onRejected) {if (onFulfilled && this.status === FULFILLED) {let res = onFulfilled(this.value)this.resolvePromise(res, resolve, reject)}if (onRejected && this.status === REJECTED) {let res = onRejected(this.reason)this.resolvePromise(res, resolve, reject)}// 当前 promise 状态为 pending，把当前的 onResolve & onReject 缓存起来if (this.status === PENDING) {this.onResolveCallBack.push(() => {onResolve(this.value);});	this.onRejectCallBack.push(() => {onReject(this.value);});}       }
}

用以下代码测试通过：

 let p = new MyPromise((resolve, reject) => {setTimeout(()=>{resolve(1);},1000);}).then(value => {console.log('then resolve = ', value);}, reason => {console.log('then reject = ', reason);});
// then resolve = 1

二、实现链式调用

then(onFulfilled, onRejected) {return new Promise((resolve, reject) => { // 支持链式调用if (onFulfilled && this.status === FULFILLED) {let res = onFulfilled(this.value)resolve(res);}if (onRejected && this.status === REJECTED) {let res = onRejected(this.reason)resolve(res);}if (this.status === PENDING) {this.onResolvedCallbacks.push(() =>{let res = onFulfilled(this.value)resolve(res);})this.onRejectedCallbacks.push(() => {let res = onRejected(this.reason)resolve(res);})}})   }

测试用例：

let promise = new Promise((resolve,reject) => {resolve(1)
})
promise.then(res => {return 2 // 返回普通对象
}).then(res => console.log(res)) // 2

如果在then中返回的是普通对象，上述代码能满足，如果返回的是一个Promise，则还需要补充：

then(onFulfilled, onRejected) {return new Promise((resolve, reject) => { // 支持链式调用if (onFulfilled && this.status === FULFILLED) {let res = onFulfilled(this.value)this.resolvePromise(res, resolve, reject)}if (onRejected && this.status === REJECTED) {let res = onRejected(this.reason)this.resolvePromise(res, resolve, reject)}if (this.status === PENDING) {this.onResolvedCallbacks.push(() =>{let res = onFulfilled(this.value)this.resolvePromise(res, resolve, reject)})this.onRejectedCallbacks.push(() => {let res = onRejected(this.reason)this.resolvePromise(res, resolve, reject)})}})}resolvePromise(res, resolve, reject) {if(res instanceof Promise) { // 对then中返回Promise做处理res.then(resolve, reject)} else{// 普通值resolve(res)}}

测试用例：

let promise = new Promise((resolve,reject) => {resolve(11)
})
const a = new Promise((resolve,reject) => {reject('ok')
})
promise.then(res => {return a;
}).then(res => console.log(res)) // ok

三、实现Promise.all

由上述前置知识可知，Promise.all是全部成功才返回成功的结果，有一个失败就返回失败的结果：

Promise.all = function(arr) {return new Promise((resolve, reject) => {if (!Array.isArray(arr)) {return reject("参数必须为数组");}let successNum = 0; // 成功的Promise条数let resultArray = [];let totalNum = arr.length; // 总Promise数量let isFail = false;arr.forEach(item => {item.then(res => {successNum++;resultArray.push(res);if (successNum === totalNum) { // 说明是全部成功return resolve(resultArray)}}, err => {if (!isFail) reject(err)isFail = true;})});       })
}

测试用例：

function wait500(input) {return new Promise((resolve, reject) => {setTimeout(()=> {resolve(500)}, 500)})
}
function wait1000(input) {return new Promise((resolve, reject) => {setTimeout(()=> {resolve(1000)}, 1000)})
}
// 全部执行完成之后回调
Promise.all([wait1000(), wait500()]).then(result => {console.log('all end', result)
}, err => {console.log('fafaf', err)
}) // 'all end [500, 1000]'

四、实现Promise.race

由上述前置知识可知，Promise.race是有一个promise先执行成功，无论什么状态，都返回这个结果：

Promise.race = function(arr) {return new Promise((resolve, reject) => {if (!Array.isArray(arr)) {return reject("参数必须为数组");}arr.forEach(item => {item.then(res => {return resolve(res); // 状态不可逆，只要其中一个Promise转变了状态，后续状态就不会发生改变}, err => {reject(err);})});       })}

测试用例：

function wait500(input) {return new Promise((resolve, reject) => {setTimeout(()=> {resolve(500)}, 500)})
}
function wait1000(input) {return new Promise((resolve, reject) => {setTimeout(()=> {resolve(1000)}, 1000)})
}
Promise.race([wait1000(), wait500()]).then(result => {console.log('all end', result)
}, err => {console.log('fafaf', err)
}) // 打印出'all end 500'

总结

总的代码：

const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';class Promise {constructor(executor) {// 1、默认状态 - PENDINGthis.status = PENDING;// 2、内部维护的变量值this.value = undefined;this.reason = undefined;// 存放回调this.onResolvedCallbacks = [];this.onRejectedCallbacks = [];try {executor(this.resolve.bind(this), this.reject.bind(this))} catch(err) {this.reject(err)}}resolve(value) {if (this.status === PENDING) {this.value = value;this.status = FULFILLED;this.onResolvedCallbacks.forEach(fn => fn())}}reject(reason) {if (this.status === PENDING) {this.reason = reason;this.status = REJECTED;this.onRejectedCallbacks.forEach(fn => fn())}}then(onFulfilled, onRejected) {return new Promise((resolve, reject) => { // 支持链式调用if (onFulfilled && this.status === FULFILLED) {let res = onFulfilled(this.value)this.resolvePromise(res, resolve, reject)}if (onRejected && this.status === REJECTED) {let res = onRejected(this.reason)this.resolvePromise(res, resolve, reject)}if (this.status === PENDING) {this.onResolvedCallbacks.push(() =>{let res = onFulfilled(this.value)this.resolvePromise(res, resolve, reject)})this.onRejectedCallbacks.push(() => {let res = onRejected(this.reason)this.resolvePromise(res, resolve, reject)})}})}resolvePromise(res, resolve, reject) {if(res instanceof Promise) {res.then(resolve, reject)} else{// 普通值resolve(res)}}
}
// 全部成功才返回成功的结果，有一个失败就返回失败的结果
Promise.all = function(arr) {return new Promise((resolve, reject) => {if (!Array.isArray(arr)) {return reject("参数必须为数组");}let successNum = 0;let resultArray = [];let totalNum = arr.length;let isFail = false;arr.forEach(item => {item.then(res => {successNum++;resultArray.push(res);if (successNum === totalNum) {return resolve(resultArray)}}, err => {if (!isFail) reject(err)isFail = true;})});       })
}// 某个promise先完成，
Promise.race = function(arr) {return new Promise((resolve, reject) => {if (!Array.isArray(arr)) {return reject("参数必须为数组");}arr.forEach(item => {item.then(res => {return resolve(res);}, err => {reject(err);})});       })}

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

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

相关文章

linux并发服务器 —— 动态库和静态库实战（一）

linux并发服务器 —— 动态库和静态库实战（一）

-E 预处理指定源文件 -S 编译指定源文件 -c 汇编指定源文件 -o 生成可执行文件 -I directory 指定Include包含文件的搜索目录 -g 编译的时候生成调试信息 -D 在程序编译时指定一个宏 -w 不生成任何的警告信息 -Wall 生成所有警告 -On n:0~3；表示编译器的优…
阅读更多...
局域网远程软件Radmin

局域网远程软件Radmin

Radmin是一个快速且安全的远程控制和远程访问软件，通过它可以就像坐在远程计算机前一样，在远程计算机上工作，并可以从多个位置访问远程计算机。（本例使用的版本是Radmin 3.5） 下载Radmin 3.5安装包。 Radmin 3.5安装…
阅读更多...
Android事件分发

Android事件分发

Android事件分发是指触摸屏幕的事件分发，在手指触摸屏幕后所产生的一系列事件中，典型的事件类型有如下几种: MotionEvent.ACTION_DOWN ——手指刚接触屏幕MotionEvent.ACTION_MOVE——手指在屏幕上面滑动MotionEvent.ACTION_UP——手指从屏幕上松开的一…
阅读更多...
2023京东酒类市场数据分析（京东数据开放平台）

2023京东酒类市场数据分析（京东数据开放平台）

根据鲸参谋平台的数据统计，今年7月份京东平台酒类环比集体下滑，接下来我们一起来看白酒、啤酒、葡萄酒的详情数据。 首先来看白酒市场。 鲸参谋数据显示，7月份京东平台白酒的销量为210万，环比下滑约49%；销售额将近19…
阅读更多...
【ArcGIS Pro二次开发】(62)：复制字段

【ArcGIS Pro二次开发】(62)：复制字段

应网友需求，做了这么一个复制字段的小工具。 假定这样一个场景，手头有一个要素1，要素里有10个字段，另一个要素2，除了shape_area等图形字段外，没有其它字段。 现在的需求是，想把要素1中的8个字…
阅读更多...
【C++】list类的模拟实现

【C++】list类的模拟实现

🏖️作者：malloc不出对象 ⛺专栏：C的学习之路 👦个人简介：一名双非本科院校大二在读的科班编程菜鸟，努力编程只为赶上各位大佬的步伐🙈🙈 目录 前言一、list类的模拟实现1.1 list的…
阅读更多...
【Leetcode】124.二叉树中的最大路径和（Hard）

【Leetcode】124.二叉树中的最大路径和（Hard）

一、题目 1、题目描述 二叉树中的 路径 被定义为一条节点序列，序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点，且不一定经过根节点。 路径和 是路径中各节点值的总和。 给你一个二叉树的根节点 root ，返回其…
阅读更多...
2024年新iPad Pro将实现6年来最大的升级

2024年新iPad Pro将实现6年来最大的升级

彭博社的Mark Gurman长期以来一直将iPad Pro的下一次重大更新定在2024年，在最新一期的Power On时事通讯中，他详细阐述了一些细节，这些细节将使其成为“自2018年以来该产品的首次重大更新” 尽管Gurman将最近的iPad升级描述为“最近特别小”&…
阅读更多...
Linux之iptables防火墙

Linux之iptables防火墙

目录 一.网络安全技术 二.防火墙 2.1.防火墙分类 2.2.iptables工具简述 2.3.iptables基本语法 2.4.控制类型 2.5.查看规则 2.6.添加规则 2.7.黑白名单 2.8.根据规则编号删除 清空 替换规则 2.9.默认策略 2.10.隐藏扩展模块 2.11.显示扩展模块 三.iptables保存规则…
阅读更多...
【多线程】Thread类的用法

【多线程】Thread类的用法

文章目录 1. Thread类的创建1.1 自己创建类继承Thread类1.2 实现Runnable接口1.3 使用匿名内部类创建Thread子类对象1.4 使用匿名内部类创建Runnable子类对象1.5 使用lambda创建 2. Thread常见的构造方法2.1 Thread()2.2 Thread(Runnable target)2.3 Thread(String name)2.4 Th…
阅读更多...
ReactNative 密码生成器实战

ReactNative 密码生成器实战

效果展示图 使用插件 Formik 负责表单校验、监听表单提交、数据校验错误信息展示 Yup 负责表单校验规则 分析页面 从上述的展示图我们可以看到的主要元素有：输入框、单选按钮和按钮。其中生成的密码长度不可能很大也不可能为负数和 0，所以我们可以限…
阅读更多...
VR智慧课堂 | 临床兽医学VR实验教学有哪些好处？

VR智慧课堂 | 临床兽医学VR实验教学有哪些好处？

随着科技的不断发展，虚拟现实(VR)技术已经逐渐渗透到各个领域，为人们带来了前所未有的体验。在动物医学实验教学中，VR技术的应用也日益受到关注。本文将探讨临床兽医学VR实验教学的好处。 首先，VR技术能够提高动物医学实验的安全性…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023