异步等待函数的奇怪行为

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

这是运行 separatley test1() 和 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 必须在请求 @987654332 之前@...))

Answer 1

看cmets

@HMR - 嗯......我不明白 - 有问题的例子有异步 函数 someWrapper() 但该函数不返回任何内容（它 甚至没有返回语句（！）） - 你能解释一下你是什么 指的是async functions immediately return a promise？ - 卡米尔 Kielczewski

您似乎不了解异步等待。我通常建议人们在你理解承诺之前解雇等待。但是在下一条评论中，我会给你答案：

someWrapper 将立即返回一个解析为 不明确的。 await 仅在 someWrapper 函数中“等待”，但 调用 someWrapper 的函数将立即收到一个承诺 在未定义中解析。函数总是返回一些东西，如果你不这样做 在代码中，它将返回未定义。如果是异步函数 如果没有返回，那么它将返回一个解决的承诺 未定义 - HMR。

Await 是 Promise 的语法糖（看起来更漂亮的代码），实际上并不等待任何东西。

也许下面的代码可以解决问题：

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

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

在测试之外，我们不会等待任何东西 Promise {}

等待之后

那么我建议你只使用 Promise，直到你这样做为止。

Answer 2

测试2：

你的 test2 不是异步的，直到你让它异步。您已经在 test2 中编写了同步代码。它们是 console.log。只有 test2 中的异步代码调用了 Promise。让我们分解一下

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

上面的代码依次触发 someWrapper() 5 次。所以它编写了第一个 sync 代码，即 console.log('A'+i) 5 次在控制台中连续显示。

然后 每个 someWrapper() 等待 async 承诺返回并行。在每个承诺解决后，它会打印“内部承诺”。 直到 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);
    }    
}

主要区别在于你是awaiting inside for loop。所以这实际上将是 pause loop 而不是 test1

所以每次迭代都会打印出console.log('A'+i)

然后暂停 await getSomePromise()

的迭代

当 promise 返回时将打印“Inside Promise”

然后打印console.log('B'+i)

然后继续下一次迭代。