How to execute code while waiting for a promise to resolve?

Question

Take a look at this example code:

var arrayToSend = [1,2,3,4,5,6,7,8,9]

function send(x){ // 'sends' the value. resolves after 1 second.
    return new Promise(resolve=>{
        setTimeout(()=>{
            resolve()
            console.log('sent '+x)
            },1000)
    })
}

function calculate(x){return x**2} // just an example, there would be something expensive here.

async function loopAndSendArray(){ 
    for (let val of arrayToSend){
        let calculatedVal = calculate(val)     //calculate this when waiting for the send promise to finish BUT don't send the value until it's resolved
        await send(calculatedVal)}
}

I'd like the script to call calculate() for the next value when it's waiting for the send() promise of the former value to finish (to save time that would otherwise be spent calculating it after the promise). It would not call the next send() with the next value until the first one is resolved.

Answer 1

Instead of awaiting the call to send , assign the call to an outside variable, and then await it after calling calculate in the next iteration.

 var arrayToSend = [1, 2, 3, 4, 5, 6, 7, 8, 9] function send(x) { return new Promise(resolve => { setTimeout(() => { resolve() console.log('sent ' + x) }, 1000) }) } function calculate(x) { return x ** 2 } async function loopAndSendArray() { let lastSend; for (const val of arrayToSend) { const calculatedVal = calculate(val); await lastSend; lastSend = send(calculatedVal) } await lastSend; } loopAndSendArray();

This is optimal no matter whether the calculation takes more or less time than the network request, if the requests have to be made in serial (as your current code is doing). If the requests can be made in parallel and the calculation takes less time than the network request, you could calculate and send multiple (or all) at once.

Answer 2

There is no nice way to implement this, since async / await is inherently sequential and you want to do things in a different order, but this code should do it:

async function loopAndSendArray() {
    let prevPromise;
    for (let val of arrayToSend) {
        let calculatedVal = calculate(val)
        await prevPromise;
        prevPromise = send(calculatedVal);
        // prevent unhandled rejections crashing the app in case `calculate` throws
        prevPromise.catch(e => {/* ignore */});
    }
    await prevPromise;
}