js中Promise的常见用法 比如resolve、race都是啥意思

2024-04-05 01:44

本文主要是介绍js中Promise的常见用法 比如resolve、race都是啥意思,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在JavaScript中,Promise是一种用于异步编程的构造函数,它提供了更好的处理异步操作的方式,相较于传统的回调函数更易于管理和避免回调地狱。Promise有三种状态:Pending(进行中)、Resolved(已完成)、Rejected(已失败)。

以下是Promise的一些常见用法:

  1. Promise构造函数

    new Promise((resolve, reject) => {// 异步操作if (/* 成功条件 */) {resolve(value); // 当异步操作成功时,调用resolve函数,将Promise的状态变为Resolved,并传递结果值} else if (/* 失败条件 */) {reject(error); // 当异步操作失败时,调用reject函数,将Promise的状态变为Rejected,并传递错误原因}
    });
    
  2. resolve()

    • resolve是Promise构造函数传入的函数之一,当你确定异步操作成功时调用它,使Promise状态变为Resolved,并传递成功的值给后续的.then.catch链中的回调函数。
  3. Promise.race()

    • Promise.race(iterable)方法接受一个Promise对象的可迭代集合(如数组),只要这个集合中的任何一个Promise变为Resolved或Rejected状态,Promise.race就会返回的那个率先改变状态的Promise的结果(无论是Resolved还是Rejected)。
    let p1 = fetch('url1');
    let p2 = fetch('url2');Promise.race([p1, p2]).then(response => {// 第一个fetch请求完成后的响应
    }, error => {// 第一个fetch请求抛出的错误
    });
    
  4. Promise.all()

    • Promise.all(iterable)方法则是等待可迭代集合中的所有Promise全部变为Resolved状态,然后返回一个新的Promise,这个Promise在所有输入的Promise都变为Resolved时才会变为Resolved,并且它的结果是一个数组,包含了所有输入Promise的结果。
    let p1 = fetch('url1');
    let p2 = fetch('url2');Promise.all([p1, p2]).then(responses => {// responses是一个数组,包含了两个fetch请求的结果
    }, error => {// 如果任何一个fetch请求失败了,这里的error将是第一个失败的请求的错误
    });
    
  5. .then() 和 .catch()

    • promise.then(onFulfilled, onRejected)方法用于指定Promise成功或失败后的回调函数,onFulfilled会在Promise被resolve时调用,onRejected会在Promise被reject时调用。
    • promise.catch(onRejected)专门用于处理Promise失败的情况,相当于.then(null, onRejected)

通过这些API,开发人员可以方便地处理异步流程控制,形成更加清晰和易于维护的代码。

async function runParallel(maxConcurrency, source, iteratorFn) {const ret = []const executing = []for (const item of source) {const p = Promise.resolve().then(() => iteratorFn(item, source))ret.push(p)if (maxConcurrency <= source.length) {const e = p.then(() => executing.splice(executing.indexOf(e), 1))executing.push(e)if (executing.length >= maxConcurrency) {await Promise.race(executing)}}}return Promise.all(ret)
}

这是一个实现了并发限制的异步函数,名为runParallel,它接受三个参数:

  1. maxConcurrency:整数,表示允许同时执行的任务的最大数量。
  2. source:可迭代对象,比如数组,其中包含一系列待处理的项。
  3. iteratorFn:一个迭代器函数,它接受两个参数:当前正在处理的项 (item) 和源数组 (source),并返回一个Promise。此函数用于执行针对每一项的操作。

函数的主要逻辑如下:

  • 初始化一个空数组ret用来存放每个任务对应的Promise。
  • 初始化一个空数组executing用来跟踪当前正在执行的任务(即Promise)。

接着遍历source中的每一项:

  • 创建一个Promise(p),在其内部调用iteratorFn函数处理当前项,并立即resolve该Promise。
  • 将Promise p 添加到结果数组ret中。
  • 如果当前已执行的任务数量(executing.length)小于等于最大并发数(maxConcurrency):
    • 当Promise p 完成时,通过.then()方法从executing数组中移除自身。
    • 将Promise p (在其完成回调上添加了删除自身的逻辑)加入到executing数组中。
    • 如果executing数组长度达到了maxConcurrency,就等待数组中任意一个Promise完成(通过Promise.race(executing)实现)。

