ES6（8） Fetch API 详解

1. Fetch API 简介

fetch 是 ES6 提供的基于 Promise 的 API，用于发送 HTTP 请求并处理服务器响应数据。与传统的 XMLHttpRequest 相比，fetch 语法更加简洁，使用 Promise 进行异步处理，避免了回调地狱。

1.1 `fetch()` 的基本用法

fetch(url, options) 返回一个 Promise，其中：

url：请求的地址。
options（可选）：一个对象，用于设置请求方法、请求头、请求体等。

示例：

fetch('http://127.0.0.1/get').then(response => response.json()) // 解析 JSON 格式的响应数据.then(data => console.log("get.data:", data)).catch(error => console.log("get.error:", error.message)).finally(() => console.log("get.finally"));

2. 发送不同类型的 HTTP 请求

2.1 发送 GET 请求

GET 请求不需要 body，通常用于获取数据。

fetch('http://127.0.0.1/get').then(response => response.json()).then(data => console.log("get.data:", data)).catch(error => console.log("get.error:", error.message)).finally(() => console.log("get.finally"));

2.2 发送 POST 请求（表单数据）

当需要提交数据时，可以使用 POST 方法，并在 headers 指定 Content-Type。

fetch('http://127.0.0.1/post', {method: 'POST',headers: {'Content-Type': 'application/x-www-form-urlencoded'},body: new URLSearchParams({name: 'theodore',web: 'https://blog.csdn.net/Theodore_1022'})
})
.then(response => response.json())
.then(data => console.log("post.data:", data))
.catch(error => console.log("post.error:", error.message))
.finally(() => console.log("post.finally"));

2.3 发送 POST 请求（JSON 数据）

提交 JSON 数据时，Content-Type 需要设置为 application/json，并使用 JSON.stringify() 处理 body。

fetch('http://127.0.0.1/postJson', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({name: 'theodore',web: 'https://blog.csdn.net/Theodore_1022'})
})
.then(response => response.json())
.then(data => console.log("postJson.data:", data))
.catch(error => console.log("postJson.error:", error.message))
.finally(() => console.log("postJson.finally"));

3. 处理 Fetch 响应

fetch 返回的 Promise 解析后得到的是一个 Response 对象，需要进一步解析数据。

fetch('http://127.0.0.1/get').then(response => {if (!response.ok) {throw new Error(`HTTP 错误！状态码: ${response.status}`);}return response.json();}).then(data => console.log("get.data:", data)).catch(error => console.log("get.error:", error.message));

3.1 解析不同格式的响应数据

fetch 的 Response 对象提供多个方法来解析数据：

response.json()：解析 JSON 格式数据。
response.text()：解析文本数据。
response.blob()：解析二进制数据，如图片、音视频。
response.arrayBuffer()：解析为 ArrayBuffer，用于处理二进制流数据。

示例：

fetch('http://127.0.0.1/data').then(response => response.text()).then(text => console.log("text data:", text));

4. 处理超时请求

fetch 默认没有超时机制，可以使用 AbortController 来手动终止请求。

const controller = new AbortController();
const signal = controller.signal;setTimeout(() => controller.abort(), 5000); // 5 秒后取消请求fetch('http://127.0.0.1/timeout', { signal }).then(response => response.json()).then(data => console.log("data:", data)).catch(error => {if (error.name === 'AbortError') {console.log('请求超时，已取消');} else {console.log('请求失败:', error.message);}});

5. 处理跨域问题

如果请求跨域，需要服务器配置 CORS（跨域资源共享）。

服务器返回 Access-Control-Allow-Origin: * 允许跨域访问。
如果涉及 credentials（如 cookies），需要设置 fetch 的 credentials。

fetch('http://127.0.0.1/protected', {credentials: 'include' // 允许携带 cookies
})
.then(response => response.json())
.then(data => console.log("data:", data));