Promise.all、Promise.allSettled、Promise.any、Promise.race

已于 2023-02-13 20:16:28 修改
阅读量6.4k 收藏 81
点赞数 14
分类专栏： js 文章标签： javascript
于 2022-08-23 22:32:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68324632/article/details/126459643
版权

Promise的实例方法拓展

Promise.all() ：方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

Promise.allSettled()：用来确定一组异步操作是否都结束了（不管成功或失败）。所以，它的名字叫做”Settled“，包含了”fulfilled“和”rejected“两种情况。

Promise.any()：ES2021 引入了Promise.any()方法。该方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。

Promise.race()：方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。
在这里插入图片描述

一、Promise.all()

介绍:

Promise.all() 方法接收一个 promise 的 iterable 类型（注：Array，Map，Set 都属于 ES6 的 iterable 类型）的输入。并且只返回一个Promise实例， 那个输入的所有 promise 的 resolve 回调的结果是一个数组。

这个Promise的 resolve 回调执行是在所有输入的 promise 的 resolve 回调都结束，或者输入的 iterable 里没有 promise 了的时候。

它的 reject 回调执行是，只要任何一个输入的 promise 的 reject 回调执行或者输入不合法的 promise 就会立即抛出错误，并且 reject 的是第一个抛出的错误信息。

用法示例：

var p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'one');
});
var p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'two');
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'three');
});
var p4 = new Promise((resolve, reject) => {
  setTimeout(resolve, 4000, 'four');
});
var p5 = new Promise((resolve, reject) => {
  reject('reject');
});

Promise.all([p1, p2, p3, p4, p5]).then(values => {
  console.log(values);
}, reason => {
  console.log(reason)
});
//结果：
//reject
//Promise {<fulfilled>: undefined}

只有p1、p2、p3、p4、p5的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

只要p1、p2、p3、p4、p5之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

应用场景：

当我们需要所有异步任务都同时进行并且完成时可以使用.all方法

all是比较常用的一个方法，比如当我们的页面中需要多个接口同时在页面进入时请求数据，这时就可以使用all方法把多个 axios 合并后一起发送请求，并加入loading加载让用户等待。

面试题：

必须当三个axios请求都成功时，才能发送第四个请求，用promise实现？

我们可以用 .all方法实现：

 let a = axios.get("http://xxxa")
 let b = axios.get("http://xxxb")
 let c = axios.get("http://xxxc")
 let d = axios.get("http://xxxd")

 Promise.all([a, b, c]).then(resx => {
   console.log('resx:',resx);
   d.then(resy => console.log('resy:',resy))
 },err => console.log(err))
/*结果：
resx: (3) [{…}, {…}, {…}]
resy:{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
*/

二、Promise.allSettled()

介绍:

Promise.allSettled()方法返回一个在所有给定的 promise 都已经fulfilled或rejected后的 promise，并带有一个对象数组，每个对象表示对应的 promise 结果。

当您有多个彼此不依赖的异步任务成功完成时，或者您总是想知道每个promise的结果时，通常使用它。

相比之下，Promise.all() 更适合彼此相互依赖或者在其中任何一个reject时立即结束。

用法示例：

var p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 4000, 'one');
});
var p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'two');
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'three');
});
var p4 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'four');
});
var p5 = new Promise((resolve, reject) => {
  reject('reject');
});

Promise.allSettled([p1, p2, p3, p4, p5]).then(values => {
  console.log(values);
}, reason => {
  console.log(reason)
});
//结果：
//Promise {<pending>}
//(5) [{…}, {…}, {…}, {…}, {…}]
//0: {status: "fulfilled", value: "one"}
//1: {status: "fulfilled", value: "two"}
//2: {status: "fulfilled", value: "three"}
//3: {status: "fulfilled", value: "four"}
//4: {status: "rejected", reason: "reject"}
//length: 5
//[[Prototype]]: Array(0)

一旦所指定的 promises 集合中每一个 promise 已经完成，无论是成功的达成或被拒绝，未决议的 Promise将被异步完成。那时，所返回的 promise 的处理器将传入一个数组作为输入，该数组包含原始 promises 集中每个 promise 的结果。

对于每个结果对象，都有一个 status 字符串。如果它的值为 fulfilled，则结果对象上存在一个 value 。如果值为 rejected，则存在一个 reason 。value（或 reason ）反映了每个 promise 决议（或拒绝）的值。

