Fetch API 教程：类型脚本的高级用法

fetch API 类型脚本 是现代 JavaScript 开发中一种强大的工具，提供了一种简化和灵活的方式来处理 HTTP 请求。本文将全面探讨 Fetch API 的用法、特性以及如何在项目中进行有效应用。

基本用法与核心差异

Fetch API 是 XMLHttpRequest 的现代替代方案，具备更好的可读性和模块化设计。其主要优势包括：

使用 Promise 而非回调函数：这使得代码更加简洁明了，通过链式调用 .then() 和 .catch()，可以更好地处理异步操作。
模块化设计：API 分散在多个对象上（如 Response、Request、Headers），相比 XMLHttpRequest 的集中式设计，Fetch API 更加灵活。
支持数据流处理：可以分块读取数据，减少内存占用，尤其适合大文件和慢速网络环境。

一个简单的 Fetch 请求示例如下：

fetch('https://api.github.com/users/ruanyf')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log('Request Failed', err));

Response 对象：处理 HTTP 回应

同步属性与状态判断

Fetch 请求返回一个 Response 对象，用于处理服务器的 HTTP 回应。可以通过其同步属性快速获取响应状态信息：

Response.status 返回 HTTP 状态码。
Response.statusText 返回状态信息。
Response.ok 返回请求是否成功（状态码 200-299）。

判断请求是否成功的示例：

async function fetchText() {
  let response = await fetch('/readme.txt');
  if (response.ok) {
    return await response.text();
  } else {
    throw new Error(response.statusText);
  }
}

读取内容的方法

Response 对象提供多种方法来读取服务器返回的数据：

response.text()：获取文本数据。
response.json()：获取 JSON 数据。
response.blob()：获取二进制数据。
response.formData()：获取 FormData 对象。
response.arrayBuffer()：获取 ArrayBuffer 对象。

定制 HTTP 请求：Fetch 的第二个参数

Fetch 的第二个参数是一个配置对象，用于自定义请求：

方法设置：通过 method 属性设置 HTTP 方法（如 GET、POST）。
标头设置：通过 headers 属性自定义请求头。
数据体：通过 body 属性设置请求的数据体。

POST 请求示例

const response = await fetch(url, {
  method: 'POST',
  headers: {
    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
  },
  body: 'foo=bar&lorem=ipsum',
});

提交 JSON 数据

const user = { name: 'John', surname: 'Smith' };
const response = await fetch('/article/fetch/post/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(user)
});

Fetch 配置对象的完整 API

Fetch 的配置对象提供了多种选项来控制请求行为，包括：

cache：指定缓存策略（如 default、no-store、reload）。
mode：指定请求模式（如 cors、same-origin）。
credentials：指定是否发送 Cookie（如 same-origin、include）。
redirect：指定跳转策略（如 follow、error、manual）。
keepalive：在页面卸载时，保持连接以继续发送数据。

取消 Fetch 请求

可以使用 AbortController 对象来取消 Fetch 请求。这在处理长时间运行的请求时特别有用。

let controller = new AbortController();
let signal = controller.signal;

fetch(url, { signal: controller.signal });

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

参考链接

FAQ

问：Fetch API 如何处理跨域请求？
- 答：Fetch 支持 CORS，通过 mode 属性设置为 cors 来实现跨域请求。
问：如何在 Fetch 中上传文件？
- 答：可以使用 FormData 对象将文件与其他数据一起上传。
问：如何在 Fetch 请求中发送 Cookie？
- 答：通过 credentials 属性设置为 include 可以在跨域请求中发送 Cookie。