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));

6. 结语

fetch 是 ES6 现代 Web 开发中常用的 API，它相比传统 XMLHttpRequest 更加简洁且基于 Promise，使得异步代码更加优雅。掌握 fetch，可以更轻松地处理 HTTP 请求，提高前端开发效率。