可以发现和all相比，allSettled在其中一个promise返回错误时还可以继续等待结果。并且不管内部的计时器定时多少毫秒，它都会等所有结果返回后按照传参传入的顺序返回promise结果。

应用场景：

比如我们用户在页面上面同时填了3干个独立的表单，这三个表单分三个接口提交到后端，三个接口独立，没有顺序依赖，这个时候我们需要等到请求全部完成后给与用户提示表单提交的情况。

面试题：

共有四个接口，第一个接口是崩溃的，但是需要返回所有接口的结果。

这一题如果使用 all，那么会直接抛出错误，所以必须使用allSettled方法请求数据

 let a = axios.get("http://xxxa")
 let b = axios.get("http://xxxb")
 let c = axios.get("http://xxxc")
 let d = axios.get("http://xxxd")

 Promise.allSettled([a, b, c,d]).then(resx => {
   console.log('resx:',resx);
 },err => console.log(err))
/*结果：
第一个接口请求结果是错误的
(4) [{…}, {…}, {…}, {…}]
0: {status: "rejected", reason: Error:log…}
1: {status: "fulfilled", value: {…}}
2: {status: "fulfilled", value: {…}}
3: {status: "fulfilled", value: {…}}

*/

三、Promise.any()

介绍:

Promise.any() 接收一个由 Promise 所组成的可迭代 iterable对象，该方法会返回一个新的 promise，一旦可迭代对象内的任意一个 promise 变成了兑现状态，那么由该方法所返回的 promise 就会变成兑现状态，并且它的兑现值就是可迭代对象内的首先兑现的 promise 的兑现值。

如果可迭代对象内的 promise 最终都没有兑现（即所有 promise 都被拒绝了），那么该方法所返回的 promise 就会变成拒绝状态，并且它的拒因会是一个 AggregateError 实例，这是 Error 的子类，用于把单一的错误集合在一起。

用法：

var p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'one');
});
var p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'two');
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'three');
});
var p4 = new Promise((resolve, reject) => {
  setTimeout(resolve, 4000, 'four');
});
var p5 = new Promise((resolve, reject) => {
  reject('reject');
});

Promise.any([p1, p2, p3, p4, p5]).then(values => {
  console.log(values);
}, reason => {
  console.log(reason)
});
//结果：
//Promise {<pending>}
// one

只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。

Promise.any()跟Promise.race()方法很像，只有一点不同，就是Promise.any()不会因为某个 Promise 变成rejected状态而结束，必须等到所有参数 Promise 变成rejected状态才会结束。

应用场景：

和race一样，当我们需要处理多个异步任务返回最快的成功的结果时可以使用 any

面试题：

共有四个个接口，要求只处理第一个成功执行的函数。

    let a = axios.get("http://xxxa")
    let b = axios.get("http://xxxb")
    let c = axios.get("http://xxxc")
    let d = axios.get("http://xxxd")
 
Promise.any([a,b,c,d]).then(res => {
      console.log('result',res);
    }, error => {
      console.log('error',err);
})

/* 
结果：
返回状态成功的内容
result:{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
*/

四、Promise.race()

介绍:

Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个 promise 解决或拒绝，返回的 promise 就会解决或拒绝。

用法：

var p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'one');
});
var p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'two');
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'three');
});
var p4 = new Promise((resolve, reject) => {
  setTimeout(resolve, 4000, 'four');
});
var p5 = new Promise((resolve, reject) => {
  reject('reject');
});

Promise.race([p1, p2, p3, p4, p5]).then(values => {
  console.log(values);
}, reason => {
  console.log(reason)
});
//结果：
//reject
//Promise {<fulfilled>: undefined}

race 函数返回一个 Promise，它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成（ resolves），也可以是失败（rejects），这要取决于第一个完成的方式是两个中的哪个。

如果传的迭代是空的，则返回的 promise 将永远等待。

如果迭代包含一个或多个非承诺值和/或已解决/拒绝的承诺，则 Promise.race 将解析为迭代中找到的第一个值。

可以发现race在遇到立即执行的reject时并没有像any一样继续等待resolve的返回，而是直接返回了reject的内容。

应用场景：

