等待异步 function 会暂停执行，即使 function 立即返回

Question

I've recently ran into a problem that essentially boils down to the following code snippet:

 let a = 0; async function f1(){ // doesn't do anything most of the time } async function f2(){ a++; await f1(); console.log(a); } for (let i=0;i<3;i++){ f2(); }

I have an async function f1 that may do some asynchronous operations, but doesn't do anything most of the time. It is called and awaited inside another function f2 that may get called rapidly without waiting for the previous call to complete, such as in the for-loop in this example.

In this example, I would expect the output to be 1, 2 and 3; since f1 immediately returns, awaiting it shouldn't pause the execution of f2 , and therefore the code should run synchronously as if there wasn't any async-await involved. However, when I test this in chrome or firefox, the output is always 3, 3 and 3, indicating that await f1() paused the execution of f2 and continued with the for-loop instead.

Similarly, this also causes logic errors in the script I'm trying to write.

What's the reason for this behaviour? And is there any way to work around this?

Answer 1

From the mdn web docs on Promise.prototype.then :

Once a Promise is fulfilled or rejected, the respective handler function (onFulfilled or onRejected) will be called asynchronously (scheduled in the current thread loop).

Therefore, any code that relies on promises and their then -method will run asynchronously too, even if those promises are already resolved as in the case of your f1 -method.

You can work around this to some degree by using custom thenable objects instead:

 let a = 0; function f1(){ return {then:(onResolve)=>{ onResolve(); // resolves immediately }}; } async function f2(){ a++; f1().then(()=>{ console.log(a); }); } for (let i=0;i<3;i++){ f2(); }

However, returning those from an async function or awaiting them will convert them into normal promises again, causing the code to run asynchronously as before.

So, if you really want to use async/await, I don't think it's possible to avoid this sort of behaviour; a better idea would probably to rewrite your code in such a way that this doesn't cause problems.

Answer 2

You need to await f2(); in the loop to get the expected output of 1, 2, 3 . Like so:

(async function() {
    for (let i=0;i<3;i++){
        await f2();
    }
})();

Why? Because in original code when you don't await f2(); :

1. f2() gets called (iteration 1)
2. a gets incremented (iteration 1)
3. the code for f1 is queued (iteration 1)
4. f2() gets called (iteration 2)
5. a gets incremented (iteration 2)
6. the code for f1 is queued (iteration 2)
7. f2() gets called (iteration 3)
8. a gets incremented (iteration 3)
9. the code for f1 is queued (iteration 3)
10. a is now 3
11. Now, queued code is processed if its complete (in any order)
12. Since, value of a is 3 at this point, any of 3 queued f2 calls that successfully await f1, would print 3 in f2