Promise.allSettled() 사용 방법에 대한 심층 분석

Promise.allSettled()를 어떻게 사용하나요? 다음 글에서는 Promise.allSettled()에 대해 소개하고 이를 사용하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

Promise.allSettled() 메서드는 주어진 모든 약속이 이행되거나 거부된 후에 를 반환합니다 code>는 객체 배열로 구성되며, 각 객체는 해당 Promise 결과를 나타냅니다. <code>Promise.allSettled() 方法返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise，并带有一个对象数组，每个对象表示对应的 promise 结果。

接着，我们来看看 Promise.allSettled() 是如何工作的。

1. Promise.allSettled()

Promise.allSettled() 可用于并行执行独立的异步操作，并收集这些操作的结果。

该函数接受一个 promise 数组(通常是一个可迭代对象)作为参数:

const statusesPromise = Promise.allSettled(promises);

当所有的输入 promises 都被 fulfilled 或 rejected 时，statusesPromise 会解析为一个具有它们状态的数组

• { status: 'fulfilled', value: value } — 如果对应的 promise 已经 fulfilled

• 或者 {status: 'rejected'， reason: reason} 如果相应的 promise 已经被 rejected

在解析所有 promises 之后，可以使用 then 语法提取它们的状态:

statusesPromise.then(statuses => {
 statuses; // [{ status: '...', value: '...' }, ...]
});

或者使用 async/await 语法：

const statuses = await statusesPromise;
statuses; // [{ status: '...', value: '...' }, ...]

2. 取水果和蔬菜

在深入研究 Promise.allSettle() 之前，我们先定义两个简单的 helper 函数。

首先，resolveTimeout(value, delay)返回一个 promise ，该 promise 在经过 delay 时间后用 value 来实现

function resolveTimeout(value, delay) {
  return new Promise(
    resolve => setTimeout(() => resolve(value), delay)
  );
}

第二，rejectTimeout(reason, delay) - 返回一个 promise，在经过 delay 时间后拒绝reason。

最后，我们使用这些辅助函数来试验 promise.allsettle()。

2.1 All promises fulfilled

我们同时访问当地杂货店的蔬菜和水果。访问每个列表是一个异步操作:

const statusesPromise = Promise.allSettled([
  resolveTimeout(['potatoes', 'tomatoes'], 1000),
  resolveTimeout(['oranges', 'apples'], 1000)
]);
// wait...
const statuses = await statusesPromise;
// after 1 second
console.log(statuses); 
// [
//   { status: 'fulfilled', value: ['potatoes', 'tomatoes'] },
//   { status: 'fulfilled', value: ['oranges', 'apples'] }
// ]

线上事例：https://codesandbox.io/s/all-resolved-yyc0l?file=/src/index.js

Promise.allSettled([...])返回一个 promise  statusesPromise，该 promise 在1秒内解决，就在蔬菜和水果被解决之后，并行地解决。

statusesPromise 解析为一个包含状态的数组。

• 数组的第一项包含有蔬菜的已完成状态:status: 'fulfilled', value: ['potatoes', 'tomatoes'] }

• 同样的方式，第二项是水果的完成状态: { status: 'fulfilled', value: ['oranges', 'apples'] }

2.2一个 promise 被拒绝

想象一下，在杂货店里已经没有水果了。在这种情况下，我们拒绝水果的 promise。

promise.allsettle() 在这种情况下如何工作?

const statusesPromise = Promise.allSettled([
  resolveTimeout(['potatoes', 'tomatoes'], 1000),
  rejectTimeout(new Error('Out of fruits!'), 1000)
]);
// wait...
const statuses = await statusesPromise;
// after 1 second
console.log(statuses); 
// [
//   { status: 'fulfilled', value: ['potatoes', 'tomatoes'] },
//   { status: 'rejected', reason: Error('Out of fruits!') }
// ]

线上事例：https://codesandbox.io/s/one-rejected-ij3uo?file=/src/index.js

Promise.allSettled([...]) 返回的 promise 在 1 秒后解析为一个状态数组:

• 数组的第一项，蔬菜 promise 成功解析：{ status: 'fulfilled', value: ['potatoes', 'tomatoes'] }

• 第二项，因为水果 promise  被拒绝，所以是一个拒绝状态: { status: 'rejected', reason: Error('Out of fruits') }

即使输入数组中的第二个 promise  被拒绝，statusesPromise仍然会成功解析一个状态数组。

2.3 所有的 promises 都被 rejected

如果杂货店里的蔬菜和水果都卖光了怎么办？在这种情况下，两个 promise 都会被拒绝。

const statusesPromise = Promise.allSettled([
  rejectTimeout(new Error('Out of vegetables!'), 1000),
  rejectTimeout(new Error('Out of fruits!'), 1000)
]);
// wait...
const statuses = await statusesPromise;
// after 1 second
console.log(statuses); 
// [
//   { status: 'rejected', reason: Error('Out of vegetables!')  },
//   { status: 'rejected', reason: Error('Out of fruits!') }
// ]

线上事例：https://codesandbox.io/s/all-rejected-z4jee?file=/src/index.js