最后,函数返回Promise.all(ret),这意味着它会等待所有异步任务都完成之后,才返回一个Promise,这个Promise在resolve时会带有所有任务的最终结果组成的数组。

总之,runParallel函数是用来并发执行一系列任务的,同时控制并发任务的数量不超过给定的最大并发数maxConcurrency

这篇关于js中Promise的常见用法 比如resolve、race都是啥意思的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/877354

相关文章

嵌入式软件常见的笔试题(c)

找工作的事情告一段落,现在把一些公司常见的笔试题型整理一下,本人主要是找嵌入式软件方面的工作,笔试的也主要是C语言、数据结构,大体上都比较基础,但是得早作准备,才会占得先机。   1:整型数求反 2:字符串求反,字符串加密,越界问题 3:字符串逆序,两端对调;字符串逆序,指针法 4:递归求n! 5:不用库函数,比较两个字符串的大小 6:求0-3000中含有9和2的全部数之和 7

#error用法

/* *检查编译此源文件的编译器是不是C++编译器 *如果使用的是C语言编译器则执行#error命令 *如果使用的是 C++ 编译器则跳过#error命令 */ #ifndef __cplusplus #error 亲,您当前使用的不是C++编译器噢! #endif #include <stdio.h> int main() {

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con

SQL Server中,isnull()函数以及null的用法

SQL Serve中的isnull()函数:          isnull(value1,value2)         1、value1与value2的数据类型必须一致。         2、如果value1的值不为null,结果返回value1。         3、如果value1为null,结果返回vaule2的值。vaule2是你设定的值。        如

tensorboard-----summary用法总结

Tensorflow学习笔记——Summary用法         最近在研究tensorflow自带的例程speech_command,顺便学习tensorflow的一些基本用法。 其中tensorboard 作为一款可视化神器,可以说是学习tensorflow时模型训练以及参数可视化的法宝。 而在训练过程中,主要用到了tf.summary()的各类方法,能够保存训练过程以及参数分布图并在

vscode-创建vue3项目-修改暗黑主题-常见错误-element插件标签-用法涉及问题

文章目录 1.vscode创建运行编译vue3项目2.添加项目资源3.添加element-plus元素4.修改为暗黑主题4.1.在main.js主文件中引入暗黑样式4.2.添加自定义样式文件4.3.html页面html标签添加样式 5.常见错误5.1.未使用变量5.2.关闭typescript检查5.3.调试器支持5.4.允许未到达代码和未定义代码 6.element常用标签6.1.下拉列表

js小题:通过字符串执行同名变量怎么做

在JavaScript中,你不能直接使用一个字符串来直接引用一个变量,因为JavaScript是一种静态类型语言(尽管它的类型在运行时可以变化),变量的名字在编译时就被确定了。但是,有几种方法可以实现类似的功能: 使用对象(或Map)来存储变量: 你可以使用一个对象来存储你的变量,然后使用字符串作为键来访问这些变量。 let myVars = { 'var1': 'Hello', 'var

YTKKeyValueStore用法

iOS端的尝试 后来我从后台转做iOS端的开发,我就尝试了在iOS端直接使用Key-Value式的存储。经过在粉笔网、猿题库、小猿搜题三个客户端中的尝试后,我发现Key-Value式的存储不但完全能够满足大多数移动端开发的需求,而且非常适合移动端采用。主要原因是:移动端存储的数据量不会很大: 如果是单机的应用(例如效率工具Clear),用户自己一个人创建的数据最多也就上万条。 如果

图形编辑器基于Paper.js教程03:认识Paper.js中的所有类

先来认一下Paper的资源对象,小弟有哪些,有个整体的认识。认个脸。 在Paper.js的 官方文档中类大致有如下这些: 基类: ProjectViewItemPointToolSizeSegmentRectangleCurveCurveLocationMatrixColorStyleTweenToolEventGradientGradientStopEvent 二级或三级类 继承Ite

HTML文档插入JS代码的几种方法

在HTML文档里嵌入客户端JavaScript代码有4中方法: 1.内联,放置在< script>和标签对之间。 2.放置在由< script>标签的src属性指定的外部文件中。 3.放置在HTML事件处理程序中,该事件处理程序由onclick或onmouseover这样的HTML属性值指定。 4.放在一个URL里,这个URL使用特殊的“javascript:”协议。 在JS编程中,主张