博主头像
<CodeEra />

心存敬畏 行有所止

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

11 条评论

核心概念

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 可满足复杂需求。
已有 11 条评论
  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 回复
发表新评论