异步：Promise、async/await、fetch

这一章是全教程最重要的一章之一。慢慢来，每段代码都可以点「运行」亲眼看到结果。

一这一章学什么

学完这一章，你就能看懂 Worker 和脚本里最常见的代码长什么样：为什么有的函数前面有个 async，为什么有的行前面有个 await，以及发网络请求之后为什么要先看一眼 resp.ok。

二概念：为什么要「等」

有些事不是马上就能办完的：发网络请求要等对方服务器回话，读存储（比如读 KV 里的数据）要等数据取回来。慢则几十毫秒，快要等的事情也可能拖到几秒。

JS 遇到这种事不会干等着——它不会傻站着等到天荒地老，而是先去忙别的。需要等的操作会返回一个 Promise，中文可以理解成一张「承诺」：意思是「结果以后给你，先拿着这张条子」。

① 三种写法，只学一种：async/await

「等 Promise 出结果」这件事，历史上出现过三种写法，你只需要认识它们，真正要学的只有第三种：

• 老写法：回调——把「等到了之后要干什么」写成一个函数交出去。平台脚本的 API 里还很常见，见到能认出来就行。
• 过渡写法：.then() 链——用 .then() 一节一节往下接。了解即可，不用练。
• 现代写法：async/await——看起来跟普通代码一样，一行一行往下写。Workers 里统一用这种，本章只学这一种。

async function load() {              // async 标在函数前
  const resp = await fetch("https://example.com/data");
  // ↑ await：等 fetch 发完请求，把回来的响应存进 resp
  const data = await resp.json();
  // ↑ 再等一下：把响应的 body 按 JSON 读出来
  return data;                       // 返回读到的数据
}

• async 标在函数前面，表示：这个函数里面可以用 await，而且这个函数本身返回的也是一个 Promise（记住这点，练习题会考）。
• await 只能用在 async 函数里面，它的作用是等后面的 Promise 出结果。等待期间 JS 不阻塞，还能去处理别的事。
• 忘了写 await 的典型症状：拿到的不是数据，而是 Promise { <pending> }（pending 是「还在等」的意思）。下面动手试的部分你会亲眼看到它。

② fetch：发请求的统一方法

fetch 是发网络请求的统一方法，Workers、浏览器、Node 里都有它，长得一模一样，学会一次到处能用。最简单的用法是 await fetch(网址)；要提交数据时，第二个参数可以写清楚方式、请求头和内容：

const resp = await fetch(url, {
  method: "POST",                    // 请求方式：POST 表示提交数据
  headers: {                         // 请求头：向对方说明你发的是什么
    "Content-Type": "application/json",
    "Authorization": "Bearer xxx"    // 身份令牌，xxx 换成你自己的
  },
  body: JSON.stringify({ key: "value" })
  // ↑ body 是要发的内容；JSON.stringify 把对象转成 JSON 文字
});

请求发完，拿到的 resp（响应）要这样用：

• resp.status 是状态码：200 表示成功，404 表示没找到，500 表示对方服务器出错。
• resp.ok 是个省事的判断：状态码在 200–299 之间时它是 true（对），否则是 false（错）。
• await resp.text() 把 body（响应正文）按纯文本读出来。
• await resp.json() 把 body 按 JSON 读出来，直接变成对象能用。
• body 只能读一次：text() 和 json() 只能选一个、读一次，读完就没了，不能重复读。

三动手试：点「运行」看结果

下面的代码框点「运行」，会在页面里真正执行这段代码，结果显示在代码框下方。先按顺序做实验一的 A、B 两版，对比一下差别。

实验一 A：不带 await，先看「承诺」长什么样

这段代码用 Promise + setTimeout 模拟了一个「等 1 秒才有结果」的操作（setTimeout 是「过一会儿再执行」的意思）。注意：调用时故意不写 await。

// 模拟一个“要等 1 秒才有结果”的操作
function getData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("真正的数据");   // 1 秒后，把结果交给承诺
    }, 1000);
  });
}

const result = getData();  // 注意：这里没写 await
console.log(result);       // 拿到的会是什么？

实验一 B：带 await，拿到真正的数据

同样的操作，这次把调用包进 async 函数里并写上 await。点运行后等大约 1 秒，结果才出来——那 1 秒就是在「等」。

// 还是那个“要等 1 秒才有结果”的操作
function getData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("真正的数据");
    }, 1000);
  });
}

async function main() {
  const result = await getData();  // 写了 await：等它出结果
  console.log(result);             // 这次拿到的是什么？
}

main();  // 调用这个 async 函数

实验二：不联网也能练 fetch

下面这段用一个特殊的 data: 网址在本机造了一份 JSON 数据，不用联网就能完整走一遍「fetch 发请求 → 查 resp.ok → resp.json() 读数据」的流程。

async function main() {
  const resp = await fetch('data:application/json,{"ok":true}');
  console.log("resp.ok =", resp.ok);          // 是不是成功（200–299）
  console.log("resp.status =", resp.status);  // 状态码是多少
  const data = await resp.json();             // 按 JSON 读出 body
  console.log("读到的数据 =", data);
}

main();

四练一练

五适用案例：这些概念天天在用