异步等待函数的奇怪行为

Question

我有以下异步代码示例：

// 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);    
}

和两个测试：

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);                
    }    
}

下面是运行separatleytest1（）和test2（）后chrome控制台中的结果：

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

问题：为什么我们在for loop（test2）中使用函数someWrapper（），得到的结果与我们直接复制粘贴到for loop（test1）中的结果不同？

（上面的例子很抽象，但是我发现这种行为调用ajax请求（而不是console.log（'A：'i）；和console.log（'B：'i）；）在我的应用程序中非常重要（请求A1必须在请求B0之前...））

Answer 1

测试2：

在使test2异步之前，它不是异步的。您已经在test2中编写了同步代码。它们是控制台。日志test2中只有异步代码是对promise的调用。让我们把它分解一下

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

上面的代码按顺序激发someWrapper（）5次。因此，它编写第一个sync代码，即控制台。在控制台中连续记录（'A'i）5次。

然后，每个某物Wrapper（）等待asyncpromise返回parallelly.after每个promise解决它打印的内部promise。直到promise解决，执行停止，不能继续下一步

然后，在解析promise后，它打印出控制台中的第二个sync代码，即console.log（'B'i）

测试1：

test1的行为将不同于test2。让我们打破它

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);
    }    
}

主要区别在于您正在等待内部for循环。因此，这实际上将暂停循环，而test1的情况并非如此

因此，对于每个迭代，它将打印控制台。日志（'A'i）

然后暂停迭代，等待getSomePromise（）

promise返回时将打印“内部promise”

然后打印控制台。日志（'B'i）

然后继续下一次迭代。

Answer 2

看着评论

@HMR-hm。。。我不明白-在有问题的示例中，有一个异步函数someWrapper（），但该函数不返回任何东西（它甚至没有return语句（！）-你能解释一下异步函数立即返回promise是什么意思吗卡米尔·基尔切夫斯基

似乎您不理解异步等待。我通常建议人们停止工作，等待你明白promise。然而，在下一个问题下的评论中，我给你答案：

someWrapper将立即返回解析为未定义的promise。someWrapper函数中的wait only“waitis”，但调用someWrapper的函数将立即收到一个在未定义中解析的promise。函数总是返回一些东西，如果在代码中没有，那么它将返回未定义的。如果它是一个没有返回的异步函数，那么它将返回一个在undefined-HMR中解析的promise。

wait是promise的语法糖（外观更好的代码），实际上并不等待任何东西。

也许下面的代码可以清除这些内容：

js prettyprint-override">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);