前言

在现代前端开发中，fetch 已经成为了发起网络请求的主流标准。它是基于 Promise 设计的。不仅解决了“回调地狱”的问题，还提供了更简洁、更模块化的 API。

一、 为什么选择 Fetch？不过，

• 更优雅的语法支持 Promise 链式调用。天然适配 async/await。
• 更现代的架构不再像 XHR 那样将所有功能堆在一个对象上，而是采用了独立的 Request 和 Response 模块化设计。
• 流式处理支持读取数据流，在处理大文件或实时渲染时表现更佳。

二、 Fetch 的主要语法与配置

. 基础用法

fetch .n .catch;

. 配置项参数速查

fetch 的第二个参数是一个对象，用于高度自定义请求行为：

参数说明常用取值

• method请求方法GET,POST,PUT,DELETE
• headers设置请求头{'Content-Type': 'application/json'}
• body请求体数据字符串、FormData、Blob 或 BufferSource
• mode跨域模式cors。no-cors,same-origin
• credentialsCookie 发送策略same-origin,include,omit
• cache缓存控制default,no-cache,reload,force-cache
• signal取消请求使用 AbortController`信号

三、 解析 Response 对象：双重异步机制

fetch 会返回一个promise对象，这个promise在接收到服务器返回的响应之后会被解析成一个response对象。

response对象：它是一个网络请求相关的对象，它表示这次http请求的响应。包含了与这次响应相关的各种信息

. 同步信息：立即读取

通过 response 对象可以直接获取响应的状态信息：

• response.ok布尔值，状态码在 - 之间时为 true。
• response.status`数字状态码
• response.url`请求的最终 URL。

. 异步信息：消费数据体

由于响应体可能非常大，数据是按流传输的，所以读取内容的方法都是异步的。一般配合await使用：

• json` ：解析为 JSON 对象。
• text` ：解析为纯文本字符串。
• blob` ：解析为二进制大对象。不过，
• `arrayBuffer` ：解析为原始二进制缓冲区。
• **`formData` ：解析为表单数据。

  四、 实战代码演练

  . 结合 Async/Await 的优雅写法

  fetch// fetch接收到的response是一个 Stream 对象// response.json是一个异步操作。取出所有内容，并将其转为 JSON 对象.n => response.json).n => console.log).catch => console.log);// 等价于以下写法async function getJSON {let url = "https://api.github.com/users/ruanyf";try { // 注意：fetch 不会自动抛出 / 错误 if { throw new Error;
  } return await response.json;
  } catch { console.log;}}console.log);// 获取到的json数据

  五、避坑教程：Fetch 的特殊之处

  `fetch` 与 `axios/XHR` 的不同点：

  1. 关于报错机制

     • 误区

       认为 或 会触发 .catch。

       真相

       只有在**网络故障**时才会变为 rejected。对于 、 等 HTTP 错误，Promise依然是 resolved。你必须手动检查 response.ok 或 response .status。

关于 Cookie

默认情况下跨域请求不会发送 Cookie。如果需要发送，必须设置 credentials: 'include'。

关于取消请求

must配合 AbortController 实现。不过，