前端 - JavaScript async/await 中执行顺序问题?

Question

  const onLoadData = async () => {      await fetch("http://baidu.com");  };  const onLoadData2 = async () => {      try {        await fetch("http://souhu.com");      } catch (e) {}      try {        await fetch("http://tencent.com");      } catch (e) {}  };  onLoadData2();  onLoadData();

网址请求顺序是
souhu.com
baidu.com
tencent.com
这是什么原因呀?

Answer 1

因为在JavaScript中，使用await关键字可以暂停异步函数的执行，等待Promise对象的解析结果。在onLoadData2()函数中，首先执行了await fetch("http://souhu.com")，即向"http://souhu.com"发送了一个网络请求，然后等待该请求的响应结果。如果请求成功，await后面的代码将继续执行；如果请求失败，控制权将跳转到catch块，继续执行下一个await。

Answer 2

这涉及到微任务和宏任务，从这个角度切入你更容易理解，可以看看这篇文章：带你彻底弄懂Event Loop

const loadData = async () => {  try {    await fetch("http://souhu.com");    await fetch("http://baidu.com");    await fetch("http://tencent.com");  } catch (e) {}};loadData();

Answer 3

首先两个 async 是互不影响的，所以按照题主调用顺序

执行 onLoadData2();

await fetch("http://souhu.com"); 会让

await fetch("http://tencent.com"); 等待，但 不会 影响

onLoadData(); 的 await fetch("http://baidu.com");

所以最终结果为

souhu.combaidu.comtencent.com

Answer 4

await是等待一个异步操作完成。也就是在你fetch没有响应之前不会执行后面的代码。
但是onLoadData2并没有用await，也就是在函数内部await的时候即异步执行期间，主线程继续执行，也就是执行完fetch souhu后就回到外部继续执行onLoadData，这就请求了baidu，然后才是tencent