Почему мои обещания не обрабатываются асинхронно?

Question

У меня есть две функции: одна функция asyncTest_returnPromise просто возвращает обещание, а другая функция asyncTest 3 раза вызывает это обещание, вызывая Promise.all (обещания) для массива обещаний. В каждом обещании в массиве я отправляю одно значение ("Foo") на консоль перед вызовом функции asyncTest_returnPromise и отправляю другое значение ("Bar") на консоль после ее вызова.

Учитывая мое понимание функции Promise.all, я ожидал, что каждое обещание в массиве будет обработано только после того, как будет выполнено последующее обещание, то есть оба оператора console.log находятся внутри каждого обещания в массив, результат был бы: Foo Bar Foo Bar Foo Bar

Вместо этого, однако, вывод выглядит так: Foo Foo Foo Bar Bar Bar

Как и все экземпляры "Foo" были отправлены на консоль еще до первого «бара», мне кажется, эти обещания должны обрабатываться одновременно.

Вот две функции:

function asyncTest_returnPromise() {
    return new Promise((resolve, reject) => {
        resolve()
    })
}

function asyncTest() {
    var promises = []
    for (i = 0; i < 3; i++) {
        promises.push(new Promise((resolve, reject) => {
            console.log("Foo")
            asyncTest_returnPromise().then(_ => {
                console.log("Bar")
                resolve();
            })
        }))
    }
    Promise.all(promises)
}

asyncTest();

Итак, я хотел бы знать, неправильно ли я понял цель Promise.all или как она работает? Вызывает ли какая-то другая часть моего кода все выходные данные "foo" перед всеми выходными данными "bar"? Что мне нужно сделать, чтобы завершить каждое обещание, прежде чем перейти к следующему?

Answer 1

Они работают асинхронно.

Каждый раз, когда вокруг l oop вы:

1. Log Foo
2. Создание обещания (которое разрешается немедленно)
3. Использование then чтобы поставить функцию в очередь после выполнения обещания

Затем l oop возвращается к следующей итерации.

После этого, когда функция asyncTest завершена, событие l oop может просматривать функции, поставленные в очередь.

Поскольку все обещания разрешены, каждое из них запускается ( и войдите в систему Bar).

Если вы хотите дождаться обещания , прежде чем снова обойти l oop, тогда вам нужно взглянуть на ключевое слово await что позволит asyncTest приостановить (и go спать), пока обещание не будет выполнено.

Answer 2

Так работает Event L oop. Позвольте мне объяснить, как он обрабатывается простыми словами :

1. Сначала l oop запускается и запускается 3 раза. Каждый раз он создает новую микрозадачу и помещает ее в очередь для выполнения последующих задач. Порядок, в котором были созданы эти микрозадачи, сохраняется.

2. Теперь эти микрозадачи обрабатываются по одной, синхронно. Каждая из этих микрозадач (которые выполняются синхронно при выполнении L oop) выполняет console.log('Foo');, а затем создает еще одну микрозадачу (еще одно Обещание), которые ставятся в очередь вызовом .then(). Таким образом, эта дополнительная микрозадача помещается в очередь (за этими тремя первыми микрозадачами). Это происходит для каждой микрозадачи, создаваемой l oop (так 3 раза). Здесь вы напечатали Foo 3 раза.

3. Теперь, когда все наши микрозадачи (3) обработаны, событие L oop продолжает идти и принимает следующие микрозадачи для обработка. На этот раз это микрозадача, выполняемая console.log('Bar');. Так бывает и трижды. Вот где вы напечатали Bar 3 раза.

Конечно, в Событии L oop происходит больше всего, но это, по сути, то, что происходит с вашими Обещаниями здесь.