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

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

Answer 2

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

执行 onLoadData2();

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

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

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

所以最终结果为

souhu.com
baidu.com
tencent.com

Answer 3

这涉及到微任务和宏任务，从这个角度切入你更容易理解，可以看看这篇文章：带你彻底弄懂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 4

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