JavaScript Fetch API[编辑 | 编辑源代码]

Fetch API 是现代 JavaScript 中用于发起网络请求的标准接口，它提供了一种简单、灵活的方式来与服务器交互，获取或发送数据。Fetch API 基于 Promise，使得异步请求的处理更加直观和高效。它是 XMLHttpRequest（XHR）的现代化替代方案，广泛应用于 Web 开发中。

基本介绍[编辑 | 编辑源代码]

Fetch API 允许开发者通过 JavaScript 向服务器发送 HTTP 请求（如 GET、POST、PUT、DELETE 等），并处理返回的响应。它的核心方法是 fetch()，该方法返回一个 Promise，解析为 Response 对象。

语法[编辑 | 编辑源代码]

fetch(resource, options)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

resource：请求的 URL 或 Request 对象。
options（可选）：配置对象，包含请求的方法（method）、头部（headers）、主体（body）等。

基本用法[编辑 | 编辑源代码]

发起 GET 请求[编辑 | 编辑源代码]

最简单的 Fetch 请求是获取 JSON 数据：

fetch('https://api.example.com/data')
  .then(response => response.json()) // 解析 JSON 响应
  .then(data => console.log(data))  // 处理数据
  .catch(error => console.error('Error:', error));

输出示例：

{
  "id": 1,
  "name": "Example Data",
  "value": 42
}

发起 POST 请求[编辑 | 编辑源代码]

发送数据到服务器：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }), // 发送 JSON 数据
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

处理响应[编辑 | 编辑源代码]

Fetch API 的 Response 对象提供了多种方法来解析响应数据：

response.json()：解析为 JSON 对象。
response.text()：解析为文本。
response.blob()：解析为 Blob 对象（如文件）。
response.arrayBuffer()：解析为 ArrayBuffer（二进制数据）。

检查响应状态[编辑 | 编辑源代码]

在解析响应之前，通常需要检查 HTTP 状态码：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

错误处理[编辑 | 编辑源代码]

Fetch API 不会因 HTTP 错误状态（如 404 或 500）而拒绝 Promise，只有在网络故障或请求被阻止时才会触发 catch。因此，开发者需要手动检查 response.ok 或状态码。

超时处理[编辑 | 编辑源代码]

Fetch 默认没有超时机制，但可以通过 AbortController 实现：

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5秒超时

fetch('https://api.example.com/data', { signal: controller.signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Request timed out');
    } else {
      console.error('Error:', error);
    }
  })
  .finally(() => clearTimeout(timeoutId));

高级用法[编辑 | 编辑源代码]

自定义请求头[编辑 | 编辑源代码]

可以通过 headers 选项添加自定义请求头：

fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer token123',
    'Custom-Header': 'value',
  },
});

上传文件[编辑 | 编辑源代码]

使用 FormData 上传文件：

const formData = new FormData();
formData.append('file', fileInput.files[0]);

fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData,
});

实际案例[编辑 | 编辑源代码]

从 API 获取天气数据[编辑 | 编辑源代码]

以下示例展示如何从天气 API 获取数据并显示：

fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London')
  .then(response => response.json())
  .then(data => {
    const weatherInfo = document.getElementById('weather-info');
    weatherInfo.innerHTML = `
      <h2>${data.location.name}</h2>
      <p>Temperature: ${data.current.temp_c}°C</p>
      <p>Condition: ${data.current.condition.text}</p>
    `;
  })
  .catch(error => console.error('Error:', error));

用户登录表单[编辑 | 编辑源代码]

使用 Fetch 提交登录表单：

document.getElementById('login-form').addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);

  fetch('https://api.example.com/login', {
    method: 'POST',
    body: JSON.stringify(Object.fromEntries(formData)),
    headers: { 'Content-Type': 'application/json' },
  })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        window.location.href = '/dashboard';
      } else {
        alert('Login failed: ' + data.message);
      }
    })
    .catch(error => console.error('Error:', error));
});

比较：Fetch 与 XMLHttpRequest[编辑 | 编辑源代码]

Fetch API 相比传统的 XMLHttpRequest（XHR）有以下优势：

基于 Promise，避免回调地狱。
更简洁的语法。
更好的错误处理机制。
支持流和更现代的 Web 标准。

注意事项[编辑 | 编辑源代码]

跨域请求：默认受同源策略限制，需服务器配置 CORS。
旧浏览器兼容性：IE 不支持 Fetch，可使用 polyfill（如 whatwg-fetch）。
错误处理：需手动检查 HTTP 错误状态。

总结[编辑 | 编辑源代码]

Fetch API 是 JavaScript 中发起网络请求的现代方法，提供了简洁、强大的接口。通过 Promise 和灵活的配置选项，它成为处理 HTTP 请求的首选工具。无论是获取数据、提交表单还是上传文件，Fetch 都能高效完成任务。

参见[编辑 | 编辑源代码]