异步等待函数的奇怪行为 [英] Async await strange behaviour with functions

问题描述

我有以下异步代码示例：

  //函数
 
函数getSomePromise（）{ 
 let a = new Promise（（resolve，reject）=> {
 setTimeout（function（）{
 console.log（Inside promise ...）; 
解决（成功！）; 
}，1000）; 
}）; 
 
返回a; 
} 
 
异步函数someWrapper（i）{
 console.log（'A：'+ i）; 
 await getSomePromise（）; 
 console.log（'B：'+ i）; 
} 
  

两项测试：

  async function test1（）{
 for（let i = 0; i <5; i ++）{
 // someWrapper函数的主体复制粘贴： 
 console.log（'A：'+ i）; 
 await getSomePromise（）; 
 console.log（'B：'+ i）; 
 
 
 
 async function test2（）{
 for（let i = 0; i <5; i ++）{
 someWrapper（i） ; 
 
 
 
 
 $ b $ p 
 $ b 
这里是运行分离后的chrome控制台的结果 test1（）和 test2（）： 
 
 
 测试1 |测试2 
 -------------------------------------------- -  
 A：0 |答：0 
承诺内... |答：1 
 B：0 | A：2 
 A：1 |答：3 
承诺内... |答：4 
 B：1 |内部承诺... 
 A：2 | B：0 
承诺内... |内部承诺... 
 B：2 | B：1 
 A：3 |内部承诺... 
承诺内... | B：2 
 B：3 |内部承诺... 
 A：4 | B：3 
承诺内... |内部承诺... 
 B：4 | B：4 
  
 问题：为什么当我们使用函数 someWrapper（） in  for-loop （test2）我们得到的结果不同于我们将这个函数体直接复制粘贴到 for-loop （test1）？ 
 
 
 
（上面的例子非常抽象，但是我发现这个行为在调用ajax请求时（而不是 console.log（'A：'+ i）; 和 console.log（'B：'+ i）; ）在我的app中请求 A1 必须在请求前 B0  ...））
解决方案
 
看看评论 
 
 
 
 
 @HMR  -  hm ...我不明白 - async 
函数someWrapper（）但该函数不返回任何东西（它
甚至没有返回语句（！）） - 你能解释一下你的
是什么意思c $ c>异步函数立即返回一个承诺？ -  Kamil Kielczewski  
 
看来你不理解异步等待。我通常建议人们放下等待直到你明白承诺。然而，在问题的下一个评论中，我给出了答案：
 
 
 
 
 someWrapper将立即返回一个承诺，解析为
 undefined。 await只在等待someWrapper函数中，但调用someWrapper的
函数将立即收到
在undefined中解析的承诺。函数总是返回一些东西，如果你在代码中没有
，那么它将返回undefined。如果它是一个没有返回的异步函数
，那么它将返回一个在
 undefined中解析的承诺 -  HMR。
 
 
 
等待是语法糖（更好的代码）承诺，并没有实际等待任何事情。
 
 
 
也许下面的代码清除了事情：
 
 
 
 
 
 
  var test = async（）=> {await 22; //如果value是promise console.log（wait wait）;} var result = test（）; console.log（外部测试我们不等待任何东西，result ）;  

如果您不明白为什么输出代码是：

外部测试我们不等待任何事情Promise {<<<等待

然后我会建议您使用承诺，直到你做。

I have following asynchronous code example:

// Functions

function getSomePromise() {
    let a = new Promise((resolve, reject) => {    
        setTimeout(function(){
            console.log("Inside promise...");
            resolve("Success!"); 
        }, 1000);
    });

    return a;
}

async function someWrapper(i) {
    console.log('A: '+ i);
    await getSomePromise();
    console.log('B: ' + i);    
}

And two tests:

async function test1() {
    for(let i=0; i<5; i++) {
        // body copy-pasted of someWrapper function:
        console.log('A: '+ i);
        await getSomePromise();
        console.log('B: ' + i);
    }    
}

async function test2() {
    for(let i=0; i<5; i++) {
        someWrapper(i);                
    }    
}

And here are results in chrome console after run separatley test1() and test2():

Test 1               |      Test 2
---------------------------------------------
A: 0                 |      A: 0
Inside promise...    |      A: 1
B: 0                 |      A: 2
A: 1                 |      A: 3
Inside promise...    |      A: 4
B: 1                 |      Inside promise...
A: 2                 |      B: 0
Inside promise...    |      Inside promise...
B: 2                 |      B: 1
A: 3                 |      Inside promise...
Inside promise...    |      B: 2
B: 3                 |      Inside promise...
A: 4                 |      B: 3
Inside promise...    |      Inside promise...
B: 4                 |      B: 4

Question: Why when we use function someWrapper() in for-loop (test2) we get different result than wen we copy-paste this function body directly into for-loop (test1) ?

(above example is quite abstract, however "I found this behaviour" on calling ajax requests (instead console.log('A: '+ i); and console.log('B: '+ i);) which sequence are very important in my app (request A1 must be before request B0...) )

解决方案

Looking at the comments

@HMR - hm... I not understand - in question example there is async function someWrapper() but that function don't return anything (it even doesn't have return statement (!) ) - can you explain what do you mean by async functions immediately return a promise? - Kamil Kielczewski

it seems you don't understand the async await. I usually advice people to lay off await until you understand promises. However in next comment under question I give you the answer:

someWrapper will immediately return a promise that resolves to undefined. The await only "waits" in the someWrapper function but the function calling someWrapper will immediately receive a promise that resolves in undefined. Functions always return something, if you don't in code then it will return undefined. If it's an async function without a return then it'll return a promise that resolves in undefined - HMR.

Await is syntax sugar (nicer looking code) for promises and doesn't actually wait for anything.

Maybe the following code clears things up:

var test = async () => {
   await 22;//doesn't even matter if value is promise
   console.log("after wait");
}
var result = test();
console.log("outside test we don't wait for anything",result);

If you don't understand why the output of that code is:

outside test we don't wait for anything Promise {< pending >}

after wait

Then I'd advice you to use just promises, until you do.

这篇关于异步等待函数的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！