和any一样，当我们需要处理多个异步任务但是不要求返回的内容是正确和错误时返回最快的结果时可以使用 race。

面试题：

共有四个接口，任何一个接口先完成就可以，无论是成功还是报错。

    let a = axios.get("http://xxxa")
    let b = axios.get("http://xxxb")
    let c = axios.get("http://xxxc")
    let d = axios.get("http://xxxd")
 
Promise.any([a,b,c,d]).then(res => {
      console.log('result',res);
    }, error => {
      console.log('error',err);
})
/* 
结果：
返回状态成功切反应最快的接口数据
result:{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
*/
顽皮宝
关注
专栏目录
proposal-promise-any：ECMAScript投标promise.any
02-24
姓名描述Promise.allSettled 不短路在ES2020中添加 :check_mark_button: Promise.all 输入值被拒绝时发生短路在ES2015中添加 :check_mark_button: Promise.race 输入值稳定后发生短路在ES2015中添加 :check_mark_...
Promise.allSettled（）方法介绍
潮汐未见潮落的博客
06-26 1万+
本篇文章介绍 Promise 对象的Promise.allSettled() 方法，另外的关于 Promise 文章 可以看我的 ES6专栏 Promise.allSettled() 上面示例中，可以确定所有请求都成功了，但是只要有一个请求失败，它就会报错，而不管另外的请求是否结束。为了解决这个问题，ES2020 引入了 方法，用来确定一组异步操作是否都结束了（不管成功或失败）。所以，它的名字叫做”Settled“，包含了 ”fulfilled“和 ”rejected“两种情况。方法接受一个
promise.all的用法（简洁易懂）
weixin_62765236的博客
09-23 5万+
promise.all的用法（简洁易懂）
【JavaScript】Promise.all 静态方法详解
最新发布
lph159的博客
09-18 1977
是 JavaScript 中Promise对象的一个静态方法，专门用于处理多个并发的异步操作。它接收一个可迭代对象（通常是数组）作为参数，这个参数中包含多个Promise对象，并返回一个新的Promise。当所有的Promise都成功时，新返回的Promise会被解决（fulfilled），其值是一个包含所有输入Promise结果的数组；如果其中有任何一个Promise失败，则新返回的Promise会被拒绝（rejected），并返回第一个被拒绝的Promise的错误信息。
Promise.allSettled()的解释和说明
Jerry的博客
12-15 3633
是 JavaScript 中的一个 Promise 方法，它接收一个由多个 Promise 对象组成的可迭代对象，并在所有 Promise 对象都已解决或拒绝后返回一个 Promise 对象，该对象解析为一个数组，每个元素对应于相应的 Promise 对象的结果。不会在任何 Promise 被拒绝时中止，并且总是等待所有 Promise 对象都已解决或拒绝后才返回结果。等待所有 Promise 对象都已解决或拒绝后返回结果，并返回一个包含每个 Promise 结果的数组。
Promise.all 方法详解
热门推荐
潮汐未见潮落的博客
06-20 8万+
promise.all 的详细讲解，并包括 promise.all 手写代码
详细分析Js中的Promise.all基本知识（附Demo）
码农研究僧的博客
03-19 9472
Promise.all 是 JavaScript 中的一个方法，它接受一个由 Promise 对象组成的数组作为参数，并在所有 Promise 对象都变为 resolved（已完成）状态时才返回一个新的 Promise 对象，这个新的 Promise 对象的状态也变为 resolved，其值是一个包含了所有 Promise 对象结果的数组
proposal-await.ops:介绍await.all await.race await.allSetteded await.any以简化Promises的使用
04-28
介绍await.all / await.race / await.allSettled / await.any以简化Promises的使用 阶段1 冠军： ，（ 动机 为了简化一组Promises的使用。 （先前的讨论： : ） 为了简化异步功能中并发for循环的用法。 用法： ...
js代码-promise并发控制
07-16
3. **Promise.any()**（ES2020新增）：与Promise.all和Promise.race不同，Promise.any接受一个Promise数组，只要数组中的任一Promise被fulfilled，返回的Promise就会被fulfilled。如果所有Promise都被rejected，返回...
it-promise:类似ES6-----Promise
07-04
Promise.all与Promise.race - `Promise.all`接收一个Promise数组，当所有Promise都变为fulfilled状态时，返回的新Promise才会变为fulfilled，任何单个Promise变为rejected状态则立即返回新的rejected Promise。 ...
js代码-实现Promise
07-14
- 使用Promise.all可以同时处理多个Promise，当所有Promise都变为fulfilled时，Promise.all返回的Promise才会fulfilled。 - 另外，Promise.race则是第一个Promise状态改变（无论成功还是失败）就会立即返回结果。 ...
ccc.docx
11-12
Promise 的静态方法有 Promise.all()、Promise.allSettled()、Promise.any()、Promise.race()、Promise.resolve() 和 Promise.reject()。 async/await async/await 是一种异步编程的解决方案，主要用于简化 ...
前端开源库-extend-promise
08-29
2. **额外的方法**：库可能添加了如 `allSettled`、`race`、`any` 等方法。`allSettled` 返回一个 Promise 数组，当所有 Promise 都完成或拒绝时才解析；`race` 在第一个 Promise 解析或拒绝时立即返回结果；`any` ...
100dayspromise.com:知道所给的承诺会发生什么
06-30
6. **Promise.all()**：学习如何并发处理多个Promise，当所有Promise都完成时，Promise.all返回的新Promise才会fulfilled。 7. **Promise.race()**：理解Promise.race的用法，它会返回一个新Promise，该Promise的...
promises-book-examples:来自“带有承诺JavaScript的代码示例
05-22
了解如何适当地处理Promise的并发和顺序，如使用`Promise.allSettled()`处理所有Promise不论其结果，或者使用`Promise.any()`等待任意一个Promise成功。 10. **避免回调地狱** Promise可以帮助我们摆脱传统的回调...
conclure:ConclureJS
03-07
它很小（核心<200> function* await -> yield Promise.(all|race|allSettled|any) -> Conclude.(all|race|allSettled|any) import { conclude } from 'conclure' ;import * as Conclude from 'conclure/combinators...
2024年你还不知道Promise.allSettled()么？
weixin_42429220的博客
01-26 1296
是一个方法,它允许你同时处理多个 promise,并获得每个 promise 的结果,无论它是 resolve 还是 reject。它返回一个带有一组 promise 处理结果数组的被 fulfill 的 promise。
Promise：Promise.all、Promise.race、Promise.any的用法及区别
Pioneer
09-18 7035
在项目开发过程中经常需要通过异步编程来实现功能，此时就需要我们了解Promise. Promise Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理和更强大。 有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。 一个Promise的当前状态必须为以下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected），状态的改变只能是单向的，且变化后不可在改变。 一个Promise必须提供一个 then
Promise.any()
hongyanwang
08-26 3901
promise.any() 的类型签名是： Promise.any<T>(promises: Iterable<Promise<T>>): Promise<T> Promise.any() 返回一个 Promise p。它的结果取决于参数 promises（迭代 Promises 的结果引用）: 如果有一个 Promise 的状态为成功（fulfilled），p 的状态为成功（resolved）。 如果所有的 Promises 都失败，p 的状态将失败（re
promise.all promise.allsettled
09-11
Promise.all()方法用于将多个Promise实例包装成一个新的Promise实例。它接收一个Promise数组作为参数，并在所有的Promise都完成（即全部resolve或有一个reject）后返回一个新的Promise。这个新的Promise的状态由所有包装Promise的状态决定，如果所有的Promise都成功完成，新的Promise也会成功完成，并且返回一个包含所有Promise结果的数组；如果任何一个Promise被拒绝，新的Promise就会被拒绝，并返回被拒绝的Promise的原因。 Promise.allSettled()方法也是用于将多个Promise实例包装成一个新的Promise实例。它接收一个Promise数组作为参数，并在所有的Promise都完成后返回一个新的Promise。与Promise.all()不同的是，Promise.allSettled()会等待所有Promise都完成，无论是成功还是失败。返回的新的Promise会带有一个对象数组，每个对象表示对应的Promise的结果，无论是成功还是失败。这样可以获取到所有Promise的执行结果，而不会因为其中一个Promise的被拒绝而终止整个过程。 所以，Promise.all()会在所有Promise都成功完成时返回一个成功的Promise，而Promise.allSettled()则会在所有Promise都完成后返回一个包含所有Promise结果的数组的Promise。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值