异步等待函数的奇怪行为

本文介绍了异步等待函数的奇怪行为的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有以下异步代码示例：

//函数 函数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.