React 初学者指南：掌握 Fetch API 的技巧

2023-11-04 20:19:09

概述

React 中的 Fetch API 是一个强大而灵活的工具，可用于发送数据请求并检索数据。与传统的 XMLHttpRequest（XHR）相比，它具有许多优点，包括：

更简单、更直观的语法
支持 Promise，使异步编程更加容易
更强大的功能，包括对请求和响应的更精细控制

基本用法

要使用 Fetch API，需要首先创建一个 Request 对象。Request 对象包含有关请求的信息，例如要请求的 URL、请求方法（例如 GET 或 POST）以及任何请求头。

const request = new Request('https://example.com/api/data');

接下来，可以使用 fetch() 方法发送请求。fetch() 方法返回一个 Promise，该 Promise 在请求完成后解析为 Response 对象。

fetch(request).then((response) => {
  console.log(response);
});

Response 对象包含有关响应的信息，例如状态代码、响应头和响应体。要获取响应体，可以使用 Response 对象的 json() 方法。json() 方法返回一个 Promise，该 Promise 在响应体解析为 JavaScript 对象后解析。

fetch(request).then((response) => {
  return response.json();
}).then((data) => {
  console.log(data);
});

异常处理

在使用 Fetch API 时，可能会遇到各种异常。例如，如果请求的 URL 不存在，则会抛出错误。要处理异常，可以使用 try...catch... 语句。

try {
  const response = await fetch(request);
  const data = await response.json();
  console.log(data);
} catch (error) {
  console.error(error);
}

兼容性

Fetch API 在大多数现代浏览器中都受支持，但它并不完全兼容所有浏览器。例如，在较旧版本的 Internet Explorer 中，Fetch API 是不可用的。要确保你的代码在所有浏览器中都能正常运行，可以使用 polyfill。Polyfill 是一个 JavaScript 库，它可以为不支持的浏览器提供新的功能。