博主头像
<CodeEra />

心存敬畏 行有所止

深入理解 Fetch API 的工作原理与错误处理

23 条评论

核心概念

Fetch API 提供了一种现代、基于 Promise 的方式来进行网络请求。它的设计遵循 分离关注点 原则，分为 获取响应 和 解析数据 两个主要阶段。

1. 基本用法

fetch(url)
  .then(response => response.json())  // 解析 Response 为 JSON
  .then(data => console.log(data))    // 处理解析后的数据
  .catch(error => console.error(error)); // 捕获整个链的错误
  • fetch() 返回一个 Promise，解析为 Response 对象。
  • 第一个 .then() 处理 Response，检查状态码（response.ok），并调用 .json() / .text() / .blob() 解析数据。
  • 第二个 .then() 处理解析后的数据（如 JSON 对象）。
  • .catch() 捕获整个链中的任何错误（网络错误、HTTP 错误、解析错误等）。

2. 为什么需要两个 .then()？

阶段 1：获取原始响应（Response）

  • fetch 返回的 Promise 解析为 Response 对象，包含 HTTP 状态、headers 等信息。
  • 必须手动检查 response.ok 或 response.status，因为 HTTP 错误（404、500）不会自动触发 .catch()。

阶段 2：解析数据

  • response.json() / .text() / .blob() 返回新的 Promise，因为解析可能是异步的。
  • 第二个 .then() 接收解析后的数据（如 JSON 对象）。

类比：拆快递

  1. 签收快递（第一个 .then()）：检查包裹是否完好（response.ok）。
  2. 拆包裹（.json()）：解析内容（返回新的 Promise）。
  3. 使用商品（第二个 .then()）：处理实际数据。

3. 错误处理机制

.catch() 捕获哪些错误？

  • 网络错误（如无法连接服务器、CORS 问题）。
  • HTTP 错误（需手动检查 response.ok 并 throw）。
  • 解析错误（如无效 JSON）。
  • 业务逻辑错误（在 .then() 中手动抛出）。

如何区分不同错误？

.catch(error => {
  if (error instanceof TypeError) {
    console.error("网络错误或无效 URL");
  } else if (error instanceof SyntaxError) {
    console.error("JSON 解析失败");
  } else {
    console.error("其他错误", error);
  }
});

最佳实践

  1. 始终检查 response.ok：

    if (!response.ok) throw new Error(`HTTP ${response.status}`);

  2. 拆分错误处理（如需精细控制）：

    fetch(url)
  .then(handleResponse)  // 单独处理 HTTP 错误
  .then(handleData)      // 处理数据
  .catch(handleNetworkError); // 捕获网络错误

4. 高级技巧

取消请求（AbortController）

const controller = new AbortController();
fetch(url, { signal: controller.signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log("请求被取消");
    }
  });

// 取消请求
controller.abort();

POST 请求示例

fetch(url, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' }),
});

总结

  1. fetch 返回 Promise<Response>，需用 .then() 处理。

  2. 两个 .then() 分工明确：

    • 第一个处理 Response（HTTP 层面）。
    • 第二个处理解析后的数据（业务层面）。
  3. .catch() 捕获整个链的错误，需手动检查 HTTP 错误。
  4. 灵活运用 AbortController、headers 和 body 可满足复杂需求。
