为什么JavaScript中需要使用await关键字？

首先纠正一个常见认知偏差 #

你对JS单线程的理解部分正确：JS的主线程同步执行栈确实是单线程的，同一时间只会执行一行同步代码，但fetch不属于JS引擎内的同步执行任务，是浏览器/Node.js提供的异步API，不会占用主线程的执行时间。

为什么不用await拿不到fetch的响应结果 #

当你调用fetch('http://testurl.com')的时候，执行逻辑是这样的：

• JS主线程收到调用指令后，直接把网络请求任务转交给运行环境独立的网络线程处理
• fetch会立刻返回一个Pending状态的Promise对象，根本不会等网络请求完成，主线程马上就会执行下一行代码
• 这时候你如果不用await，拿到的res只是个Promise实例，不是你需要的HTTP响应结果

await的实际作用 #

await只能在async函数内部使用，它的核心逻辑是：暂停当前所在async函数的后续代码执行，等待后面的Promise状态变更为fulfilled/rejected之后，再把Promise的结果返回，恢复执行async函数的后续代码。
重点是：这个暂停只是停止当前async函数的代码执行，不会阻塞整个JS主线程，主线程依然可以正常处理用户交互、定时器触发、其他异步回调等任务。

单线程场景下await的核心价值 #

• 避免主线程阻塞：如果网络请求改成同步执行，单线程的JS主线程会直接卡死在请求阶段，期间用户的所有页面操作都不会有响应，体验完全报废。await既可以让我们按顺序拿到异步结果，又不会阻塞整个主线程。
• 解决回调地狱问题：如果没有await，我们要拿fetch的结果只能用.then()回调，多层异步逻辑嵌套会形成非常难维护的回调地狱，await可以把异步逻辑拍平成类似同步代码的结构，可读性和可维护性大幅提升。
• 错误处理更简单：可以直接用try/catch包裹await的代码段捕获异步错误，比多层回调里的错误处理逻辑简洁很多。

举个写法对比示例更直观：

// 传统回调写法
fetch('http://testurl.com')
  .then(res => res.json())
  .then(data => {
    // 处理数据
    console.log(data)
  })
  .catch(err => {
    // 处理错误
  })

// await写法
async function fetchData() {
  try {
    const res = await fetch('http://testurl.com')
    const data = await res.json()
    console.log(data)
  } catch (err) {
    // 处理错误
  }
}

后者的逻辑顺序明显更符合人的阅读习惯。

内容的提问来源于stack exchange，提问作者Jin