如何正确地兑现承诺？

Question

I'm having issues using promises in javascript (es6).

So far I've used promises but not so extensively, and in this project I need to chain promises inside others, and make sure to wait one to conclude before I continue with the rest of the tasks.

Here is an example of my code:

myArray = ['element1', 'element2', /*...*/]
const function1 = () => {
    return function2()
             .then(() => {
                 console.log('first to fire')
                 return myArray
                     .reduce(async(previousPromise, element) => {
                          console.log('reduce', element)
                          await previousPromise
                          return function3(element)
                     }, Promise.resolve())
             })
             .then(() => {
                 console.log('this should fire last but actually fires before the last function3() is done')
             })
}
/*
function1 => the function I'm trying to create, which should return a promise. 

function2 => an external function that I have no control. this function
is asynchronous and returns a promise.

function3 => this is also an asynchronous external function that
returns a promise that I should execute to get what I need. It 
receives as parameter a value which I have in myArray, and it should
execute successively one after the other (for example as if 'element2'
was dependent of 'element1', and so on). 
*/

somehow I'm not chaining this promise properly as the result I'm getting is (myArray with only 2 elements):

>first to fire
>reduce element1
>reduce element2
>this should fire last but actually fires before the last function3() is done
>a log I've added inside of function3 which corresponds to 'element1'
>a log I've added inside of function3 which corresponds to 'element2'

So... Basically I need everything to 'wait' until all the promises are done with their work. How should I properly do that?

Answer 1

I don't see why your code wouldn't work (most likely the problem is inside function3 , which fulfills its returned promise too early), but you should try to keep it simple:

async function function1() {
    await function2();
    console.log('first to fire')
    for (const element of myArray) {
        console.log('loop', element);
        await function3(element);
    }
    console.log('last to fire');
}

Answer 2

You should be using await to get the result from function3. You also need to use async when declaring your new function. Working example:

 myArray = ['element1', 'element2', 'element3'] const function1 = async() => { return function2() .then(async(results) => { console.log('first to fire with ' + results) return await myArray.reduce(async(accumP, element) => { console.log('reduce', element) return await accumP + await function3(results, element) }, Promise.resolve('')) }) .then((finalResults) => { console.log('this should fire last... and does, with ' + JSON.stringify(finalResults)) }) } const function2 = async() => new Promise((resolve) => setTimeout(() => resolve('foo '), 10)) const function3 = async(prefix, element) => new Promise((resolve) => setTimeout(() => resolve(prefix + element + ' bar, '), 50)) function1() 

As others have noted in the comments, if you are able to use await anyway, you could greatly simplify things for yourself in understanding this by never using then and always using await .

 myArray = ['element1', 'element2', 'element3'] const function1 = async() => { const f2results = await function2() const f3results = await myArray.reduce(async(accumP, element) => { console.log('reduce', element) return await accumP + await function3(f2results, element) }, Promise.resolve('')) console.log('this should fire last... and does, with ' + JSON.stringify(f3results)) } const function2 = async() => new Promise((resolve) => setTimeout(() => resolve('foo '), 10)) const function3 = async(prefix, element) => new Promise((resolve) => setTimeout(() => resolve(prefix + element + ' bar, '), 50)) function1()