Promise.all: Порядок разрешенных значений

Вскоре приказ сохраняется.

Следуя спецификации, на которую вы ссылаетесь, Promise.all(iterable) принимает iterable в качестве параметра и внутренне вызывает PerformPromiseAll(iterator, constructor, resultCapability) с ним, где последний зацикливается на iterable, используя IteratorStep(iterator)< /а>.

Разрешение реализовано через Promise.all() Resolve, где каждое разрешенное обещание имеет внутренний [[Index]] слот, который отмечает индекс промиса в исходном вводе.

Все это означает, что вывод строго упорядочен, поскольку итерация, которую вы передаете Promise.all(), строго упорядочена (например, массив).

Вы можете увидеть это в действии в скрипте ниже (ES6):

// Used to display results
const write = msg => {
  document.body.appendChild(document.createElement('div')).innerHTML = msg;
};

// Different speed async operations
const slow = new Promise(resolve => {
  setTimeout(resolve, 200, 'slow');
});
const instant = 'instant';
const quick = new Promise(resolve => {
  setTimeout(resolve, 50, 'quick');
});

// The order is preserved regardless of what resolved first
Promise.all([slow, instant, quick]).then(responses => {
  responses.map(response => write(response));
});

Как уже говорилось в предыдущих ответах, Promise.all объединяет все разрешенные значения с массивом, соответствующим порядку ввода исходных промисов (см. Агрегирование промисов).

Однако хочу отметить, что порядок сохраняется только на стороне клиента!

Разработчику кажется, что промисы выполняются по порядку, но на самом деле промисы обрабатываются с разной скоростью. Это важно знать, когда вы работаете с удаленным бэкэндом, потому что бэкэнд может получать ваши промисы в другом порядке.

Вот пример, демонстрирующий проблему с использованием тайм-аутов:

Обещание.все

const myPromises = [
  new Promise((resolve) => setTimeout(() => {resolve('A (slow)'); console.log('A (slow)')}, 1000)),
  new Promise((resolve) => setTimeout(() => {resolve('B (slower)'); console.log('B (slower)')}, 2000)),
  new Promise((resolve) => setTimeout(() => {resolve('C (fast)'); console.log('C (fast)')}, 10))
];

Promise.all(myPromises).then(console.log)

В коде, показанном выше, три промиса (A, B, C) даны Promise.all. Три обещания выполняются с разной скоростью (C — самая быстрая, а B — самая медленная). Вот почему console.log утверждения Promises отображаются в таком порядке:

C (fast) 
A (slow)
B (slower)

Если промисы являются вызовами AJAX, то удаленный сервер получит эти значения в указанном порядке. Но на стороне клиента Promise.all обеспечивает упорядочение результатов в соответствии с исходными позициями массива myPromises. Вот почему окончательный результат:

['A (slow)', 'B (slower)', 'C (fast)']

Если вы хотите также гарантировать фактическое выполнение ваших промисов, вам понадобится такая концепция, как очередь промисов. Вот пример использования p-queue (будьте осторожны, вам нужно обернуть все промисы в функции):

Последовательная очередь обещаний

const PQueue = require('p-queue');
const queue = new PQueue({concurrency: 1});

// Thunked Promises:
const myPromises = [
  () => new Promise((resolve) => setTimeout(() => {
    resolve('A (slow)');
    console.log('A (slow)');
  }, 1000)),
  () => new Promise((resolve) => setTimeout(() => {
    resolve('B (slower)');
    console.log('B (slower)');
  }, 2000)),
  () => new Promise((resolve) => setTimeout(() => {
    resolve('C (fast)');
    console.log('C (fast)');
  }, 10))
];

queue.addAll(myPromises).then(console.log);

Результат

A (slow)
B (slower)
C (fast)

['A (slow)', 'B (slower)', 'C (fast)']

Да, значения в results находятся в том же порядке, что и promises.

Можно было бы сослаться на спецификацию ES6 на Promise.all, хотя она немного запутанный из-за используемого API-интерфейса итератора и универсального конструктора промисов. Однако вы заметите, что каждый обратный вызов распознавателя имеет атрибут [[index]], который создается в итерации массива обещаний и используется для установки значений в массиве результатов.