[英]Javascript await/async order of execution
So I'm trying to wrap my head about promises/await/async.所以我试图把我的头放在 promises/await/async 上。 I can't understand why when go() is executed the alert with "finished" go right after the console.log(coffee).
我不明白为什么当执行 go() 时,在 console.log(coffee) 之后会出现带有“finished”的警报。 Why does it only wait for getCoffee() and the other axios calls are ran after the "finished" alert when all functions are using await/promises?
当所有函数都使用 await/promises 时,为什么它只等待 getCoffee() 而其他 axios 调用在“完成”警报之后运行?
function getCoffee() { return new Promise(resolve => { setTimeout(() => resolve("☕"), 2000); // it takes 2 seconds to make coffee }); } async function go() { try { alert("ok"); const coffee = await getCoffee(); console.log(coffee); // ☕ const wes = await axios("https://randomuser.me/api/?results=200"); console.log("wes"); // using string instead of value for brevity const wordPromise = axios("https://randomuser.me/api/?results=200"); console.log("wordPromise"); // using string instead of value for brevity alert("finish"); } catch (e) { console.error(e); // 💩 } } go();
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
The issue here is that console.log
isn't always as synchronous as one might think.这里的问题是
console.log
并不总是像人们想象的那样同步。 The specification only requires that console.log
display a message in the developer console, but doesn't make any requirements about how or when the message will display.该规范仅要求
console.log
在开发者控制台中显示一条消息,但没有对消息的显示方式或时间提出任何要求。 Depending on your browser, results may differ, however usually it's implemented something like the following:根据您的浏览器,结果可能会有所不同,但通常它的实现方式如下:
console.log
the request gets pushed onto a stack (so consecutive calls to console.log
always execute in order)console.log
,请求会被推送到堆栈上(因此对console.log
连续调用始终按顺序执行) Because console.log
is actually a complex operation like this, it may not finish executing before the alert
statement runs (in some browsers).因为
console.log
实际上是这样一个复杂的操作,它可能在alert
语句运行之前执行不完(在某些浏览器中)。 By replacing every call to alert
with console.log
or every call to console.log
with alert
you should see that things are actually executing in the expected order.通过每次调用替换到
alert
带console.log
或每次调用console.log
与alert
,你应该看到的东西实际上是在期待的顺序执行。
The async/await is working as intended. async/await 正在按预期工作。 It is just that the the console takes some time to update or the browser is repainting, therefore the
alert
is triggered before it can repaint.只是控制台需要一些时间来更新或浏览器正在重新绘制,因此在重新绘制之前触发了
alert
。 You can verify it by using all alert
instead of console.log
.您可以使用 all
alert
而不是console.log
来验证它。 All the alert
are executed in the correct order.As shown in the example below.所有
alert
都以正确的顺序执行。如下例所示。
function getCoffee() { return new Promise(resolve => { setTimeout(() => {resolve("coffee")}, 2000); // it takes 2 seconds to make coffee }); } async function go() { try { alert("ok"); const coffee = await getCoffee(); alert(coffee); // ☕ const wes = await getCoffee(); alert(wes); const wordPromise = getCoffee(); alert(wordPromise); alert("finish"); } catch (e) { console.error(e); // 💩 } } go();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.