Что такое Promise.allSettled()! Новички и ветераны должны знать?

JavaScript

Эта статья приняла участие"Проект "Звезда раскопок"", чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.

Автор: Дмитрий Павлютин Переводчик: Front-end Xiaozhi Источник: дмитрипавлути

Есть мечта, есть галантерейные товары, поиск в WeChat【Переезд в мир】Обратите внимание на эту мудрость чаши-щетки, которая все еще моет посуду ранним утром.

Эта статьяGitHubGitHub.com/QQ449245884…Включено, и есть полные тестовые площадки, материалы и мой цикл статей для интервью с производителями первой линии.

Promise.allSettled()Метод возвращает обещание, что все данные обещания были выполнены.fulfilledилиrejectedПослеpromise, с массивом объектов, каждый из которых представляет соответствующий результат обещания.

Далее посмотримPromise.allSettled()как это работает.

1. Promise.allSettled()

Promise.allSettled()Может использоваться для параллельного выполнения независимых асинхронных операций и сбора результатов этих операций.

Функция принимаетpromiseМассив (обычно итерируемый объект) в качестве параметра:

const statusesPromise = Promise.allSettled(promises);

когда все вводpromisesвсе былоfulfilledилиrejectedчас,statusesPromiseбудет разрешаться в массив с их состоянием

  1. { status: 'fulfilled', value: value }— если соответствующий промис имеетfulfilled

  2. или{status: 'rejected'， reason: reason}Если соответствующее Обещание былоrejected

2823245504-60af4dde07f62_fix732.png

После разрешения всех обещаний вы можете использоватьthenСинтаксис извлекает их состояние:

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

или использоватьasync/awaitграмматика:

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

2. Кушайте фрукты и овощи

углубленное исследованиеPromise.allSettle()Прежде мы определим два простыхhelperфункция.

первый,resolveTimeout(value, delay)возвращает обещание, чтоdelayиспользовать спустя времяvalueреализовать

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

второй,rejectTimeout(reason, delay)- возвращает обещание после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'] }
// ]

Онлайн кейс:код sandbox.IO/Yes/all-Res OL…

Promise.allSettled([...])вернуть обещаниеstatusesPromiseОбещание решается за 1 секунду, и после того, как овощи и фрукты решаются, они решены параллельно.

statusesPromiseРазбирает массив, содержащий состояние.

  1. Первый элемент массива содержит завершенный статус овоща:status: 'fulfilled', value: ['potatoes', 'tomatoes'] }
  2. Точно так же второй пункт — статус завершения фрукта:{ status: 'fulfilled', value: ['oranges', 'apples'] }

2.2 Обещание отклонено

Представьте, что в продуктовом магазине закончились фрукты. В этом случае мы отвергаем обещание плода.

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!') }
// ]

Онлайн кейс:код sandbox.IO/yes/one-heat-accumulation-evil-…

Promise.allSettled([...])Возвращенное обещание находится в1Через секунды разрешается массив состояний:

  1. Первый элемент массива, овощиpromiseУспешный разбор:{ status: 'fulfilled', value: ['potatoes', 'tomatoes'] }

  2. Второй пункт, поскольку обещание плода было отвергнуто, является отвергнутым состоянием:{ status: 'rejected', reason: Error('Out of fruits') }

Даже если второе обещание во входном массиве будет отклонено,statusesPromiseпо-прежнему будет успешно анализировать массив состояний.

2.3 Все обещания отвергаются

Что делать, если в продуктовом магазине закончились овощи и фрукты? В этом случае оба промиса будут отклонены.

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!') }
// ]

Онлайн кейс:код sandbox.io/yes/all-heat-accumulation-evil-…

при этих обстоятельствах,statusesPromiseПо-прежнему успешно разрешается в массив состояний. Однако массив содержит статус отклоненного обещания.

3. Резюме

Promise.allSettled(promises)Обещания можно запускать параллельно, а статус (выполнено или отклонено) собирается в агрегированный массив.

Promise.allSettled(...)Очень полезно, когда вам нужно выполнять параллельные и независимые асинхронные операции и собирать все результаты, даже если некоторые асинхронные операции могут завершиться ошибкой.

~~ Готово, я Шиванжи, ваши лайки и просмотры - самая большая награда за мое мытье посуды.

Ошибки, которые могут быть в редактировании, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки потом, много времени тратится на отладку журнала.Кстати, всем рекомендую полезный инструмент мониторинга BUG.Fundebug.

оригинал:Рисовое путешествие avlutin.com/promise-all…

общаться с

Статья постоянно обновляется каждую неделю, вы можете искать в WeChat **【Moving the World】Сначала прочитай, ответь[Благополучие] **Вас ждет много фронтенд-видео, эта статья GitHubGitHub.com/QQ449245884…Он был записан, добро пожаловать в Star.

Категории