在这种情况下，statusesPromise仍然成功地解析为一个状态数组。然而，该数组包含被拒绝的promise 的状态。

3.总结

Promise.allSettled(promises)可以并行地运行 promise，并将状态（fulfilled 或reject）收集到一个聚合数组中。

Promise.allSettled(...)

다음으로 Promise.allSettled()가 어떻게 작동하는지 살펴보겠습니다. 🎜

1. Promise.allSettled()

🎜Promise.allSettled()는 독립적인 비동기 작업을 병렬로 실행하고 결과를 수집하는 데 사용할 수 있습니다. 이러한 작업. 🎜🎜이 함수는 promise 배열(일반적으로 반복 가능한 객체)을 매개변수로 받습니다. 🎜rrreee🎜모든 입력 promise가 fulfilled인 경우 또는 거부, statusesPromise는 상태🎜

• 🎜{ 상태의 배열로 확인됩니다. : 'fulfilled', value: value } — 해당 Promise가 fulfilled🎜
• 🎜 또는 {status: 'rejected''인 경우 이유: 이유} 해당 Promise가 거부🎜

🎜🎜🎜모든 Promise를 구문 분석한 후 then 구문을 사용하여 상태를 추출할 수 있습니다. 🎜rrreee🎜 또는 async/await 구문을 사용하세요. 🎜rrreee

2. 과일과 야채 가져오기

🎜 Promise에 대한 심층 연구. allSettle() 먼저 두 가지 간단한 helper 함수를 정의합니다. 🎜🎜첫 번째, resolveTimeout(value, Delay)는 delay 시간 이후에 value를 사용하여 구현되는 Promise를 반환합니다 🎜rrreee🎜 2. rejectTimeout(reason, Delay) - delay 시간 이후 reason을 거부하는 Promise를 반환합니다. 🎜🎜마지막으로 이러한 도우미 함수를 사용하여 promise.allsettle()을 실험합니다. 🎜🎜2.1 모든 약속 이행🎜🎜또한 야채와 과일을 구입하기 위해 현지 식료품점을 방문합니다. 각 목록에 액세스하는 것은 비동기 작업입니다:🎜rrreee

🎜온라인 예: https://codesandbox.io/s/all-resolved-yyc0l?file=/src/index.js🎜

🎜 Promise.allSettled([...])는 야채와 과일이 병렬로 해결된 직후 1초 안에 해결되는 Promise statusesPromise를 반환합니다. 🎜🎜statusesPromise는 상태를 포함하는 배열로 확인됩니다. 🎜

• 🎜 배열의 첫 번째 항목에는 야채의 완료 상태가 포함됩니다:상태: 'fulfilled', 값: ['감자', 'tomato'] }🎜
• 🎜마찬가지로 두 번째 항목은 과일의 완료 상태입니다: { status: 'fulfilled', value: ['oranges' , '사과' ] }🎜

🎜2.2 거부된 약속🎜🎜식료품점에 더 이상 과일이 없다고 상상해 보세요. 이 경우 우리는 과일 약속을 거부합니다. 🎜🎜promise.allsettle() 이 경우 어떻게 작동하나요?🎜rrreee

🎜온라인 예: https://codesandbox.io/s/one-rejected-ij3uo?file= / src/index.js🎜

🎜Promise.allSettled([...]) 반환된 Promise는 1초 후에 상태 배열로 확인됩니다.🎜

🎜배열의 첫 번째 항목인 야채 promise가 성공적으로 해결되었습니다. { 상태: 'fulfilled', 값: [ '감자', '토마토'] }🎜

🎜두 번째 항목은 과일 약속이 거부되었기 때문에 거부 상태입니다: { 상태: '거부됨', 이유: 오류( '과일 부족') }🎜

🎜입력 배열의 두 번째 약속이 거부되더라도 statusesPromise는 상태 배열을 성공적으로 구문 분석합니다. 🎜🎜2.3 모든 약속 거부됨🎜🎜식료품점에 야채와 과일이 다 팔리면 어떻게 되나요? 이 경우 두 약속이 모두 거부됩니다. 🎜rrreee

🎜온라인 예: https://codesandbox.io/s/all-rejected-z4jee?file=/src/index.js🎜

🎜이 경우 statusesPromise 여전히 상태 배열로 성공적으로 구문 분석됩니다. 그러나 배열에는 거부된 약속의 상태가 포함됩니다. 🎜

3. 요약

🎜Promise.allSettled(promises)는 Promise를 병렬로 실행하고 상태(완료 또는 거부)를 집계하여 수집할 수 있습니다. 배열. 🎜🎜Promise.allSettled(...)는 일부 비동기 작업이 실패하더라도 병렬 및 독립적 비동기 작업을 수행하고 모든 결과를 수집해야 할 때 유용합니다. 🎜

영어 원본 주소: https://dmitripavlutin.com/promise-all-settled/

저자: Dmitri Pavlutin

더 많은 프로그래밍 관련 지식을 보려면 Programming Video를 방문하세요! !

위 내용은 Promise.allSettled() 사용 방법에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!