已有 23 条评论
  1. 评论头像

    新项目准备上线，寻找志同道合的合作伙伴

    zjwbbtlnhf October 5th, 2025 at 05:06 am 回复
  2. 评论头像

    新盘新项目，不再等待，现在就是最佳上车机会！coinsrore.com

    qkdckuoyyc October 5th, 2025 at 05:18 am 回复
  3. 评论头像

    新盘首开 新盘首开 征召客户！！！

    uxxycpdeoq October 6th, 2025 at 11:03 am 回复
  4. 评论头像

    2025年10月新盘 做第一批吃螃蟹的人coinsrore.com
    新车新盘 嘎嘎稳 嘎嘎靠谱coinsrore.com
    新车首发，新的一年，只带想赚米的人coinsrore.com
    新盘 上车集合 留下 我要发发 立马进裙coinsrore.com
    做了几十年的项目 我总结了最好的一个盘（纯干货）coinsrore.com
    新车上路，只带前10个人coinsrore.com
    新盘首开 新盘首开 征召客户！！！coinsrore.com
    新项目准备上线，寻找志同道合的合作伙伴coinsrore.com
    新车即将上线 真正的项目，期待你的参与coinsrore.com
    新盘新项目，不再等待，现在就是最佳上车机会！coinsrore.com
    新盘新盘 这个月刚上新盘 新车第一个吃螃蟹！coinsrore.com

    etwhomeiuv October 7th, 2025 at 11:06 am 回复
  5. 评论头像

    2025年10月新盘 做第一批吃螃蟹的人coinsrore.com
    新车新盘 嘎嘎稳 嘎嘎靠谱coinsrore.com
    新车首发，新的一年，只带想赚米的人coinsrore.com
    新盘 上车集合 留下 我要发发 立马进裙coinsrore.com
    做了几十年的项目 我总结了最好的一个盘（纯干货）coinsrore.com
    新车上路，只带前10个人coinsrore.com
    新盘首开 新盘首开 征召客户！！！coinsrore.com
    新项目准备上线，寻找志同道合 的合作伙伴coinsrore.com
    新车即将上线 真正的项目，期待你的参与coinsrore.com
    新盘新项目，不再等待，现在就是最佳上车机会！coinsrore.com
    新盘新盘 这个月刚上新盘 新车第一个吃螃蟹！coinsrore.com

    shjugeljim October 7th, 2025 at 05:20 pm 回复
  6. 评论头像

    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099
    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099
    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099
    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099
    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099
    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099
    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099
    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 October 31st, 2025 at 12:26 am 回复
  7. 评论头像

    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099
    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099
    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099
    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099
    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099
    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099
    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099
    华纳公司合作开户所需材料？电话号码15587291507 微信STS5099

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 October 31st, 2025 at 12:31 am 回复
  8. 评论头像

    华纳东方明珠客服电话是多少？（▲18288362750?《?微信STS5099? 】
    如何联系华纳东方明珠客服？（▲18288362750?《?微信STS5099? 】
    华纳东方明珠官方客服联系方式？（▲18288362750?《?微信STS5099?
    华纳东方明珠客服热线？（▲18288362750?《?微信STS5099?
    华纳东方明珠24小时客服电话？（▲18288362750?《?微信STS5099? 】
    华纳东方明珠官方客服在线咨询？（▲18288362750?《?微信STS5099?

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 2nd, 2025 at 03:18 pm 回复
  9. 评论头像

    华纳东方明珠客服电话是多少？（▲18288362750?《?微信STS5099? 】
    如何联系华纳东方明珠客服？（▲18288362750?《?微信STS5099? 】
    华纳东方明珠官方客服联系方式？（▲18288362750?《?微信STS5099?
    华纳东方明珠客服热线？（▲18288362750?《?微信STS5099?
    华纳东方明珠24小时客服电话？（▲18288362750?《?微信STS5099? 】
    华纳东方明珠官方客服在线咨询？（▲18288362750?《?微信STS5099?

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 2nd, 2025 at 03:22 pm 回复
  10. 评论头像

    华纳东方明珠客服电话是多少？（??155--8729--1507?《?薇-STS5099】【?扣6011643?】
    华纳东方明珠开户专线联系方式？（??155--8729--1507?《?薇-STS5099】【?扣6011643?】

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 3rd, 2025 at 12:40 am 回复
  11. 评论头像

    华纳东方明珠客服电话是多少？（??155--8729--1507?《?薇-STS5099】【?扣6011643?】
    华纳东方明珠开户专线联系方式？（??155--8729--1507?《?薇-STS5099】【?扣6011643?】

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 3rd, 2025 at 12:45 am 回复
  12. 评论头像

    新盛客服电话是多少？（?183-8890-9465—《?薇-STS5099】【
    新盛开户专线联系方式？（?183-8890--9465—《?薇-STS5099】【?扣6011643??】
    新盛客服开户电话全攻略，让娱乐更顺畅！（?183-8890--9465—《?薇-STS5099】客服开户流程，华纳新盛客服开户流程图（?183-8890--9465—《?薇-STS5099】

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 7th, 2025 at 03:43 pm 回复
  13. 评论头像

    新盛客服电话是多少？（?183-8890-9465—《?薇-STS5099】【
    新盛开户专线联系方式？（?183-8890--9465—《?薇-STS5099】【?扣6011643??】
    新盛客服开户电话全攻略，让娱乐更顺畅！（?183-8890--9465—《?薇-STS5099】客服开户流程，华纳新盛客服开户流程图（?183-8890--9465—《?薇-STS5099】

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 7th, 2025 at 03:48 pm 回复
  14. 评论头像

    新盛客服电话是多少？（?183-8890-9465—《?薇-STS5099】【
    新盛开户专线联系方式？（?183-8890--9465—《?薇-STS5099】【?扣6011643??】
    新盛客服开户电话全攻略，让娱乐更顺畅！（?183-8890--9465—《?薇-STS5099】客服开户流程，华纳新盛客服开户流程图（?183-8890--9465—《?薇-STS5099】

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 7th, 2025 at 03:48 pm 回复
  15. 评论头像

    果博东方客服开户联系方式【182-8836-2750—】?薇- cxs20250806】
    果博东方公司客服电话联系方式【182-8836-2750—】?薇- cxs20250806】
    果博东方开户流程【182-8836-2750—】?薇- cxs20250806】
    果博东方客服怎么联系【182-8836-2750—】?薇- cxs20250806】

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 8th, 2025 at 04:20 pm 回复
  16. 评论头像

    果博东方客服开户联系方式【182-8836-2750—】?薇- cxs20250806】
    果博东方公司客服电话联系方式【182-8836-2750—】?薇- cxs20250806】
    果博东方开户流程【182-8836-2750—】?薇- cxs20250806】
    果博东方客服怎么联系【182-8836-2750—】?薇- cxs20250806】

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 8th, 2025 at 09:27 pm 回复
  17. 评论头像

    东方明珠客服开户联系方式【182-8836-2750—】?μ- cxs20250806
    东方明珠客服电话联系方式【182-8836-2750—】?- cxs20250806】
    东方明珠开户流程【182-8836-2750—】?薇- cxs20250806】
    东方明珠客服怎么联系【182-8836-2750—】?薇- cxs20250806】

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 10th, 2025 at 03:33 pm 回复
  18. 评论头像

    东方明珠客服开户联系方式【182-8836-2750—】?μ- cxs20250806
    东方明珠客服电话联系方式【182-8836-2750—】?- cxs20250806】
    东方明珠开户流程【182-8836-2750—】?薇- cxs20250806】
    东方明珠客服怎么联系【182-8836-2750—】?薇- cxs20250806】

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 10th, 2025 at 03:39 pm 回复
  19. 评论头像

    华纳圣淘沙开户步骤详解（183-8890-9465—?薇-STS5099【6011643】

    华纳圣淘沙公司开户流程全解析（183-8890-9465—?薇-STS5099【6011643】
    华纳圣淘沙公司账户注册指南（183-8890-9465—?薇-STS5099【6011643】
    新手如何开通华纳圣淘沙公司账户（183-8890-9465—?薇-STS5099【6011643】
    华纳圣淘沙企业开户标准流程（183-8890-9465—?薇-STS5099【6011643】
    华纳圣淘沙公司开户：从零到一（183-8890-9465—?薇-STS5099【6011643】
    官方指南：华纳圣淘沙公司开户流程（183-8890-9465—?薇-STS5099【6011643】
    华纳圣淘沙公司开户流程说明书（183-8890-9465—?薇-STS5099【6011643】

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 17th, 2025 at 07:49 pm 回复
  20. 评论头像

    华纳圣淘沙公司开户新手教程

    零基础学会（183-8890-9465薇-STS5099）
    华纳圣淘沙公司开户

    华纳圣淘沙公司开户保姆级教程（183-8890-9465薇-STS5099）

    一步步教你开通华纳圣淘沙公司账户（183-8890-9465薇-STS5099）

    华纳圣淘沙公司开户分步图解

    首次开户必看：（183-8890-9465薇-STS5099）
    华纳圣淘沙全攻略

    华纳圣淘沙公司开户实操手册（183-8890-9465薇-STS5099）
    华纳圣淘沙开户流程视频教程

    手把手教学：（183-8890-9465薇-STS5099）
    华纳圣淘沙公司开户

    华纳圣淘沙公司开户完全指南（183-8890-9465薇-STS5099）

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 20th, 2025 at 05:00 pm 回复
  21. 评论头像

    寻找华纳圣淘沙公司开户代理（183-8890-9465薇-STS5099】

    华纳圣淘沙官方合作开户渠道（183-8890-9465薇-STS5099】

    华纳圣淘沙公司开户代理服务（183-8890-9465薇-STS5099】

    华纳圣淘沙公司开户咨询热线（183-8890-9465薇-STS5099】

    联系客服了解华纳圣淘沙开户

    （183-8890-9465薇-STS5099】
    华纳圣淘沙公司开户专属顾问

    （183-8890-9465薇-STS5099】

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 21st, 2025 at 04:30 pm 回复
  22. 评论头像

    寻找华纳圣淘沙公司开户代理（183-8890-9465薇-STS5099】

    华纳圣淘沙官方合作开户渠道（183-8890-9465薇-STS5099】

    华纳圣淘沙公司开户代理服务（183-8890-9465薇-STS5099】

    华纳圣淘沙公司开户咨询热线（183-8890-9465薇-STS5099】

    联系客服了解华纳圣淘沙开户

    （183-8890-9465薇-STS5099】
    华纳圣淘沙公司开户专属顾问

    （183-8890-9465薇-STS5099】

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 21st, 2025 at 11:04 pm 回复
  23. 评论头像

    《华纳圣淘沙公司开户流程全解析》→ 官方顾问一对一指导??? 安全联系：183第三段8890第四段9465
    《华纳圣淘沙开户步骤详解》→ 」专属通道快速办理??? 安全联系：183第三段8890第四段9465
    《华纳圣淘沙账户注册指南》→ 扫码获取完整资料清单?「微?? 安全联系：183第三段8890第四段9465
    《新手开通华纳圣淘沙公司账户指南》→ 限时免费咨询开放??? 安全联系：183第三段8890第四段9465
    《华纳圣淘沙企业开户标准流程》→ 资深顾问实时解答疑问??? 安全联系：183第三段8890第四段9465
    《华纳圣淘沙开户步骤全景图》→ 点击获取极速开户方案??? 安全联系：183第三段8890第四段9465
    《华纳圣淘沙账户创建全流程手册》→ 预约顾问免排队服务?9?? 安全联系：183第三段8890第四段9465 《从零开通华纳圣淘沙公司账户》→ 添加客服领取开户工具包?? 安全联系：183第三段8890第四段9465
    《官方授权：华纳圣淘沙开户流程》→ 认证顾问全程代办?」?? 安全联系：183第三段8890第四段9465
    《华纳圣淘沙开户说明书》→立即联系获取电子版文件??? 安全联系：183第三段8890第四段9465

    鍗庣撼鍏徃鍚堜綔寮€鎴锋墍闇€鏉愭枡锛熺數璇濆彿鐮?5587291507 寰俊STS5099 November 22nd, 2025 at 04:37 pm 回复
发表新评论