Javascript等待/异步执行顺序

所以我试着对承诺/等待/异步进行总结。我不明白为什么在执行go（）时，在console.log（coffee）之后会出现带有“finished”go的警报。为什么当所有函数都使用wait/promises时，它只等待getCoffee（），而其他axios调用在“finished”警报后运行

函数getCoffee（）{ 返回新承诺（解决=>{ 设置超时（（）=>解析（“☕"), 2000）；//煮咖啡需要2秒钟 }); } 异步函数go（）{ 试一试{ 警报（“正常”）； const coffee=等待获取咖啡（）； 控制台。日志（咖啡）；//☕ const wes=等待轴（“https://randomuser.me/api/?results=200"); console.log（“wes”）；//为了简洁起见，使用字符串而不是值 const wordPromise=axios（“https://randomuser.me/api/?results=200"); console.log（“wordPromise”）；//为了简洁起见，使用字符串而不是值 警报（“完成”）； }捕获（e）{

---

控制台错误（e）这里的问题是，

console.log

并不总是像人们想象的那样同步。规范只要求

console.log

在开发人员控制台中显示消息，但对消息的显示方式或时间没有任何要求。但是，根据浏览器的不同，结果可能会有所不同y它实现了如下内容：

• 当您调用

  console.log

  时，请求会被推到堆栈上（因此对

  console.log

  的连续调用总是按顺序执行）
• 在下一个动画帧上，浏览器将尝试处理尽可能多的堆栈（必须至少处理堆栈上的一个元素，因此如果您尝试记录8兆字节的数据，浏览器可能会锁定）
• “处理”堆栈包括将DOM元素引用转换为将您带到开发控制台中其他位置的链接，将JSON对象转换为可导航和可折叠的UI元素，或将对象替换为文本“[Object]”
• 处理堆栈上的元素后，必须在控制台中渲染。这需要调整控制台的高度、确定是否需要滚动条、确定文本将在何处换行等。此过程（在控制台中获取所需内容并在屏幕上实际显示）称为“绘制”

---

由于

console.log

实际上是一个类似这样的复杂操作，因此在运行

alert

语句之前（在某些浏览器中），它可能无法完成执行。通过将对

alert

的每次调用替换为

console.log

，或者将对

console.log

的每次调用替换为

alert

，您应该会看到事情实际上是按照预期的顺序执行的。

异步/wait正在按预期的顺序工作。只是控制台需要一些时间进行更新或者浏览器正在重新绘制因此，

警报

会在重新绘制之前触发。您可以使用all

警报

而不是

控制台日志来验证它。所有
警报
都是按照正确的顺序执行的。如下例所示


函数getCoffee（）{
返回新承诺（解决=>{
setTimeout（（）=>{resolve（“coffee”）}，2000）；//煮咖啡需要2秒钟
});
}
异步函数go（）{
试一试{
警报（“正常”）；
const coffee=等待获取咖啡（）；
警惕（咖啡）；//☕
const wes=等待获取咖啡（）；
警报（wes）；
const wordPromise=getCoffee（）；
警惕（承诺）；
警报（“完成”）；
}捕获（e）{
console.error（e）；//在我尝试时工作正常（尽管我使用的是节点而不是浏览器，并用控制台日志替换了警报）。@junvar我能够在浏览器中通过上面的堆栈片段重现所描述的行为，可能是
警报（“finish”）
在axios调用后正常运行，但您没有及时在控制台中看到
wes
。登录到控制台并不总是一个即时操作（无论您记录什么，都必须进行处理、布局和绘制）基本上，
console.log
可以被视为一个保证按顺序运行的异步操作。尝试将
console.log
替换为
alert
或
alert
替换为
console.log
，然后查看它是否正确。@stevendesu是正确的，我改为all console.log，现在它正在按顺序处理它r我想是的。请填写作为问题的答案，我会接受it@CI_Guy如果在运行堆栈代码段时打开开发人员工具，那么当发出
finish
警报时，也会看到控制台日志。