面试官:来说一下 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()。

相关推荐
前端Hardy19 分钟前
HTML&CSS:3D图片切换效果
前端·javascript
spionbo40 分钟前
Vue 表情包输入组件实现代码及完整开发流程解析
前端·javascript·面试
全宝41 分钟前
✏️Canvas实现环形文字
前端·javascript·canvas
lyc23333341 分钟前
鸿蒙Core File Kit:极简文件管理指南📁
前端
我这里是好的呀41 分钟前
全栈开发个人博客12.嵌套评论设计
前端·全栈
我这里是好的呀42 分钟前
全栈开发个人博客13.AI聊天设计
前端·全栈
金金金__43 分钟前
Element-Plus:popconfirm与tooltip一起使用不生效?
前端·vue.js·element
lyc23333344 分钟前
小L带你看鸿蒙应用升级的数据迁移适配📱
前端
用户26812851066691 小时前
react-pdf(pdfjs-dist)如何兼容老浏览器(chrome 49)
前端