异步/等待在我的示例中不起作用

Question

Many JavaScript developers know about async/await and benefits of them so I try to test a old example of asynchronous action, let's see my experiment:

Undoubtedly the answer of below code is:

/*Line: 1*/ console.log(`1`);
/*Line: 2*/ console.log(`2`);
/*Line: 3*/ console.log(`3`);

//==>  123

So I wanna put a setTimeout for second line:

/*Line: 1*/ console.log(`1`);
/*Line: 2*/ setTimeout(() => {
               console.log(`2`);
            }, 0);
/*Line: 3*/ console.log(`3`);

//==> 132

Because of asynchronous action of second line the 2 is after the 13 , so in the console 132 is showed.

I decide to use async/await feature of new JavaScript to see 123 again, so I wrote the above code like this:

(async () => {
    console.log(`1`);
    await setTimeout(() => {
        console.log(`2`);
    }, 0);
    console.log(`3`);
})();

But it doesn't work and I saw 132 again in my console. Which part I did wrong or I don't know about it?

Answer 1

await waits for promise to be resolved. Since setTimeout is not a promise, execution of program will not wait till it is executed. You would need to wrap setTimeout() within promise as specified in first example of following link for your example to work as expected:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Answer 2

setTimeout is not returning a promise. In order to get it to work, you will have to create a function returning a promise that is resolved inside the setTimeout callback.

 (async () => { console.log(`1`); await new Promise(resolve => { setTimeout(() => { resolve('resolved'); console.log(`2`); },0); }); console.log(`3`); })(); 

Answer 3

You can only await a function which returns a promise. Note that await can only be used inside an async function:

 async function someFunc() { console.log(`1`); await new Promise((resolve, reject) => setTimeout(() => { console.log(`2`); resolve(); }, 0)); console.log(`3`); } someFunc(); 

Answer 4

Await should be called on a function that returns a promise (otherwise it just returns).

setTimeout does not return a promise so you should wrap it with a function that returns a promise.

Read more about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

This code should do the work.

 (async() => { console.log(`1`); await (() => { return new Promise( resolve => { setTimeout(() => { console.log(2); resolve() }, 1000); }); })(); console.log(`3`); })(); 

Answer 5

您需要创建函数，例如async function foo() {} ，并在其中进行await调用。