JavaScript网络请求：深入理解Fetch API-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00996/article/details/148574747

JavaScript网络请求：深入理解Fetch API

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

什么是Fetch API

在现代Web开发中，JavaScript的Fetch API已经成为与服务器交互的标准方式。它提供了一种简单、强大的机制来发送网络请求并处理响应，取代了传统的XMLHttpRequest。

Fetch基础用法

Fetch的核心是一个全局的fetch()方法，它返回一个Promise：

let promise = fetch(url, [options])

url：请求的目标地址
options：可选参数对象，包含请求方法、头部、主体等

简单GET请求示例

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

理解Fetch的响应过程

Fetch请求分为两个阶段处理：

服务器响应头阶段：当服务器返回响应头时，Promise解析为Response对象
响应体获取阶段：通过调用Response对象的方法获取实际数据

检查响应状态

在获取响应体之前，应该先检查请求是否成功：

let response = await fetch(url);

if (response.ok) { // HTTP状态码200-299
  let data = await response.json();
  // 处理数据
} else {
  console.error("HTTP错误:", response.status);
}

处理不同类型的响应数据

Fetch提供了多种方法来处理不同类型的响应数据：

| 方法 | 描述 | 适用场景 | |------|------|----------| | .text() | 返回纯文本 | HTML、XML等文本数据 | | .json() | 解析为JSON对象 | API响应 | | .blob() | 返回Blob对象 | 图片、文件等二进制数据 | | .arrayBuffer() | 返回ArrayBuffer | 底层二进制操作 | | .formData() | 返回FormData对象 | 表单数据 |

实际应用示例

获取JSON数据：

let response = await fetch('https://api.example.com/users');
let users = await response.json();

下载图片：

let response = await fetch('/images/logo.png');
let blob = await response.blob();
let img = document.createElement('img');
img.src = URL.createObjectURL(blob);
document.body.appendChild(img);

发送POST请求

Fetch不仅可以获取数据，还能发送各种类型的请求：

let user = {
  name: 'John',
  age: 30
};

let response = await fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(user)
});

发送表单数据

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

fetch('/api/form', {
  method: 'POST',
  body: formData
});

高级用法：自定义请求头

fetch(url, {
  headers: {
    'Authorization': 'Bearer abc123',
    'X-Custom-Header': 'value'
  }
});

注意：某些请求头由浏览器控制，无法手动设置（如Content-Length、Cookie等）。

错误处理

Fetch的错误处理需要特别注意：

try {
  let response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  let data = await response.json();
  // 处理数据
} catch (error) {
  console.error('Fetch错误:', error);
}