面试官:来说一下 promise.all 和 promise.allSettled 的区别

前言

说到 Promise.all,很多人应该不陌生,那 Promise.allSettled,可能很多朋友并没有使用过,这两者有相同部分,也有不同部分,今天就带大家一起来了解一下这两个方法。

Promise.all()

Promise.all() 方法接受一个 Promise 对象的数组作为参数,并返回一个新的 Promise 实例。

该实例会在所有传入的 Promise 实例都完成后 才完成,而且传入的 Promise 实例中只要有一个被拒绝, 则该实例就会立即被拒绝

它的主要作用是将多个 Promise 实例组合成一个单一的 Promise 实例。

MDN官方解释:

Promise.all() - JavaScript | MDN (mozilla.org)

举例说明:

js 复制代码
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 1 resolved'), 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => reject('Promise 2 rejected'), 500);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 3 resolved'), 1500);
});

// 使用 Promise.all
Promise.all([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(error => console.error(error));
// 输出: Promise 2 rejected

结果如下:

可以看到我们上面写了三个 Promise,promise1 /promise3为成功状态的promise,promise2为拒绝,所以打印结果为失败状态的 promise 。

如果三个都成功,则会输出一个数组,保存成功之后返回的信息。

Promise.allSettled()

Promise.allSettled() 方法也接受一个 Promise 对象的数组作为参数,并返回一个新的 Promise 实例。

该实例会在所有传入的 Promise 实例都完成(无论是 resolved 还是 rejected )后才完成

它会将每个传入的 Promise 实例的结果收集到一个数组中,数组中每一项是一个对象,对象的 status 表示对应 Promise 实例的状态,value 表示对应 Promise 实例的值,reason 仅当 status 为 "rejected",才存在,promsie 拒绝的原因。

可以看到和 Promise.all 不同的是,返回的是一个数组对象的格式,参数意义如下:

MDN官方解释:

Promise.allSettled() - JavaScript | MDN (mozilla.org)

举例说明:

js 复制代码
  const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Promise 1 resolved'), 1000)
  })

  const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => reject('Promise 2 rejected'), 500)
  })

  const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Promise 3 resolved'), 1500)
  })

  // 使用 Promise.allSettled
  Promise.allSettled([promise1, promise2, promise3])
    .then((results) => console.log(results))
    .catch((error) => console.error(error))

同上,打印结果如下,可以看到被拒绝的 promise 打印出了 reason

区别

  1. Promise.all() 在其中任何一个 Promise 被拒绝时就会被拒绝,而 Promise.allSettled() 则会在所有 Promise 实例都完成(无论成功还是失败)时才完成。

  2. Promise.all() 返回的是一个数组,数组中的值是传入的 Promise 实例的结果值,而 Promise.allSettled() 返回的是一个数组,数组中的值是对象,每个对象表示对应的 Promise 实例的状态和结果值。

  3. 当你需要获取所有异步操作的结果时,无论是成功还是失败,应该使用 Promise.allSettled()。如果只关心所有操作都成功的情况,可以使用 Promise.all()。

相关推荐
yqcoder4 分钟前
Commander 一款命令行自定义命令依赖
前端·javascript·arcgis·node.js
前端Hardy20 分钟前
HTML&CSS :下雪了
前端·javascript·css·html·交互
醉の虾27 分钟前
VUE3 使用路由守卫函数实现类型服务器端中间件效果
前端·vue.js·中间件
sysu631 小时前
95.不同的二叉搜索树Ⅱ python
开发语言·数据结构·python·算法·leetcode·面试·深度优先
码上飞扬1 小时前
Vue 3 30天精进之旅:Day 05 - 事件处理
前端·javascript·vue.js
火烧屁屁啦2 小时前
【JavaEE进阶】应用分层
java·前端·java-ee
程序员小寒2 小时前
由于请求的竞态问题,前端仔喜提了一个bug
前端·javascript·bug
赵不困888(合作私信)3 小时前
npx和npm 和pnpm的区别
前端·npm·node.js
很酷的站长4 小时前
一个简单的自适应html5导航模板
前端·css·css3
python算法(魔法师版)6 小时前
React应用深度优化与调试实战指南
开发语言·前端·javascript·react.js·ecmascript