手动实现promise的all,race,finally方法

Promise.all

是一个非常有用的工具,它接受一个 Promise 对象数组,并返回一个新的 Promise。当所有输入的 Promise 都成功解决时,新的 Promise 会解决为一个包含所有结果的数组;如果任何一个 Promise 被拒绝,新的 Promise 会立即被拒绝,并返回第一个被拒绝的错误。

 function myPromiseAll(promiseArray) {return new Promise((resolve, reject) => {//1.参数检查://检查传入的参数是否为数组,如果不是数组,则抛出 TypeError。if (!Array.isArray(promiseArray)) {return reject(new TypeError("arguments must be an array"))}//2.初始化://创建一个 results 数组来存储每个 Promise 的结果。//初始化 count 计数器,用于记录已经完成的 Promise 数量。//获取 promises 数组的总长度 len。let result = []let count = 0const len = promiseArray.length//3.特殊情况处理://如果 promises 数组为空,直接返回一个已解决的 Promise,其结果为一个空数组。if (len === 0) {resolve(result)}//4.遍历 Promise 数组://使用 for循环 遍历 promises 数组。//对每个 Promise 使用 Promise.resolve 确保它是 Promise 对象。//使用 then 方法处理每个 Promise 的成功和失败情况://成功时,将结果存储在 results 数组中,并增加 count。//如果 count 达到 len,说明所有 Promise 都已成功解决,调用 resolve 方法,传递 results 数组。//失败时,立即调用 reject 方法,传递错误信息。for (let i = 0; i < len; i++) {Promise.resolve(promiseArray[i]).then((res) => {result[i] = rescount++if (count === len) {resolve(result)}}).catch((err) => reject(err))}})}// 示例代码const promise1 = Promise.resolve(1);const promise2 = Promise.resolve(2);const promise3 = new Promise((resolve) => setTimeout(() => resolve(3), 1000));const promise4 = Promise.reject('Error');myPromiseAll([promise1, promise2, promise3]).then((results) => {console.log('All promises resolved:', results); // 输出: All promises resolved: [1, 2, 3]}).catch((error) => {console.error('An error occurred:', error);});myPromiseAll([promise1, promise2, promise4]).then((results) => {console.log('All promises resolved:', results);}).catch((error) => {console.error('An error occurred:', error); // 输出: An error occurred: Error});

Promise.race

接受一个 Promise 对象数组,并返回一个新的 Promise。新的 Promise 会在第一个输入的 Promise 被解决或拒绝时立即解决或拒绝,其结果或错误信息取决于第一个完成的 Promise。

 function myPromiseRace(promiseArray) {return new Promise((resolve, reject) => {//1.参数检查://检查传入的参数是否为数组,如果不是数组,则抛出 TypeError。if (!Array.isArray(promiseArray)) {return reject(new TypeError("arguments must be an array"))}//2.遍历 Promise 数组://使用 for 循环遍历 promises 数组。//对每个 Promise 使用 Promise.resolve 确保它是 Promise 对象。//使用 then 方法处理每个 Promise 的成功和失败情况://成功时,立即调用 resolve 方法,传递结果值。//失败时,立即调用 reject 方法,传递错误信息。for (let i = 0; i < promiseArray.length; i++) {//写法一:Promise.resolve(promiseArray[i]).then((res) => {resolve(res)},(error) => {reject(error)})//写法二://Promise.resolve(promiseArray[i]).then(resolve, reject)}})}// 示例代码const promise1 = Promise.resolve(1);const promise2 = new Promise((resolve) => setTimeout(() => resolve(2), 1000));const promise3 = new Promise((resolve) => setTimeout(() => resolve(3), 500));const promise4 = Promise.reject('Error');myPromiseRace([promise1, promise2, promise3]).then((result) => {console.log('First resolved promise:', result); // 输出: First resolved promise: 1}).catch((error) => {console.error('An error occurred:', error);});myPromiseRace([promise2, promise3, promise4]).then((result) => {console.log('First resolved promise:', result);}).catch((error) => {console.error('An error occurred:', error); // 输出: An error occurred: Error});

Promise.finally

用于指定不管 Promise 最终状态如何,都会执行的操作。这个方法通常用于清理工作,比如关闭文件句柄、清除定时器等。

正常使用:

promise.then((result) => {// 处理已解决的情况}).catch((error) => {// 处理已失败的情况}).finally(() => {// 不管Promise对象最终的状态如何,都会执行的回调函数});

手动实现:

function myPromiseFinally(promise, callback) {return promise.then(//接受两个参数:一个 Promise 对象 promise 和一个回调函数 callback。//使用 then 方法分别处理 promise 的成功和失败情况。//在成功的情况下,先调用 callback 回调函数,然后返回原始的成功值。//在失败的情况下,先调用 callback 回调函数,然后重新抛出原始的错误。(value) => Promise.resolve(callback()).then(() => value),(error) =>Promise.resolve(callback()).then(() => {throw error}))}//示例代码: 
const promise1 = Promise.resolve(1);
const promise2 = new Promise((resolve) => setTimeout(() => resolve(2), 1000));
const promise3 = new Promise((resolve, reject) => setTimeout(() => reject('Error'), 500));// 成功的情况
myPromiseFinally(promise1, () => {console.log('Finally block executed');
}).then((result) => {console.log('Result:', result); // 输出: Result: 1
}).catch((error) => {console.error('Error:', error);
});// 延迟成功的情况
myPromiseFinally(promise2, () => {console.log('Finally block executed');
}).then((result) => {console.log('Result:', result); // 输出: Result: 2
}).catch((error) => {console.error('Error:', error);
});// 失败的情况
myPromiseFinally(promise3, () => {console.log('Finally block executed');
}).then((result) => {console.log('Result:', result);
}).catch((error) => {console.error('Error:', error); // 输出: Error: Error
});

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

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

相关文章

React Hooks在现代前端开发中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 React Hooks在现代前端开发中的应用 React Hooks在现代前端开发中的应用 React Hooks在现代前端开发中的应用 引言 React Hooks …

执行flink sql连接clickhouse库

手把手教学&#xff0c;flink connector打通clickhouse大数据库&#xff0c;通过下发flink sql&#xff0c;来使用ck。 组件版本jdk1.8flink1.17.2clickhouse23.12.2.59 1.背景 flink官方不支持clickhouse连接器&#xff0c;工作中难免会用到。 2.方案 利用GitHub大佬提供…

【机器学习】如何配置anaconda环境(无脑版)

马上就要上机器学习的实验&#xff0c;这里想写一下我配置机器学习的anaconda环境的二三事 一、首先&#xff0c;下载安装包&#xff1a; Download Now | Anaconda 二、打开安装包&#xff0c;一直点NEXT进行安装 这里要记住你要下载安装的路径在哪&#xff0c;后续配置环境…

如何保护 Microsoft 网络免受中间人攻击

一名办公室工作人员收到了一封看似来自供应商的电子邮件&#xff0c;但该邮件被隔离了&#xff0c;用户请求将其释放。这封邮件看起来没什么问题&#xff0c;因此管理员释放了这封邮件。用户点击邮件查看内容&#xff0c;其中包括一张附加发票。 问题就从这里开始&#xff1a;…

Excel筛选的操作教程

用Excel整理数据时&#xff0c;常常要用到筛选功能&#xff0c;很多复杂的数据经过一定条件的筛选后就变得很清晰。筛选也是Excel的一个基本功能之一&#xff0c;你会使用这个功能吗&#xff1f;不会也没关系&#xff0c;接着往下看&#xff0c;接下来就来演示一些Excel表格筛选…

爬虫补环境案例---问财网(rpc,jsdom,代理,selenium)

目录 一.环境检测 1. 什么是环境检测 2.案例讲解 二 .吐环境脚本 1. 简介 2. 基础使用方法 3.数据返回 4. 完整代理使用 5. 代理封装 6. 封装所有使用方法 jsdom补环境 1. 环境安装 2. 基本使用 3. 添加参数形式 Selenium补环境 1. 简介 2.实战案例 1. 逆向目…

JAVA:探索 EasyExcel 的技术指南

1、简述 在 Java 开发中&#xff0c;Excel 文件的读写操作是一项常见的需求。阿里巴巴开源的 EasyExcel 提供了一种高效、简洁的解决方案&#xff0c;特别是在处理大规模数据时表现尤为突出。本文将详细介绍 EasyExcel 的优缺点、应用场景&#xff0c;并通过实例展示其基本用法…

力扣662:二叉树的最大宽度

给你一棵二叉树的根节点 root &#xff0c;返回树的 最大宽度 。 树的 最大宽度 是所有层中最大的 宽度 。 每一层的 宽度 被定义为该层最左和最右的非空节点&#xff08;即&#xff0c;两个端点&#xff09;之间的长度。将这个二叉树视作与满二叉树结构相同&#xff0c;两端…

Elasticsearch基本概念及使用

Elasticsearch 是一个开源的、分布式的全文搜索和分析引擎&#xff0c;基于 Apache Lucene 构建。它提供了快速的搜索能力&#xff0c;支持大规模的数据分析&#xff0c;广泛应用于日志分析、全文搜索、监控系统和商业智能等领域。ES操作指令是基于restAPI构建&#xff0c;也就…

Vue.js 项目创建流程

Vue.js 项目创建流程 以下是一个详细的步骤指南&#xff0c;用于在Windows系统上使用NVM&#xff08;Node Version Manager&#xff09;和npm创建一个新的Vue.js项目。 1. 安装Node.js指定版本 首先&#xff0c;使用NVM安装Node.js的20.18.0版本。 nvm install 20输出示例&…

如何判定linux系统CPU的核心架构

背景 在开发一个项目的时候&#xff0c;需要配置安装PyTorch环境&#xff0c;自己电脑以前下载过这个相关的包&#xff0c;但是是X86架构的&#xff0c;不知道复制到Linux系统后能否直接使用&#xff0c;于是想着去确认一下&#xff0c;并把自己的方法总结一下,自己下载的文件…

Vue2:组件

Vue2&#xff1a;组件 非单文件组件定义注册使用 单文件组件 组件是Vue中最核心的内容&#xff0c;在编写页面时&#xff0c;将整个页面视为一个个组件&#xff0c;再把组件拼接起来&#xff0c;这样每个组件之间相互独立&#xff0c;有自己的结构样式&#xff0c;使页面编写思…

408模拟卷较难题(无分类)

模拟卷特别是大题还是很有难度的&#xff0c;而且有些题有错&#xff0c;还是先把真题吃透&#xff0c;后面没时间的话就不整理了。 一棵树转化为二叉树&#xff0c;那么这棵二叉树一定为右子树为空的树 计算不同种形态&#xff0c;即计算6个结点的二叉树有几种形态&#xff0c…

(六)Spark大数据开发实战:豆瓣电影数据处理与分析(scala版)

目录 一、Spark 二、数据介绍 三、Spark大数据开发实战(Scala) 1、数据文件上传HDFS 2、导入模块及数据 3、数据统计与分析 ①、计算演员参演电影数 ②、依次罗列电影番位前十的演员 ③、按照番位计算演员参演电影数 ④、求每位演员所有参演电影中的最早、最晚上映…

SpringMVC学习笔记(二)

五、Rest风格编程 &#xff08;一&#xff09;Rest风格URL规范介绍 1、什么是restful RESTful架构&#xff0c;就是目前最流行的一种互联网软件架构风格。它结构清晰、符合标准、易于理解、扩展方便&#xff0c;所以正得到越来越多网站的采用。REST这个词&#xff0c;是Roy T…

PyTorch深度学习与企业级项目实战-预训练语言模型GPT

【图书推荐】《PyTorch深度学习与企业级项目实战》-CSDN博客 13个PyTorch深度学习案例简介-CSDN博客 《PyTorch深度学习与企业级项目实战&#xff08;人工智能技术丛书&#xff09;》(宋立桓&#xff0c;宋立林)【摘要 书评 试读】- 京东图书 (jd.com) PyTorch深度学习算法与…

CTF攻防世界小白刷题自学笔记13

1.fileinclude,难度&#xff1a;1,方向&#xff1a;Web 题目来源:宜兴网信办 题目描述:无 给一下题目链接&#xff1a;攻防世界Web方向新手模式第16题。 打开一看给了很多提示&#xff0c;什么language在index.php的第九行&#xff0c;flag在flag.php中&#xff0c;但事情显…

【QT常用技术讲解】优化网络链接不上导致qt、qml界面卡顿的问题

前言 qt、qml项目经常会涉及访问MySQL数据库、网络服务器&#xff0c;并且界面打开时的初始化过程就会涉及到链接Mysql、网络服务器获取数据&#xff0c;如果网络不通&#xff0c;卡个几十秒&#xff0c;会让用户觉得非常的不爽&#xff0c;本文从技术调研的角度讲解解决此类问…

基于OpenCV的自制Python访客识别程序

这是我用Pyqt5&#xff0c;基于OpenCV做的一个Python访客识别程序&#xff0c;它具体包括如下5个功能&#xff1a; 1、选择媒体菜单&#xff0c;可以打开本地摄像头&#xff1b;如果知道rtsp地址&#xff0c;则可以直接访问局域网内的网络串流。 2、选择播放菜单&#xff0c;…

SQL集合运算

集合论是SQL语言的根基。 1 集合运算 注意事项&#xff1a; 1&#xff09;SQL能操作具有重复行的集合&#xff0c;可以通过可选项ALL来支持。 如果直接使用UNION或INTERSECT&#xff0c;结果里不会出现重复的行。如果想在结果里留下重复行&#xff0c;可以加上可选项ALL。写…