async / await：等一件慢事情完成

网络不会立刻回答。await 可以读成“先等这里完成，再继续下一行”，而包含它的函数要标记为 async。

真实代码逐行读

来自 manga_studio/canvas-v2/src/api.ts 第 4–20 行：

export async function api<T = unknown>(url: string, init?: RequestInit): Promise<T> {
  const res = await fetch(url, {
    credentials: 'same-origin',
    ...init,
    headers: { 'Content-Type': 'application/json', ...(init?.headers || {}) },
  })
  const body = await res.json()
  if (!res.ok) throw new Error('请求失败')
  return body as T
}

export async function api(...)
↑      ↑        ↑
别的文件  里面会等待  函数名
可以使用

const res = await fetch(url, ...)
↑     ↑       ↑     ↑
保存响应  等待   发请求  请求地址

if (!res.ok) throw new Error(...)
↑   ↑       ↑
如果 不成功    主动报告错误

这里还做了两件真实项目需要的事：带上同源登录 Cookie；把不同接口的错误统一变成 JavaScript Error。

怎么判断忘了 await

如果你以为拿到了 JSON，Console 却显示 Promise {<pending>}，先检查前面是否缺少 await。

动手练习感受等待顺序

你的任务

把等待后的文字改成“第二步完成”，然后运行。注意它一定会晚于第一步出现。

1. 找到第 4 行引号里的文字
2. 只把文字改成第二步完成
3. 点“运行并检查”，等待约 0.8 秒

代码区你可以直接点进去修改

123456

async function demo() { console.log('第一步') await new Promise(resolve => setTimeout(resolve, 800)) console.log('等了 0.8 秒后的第二步') } await demo()

电脑输出

还没有运行。完成左边的小任务后，点下面的绿色按钮。

await fetch(...) 在等待什么？

答案：等待网络请求得到 Response。之后通常还要 await response.json()，等待把响应正文解析成数据。