引言
在 JavaScript 中，fetch 是开发者发起网络请求的核心 API。许多初学者在初次接触 fetch 时，会对代码中出现两个连续的 await 感到困惑：第一个用于 fetch 本身，第二个用于解析响应数据（如 response.json()）。这种现象背后隐藏着 JavaScript 异步编程的核心逻辑。本文将从底层机制出发，深入解析这一设计的原因，并通过实际代码示例帮助读者彻底理解其工作原理。
一、fetch 的基本流程
1.1 fetch 的核心行为
fetch 是一个基于 Promise 的 API，其核心任务是向服务器发送请求并接收响应。但这个过程并非“一次性完成”，而是分为两个阶段：
-
接收响应头（Headers）：建立连接后，服务器首先返回 HTTP 状态码和响应头。
-
接收响应体（Body）：响应头到达后，浏览器开始逐步接收响应体的数据流。
1.2 代码示例
// 分步写法const response = await fetch(url); // 第一阶段：等待响应头const data = await response.json(); // 第二阶段：等待响应体解析
二、为什么需要两次 await？
2.1 第一个 await：等待响应头
-
fetch返回的 Promise 何时解析？ 当浏览器接收到 HTTP 响应头时，fetch返回的 Promise 立即解析，此时response对象已包含状态码（如 200、404）、响应头等信息。 但此时响应体可能尚未完全传输（尤其是大文件或慢速网络环境）。 -
代码验证
const response = await fetch(url);console.log(response.status); // 200（响应头已到达）console.log(response.bodyUsed); // false（响应体尚未读取）
2.2 第二个 await：等待响应体解析
-
为什么需要再次等待？
response.json()、response.text()等方法的作用是 从数据流中读取完整的响应体内容。由于响应体可能分多次传输（流式传输），读取过程本身是异步的。 -
底层机制
// response.json() 的伪代码实现Response.prototype.json = function() { return new Promise((resolve) => { // 逐步接收数据流，拼接后解析为 JSON let chunks = []; this.body.on('data', (chunk) => chunks.push(chunk)); this.body.on('end', () => { resolve(JSON.parse(Buffer.concat(chunks))); }); });};
三、常见错误与陷阱
3.1 漏掉第二个 await
// 错误示例const response = await fetch(url);const data = response.json(); // 返回 Promise，而非实际数据console.log(data); // 输出：Promise {<pending>}
3.2 试图“同步化”操作
// 错误：试图用变量缓存结果let globalData;fetch(url) .then(res => res.json()) .then(result => globalData = result);// 此处 globalData 仍然是 undefinedconsole.log(globalData);
四、正确写法与优化技巧
4.1 标准写法
// 写法 1：分步处理const response = await fetch(url);const data = await response.json();// 写法 2：链式调用（单行）const data = await (await fetch(url)).json();
4.2 错误处理
try { const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status}`); const data = await response.json();} catch (error) { console.error("请求失败:", error);}
4.3 性能优化
-
流式处理（Streams API） 对于大文件，可直接操作数据流，无需等待全部内容加载：
const response = await fetch(url);const reader = response.body.getReader();while (true) { const { done, value } = await reader.read(); if (done) break; console.log("收到数据块:", value);}
五、扩展思考
5.1 为什么这样设计？
-
资源效率：允许开发者尽早获取响应头（如状态码），实现更快的前置错误处理。
-
内存优化：流式传输避免一次性加载大文件导致内存溢出。
5.2 与其他语言的对比
-
Python Requests：同步阻塞，直到响应完全接收。
-
Node.js
http模块：需手动处理data和end事件，与fetch的流式设计类似。
六、总结
阶段
目标
对应代码
耗时原因
第一个 await
获取响应头
await fetch(url)
网络延迟、连接建立时间
第二个 await
解析响应体
await response.json()
数据流传输、解析计算
理解这两个 await 的差异，是掌握 JavaScript 异步网络编程的关键。这种设计既保证了代码的简洁性，又为高性能应用提供了底层控制能力。在实际开发中，开发者可根据需求选择等待完整响应，或直接操作数据流以实现更精细的优化。
