【JavaScript fetch API】简介和使用

fetch 是一个现代的 JavaScript API，用于获取资源，例如从网络服务器获取数据。它提供了一种比传统的 XMLHttpRequest 更简洁、更易于使用的机制来进行网络请求。 fetch 基于 Promise，这使得异步操作更容易处理。

核心概念:

• fetch(url, [options]): 这是 fetch API 的核心函数。它接受一个 URL
  作为第一个参数，可选地接受一个包含请求配置的 options 对象作为第二个参数。 fetch() 返回一个
  Promise，该 Promise 解析为一个 Response 对象。
• Response 对象: Response 对象表示服务器对请求的响应。它包含了响应的状态码、头部信息以及响应体。 你可以通过
  Response 对象上的方法来访问这些信息。
• Request 对象 (可选): 你可以创建一个 Request 对象来更精细地控制请求，例如设置请求方法、头部信息和请求体。
  fetch() 函数也可以直接接受一个 Request 对象作为第一个参数。
• Promise: fetch API 基于 Promise，这意味着你可以使用 .then() 和 .catch()
  方法来处理异步操作的结果和错误。

基本用法:

最简单的 fetch 用法如下：

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

这段代码向指定的 URL 发送一个 GET 请求。 第一个 .then() 方法处理 Response 对象，并将其转换为 JSON 数据。 第二个 .then() 方法处理 JSON 数据，并将其打印到控制台。 .catch() 方法处理任何错误。

更高级的用法:

你可以通过 options 对象来配置请求：

const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 })
};

fetch('https://jsonplaceholder.typicode.com/posts', options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

这个例子发送一个 POST 请求，包含了自定义的头部信息和请求体。

处理响应:

Response 对象提供了多种方法来处理响应体：

response.json(): 将响应体解析为 JSON 对象。
response.text(): 将响应体解析为文本字符串。
response.blob(): 将响应体解析为 Blob 对象（二进制大对象）。
response.arrayBuffer(): 将响应体解析为 ArrayBuffer 对象。
response.formData(): 将响应体解析为 FormData 对象。

错误处理:

fetch API 的错误处理通常在 .catch() 方法中进行。 但是，需要注意的是，fetch 即使服务器返回错误状态码（例如 404），也不会拒绝 Promise。 你需要检查 response.ok 属性来判断响应是否成功：

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

总结:

fetch API 提供了一种强大且灵活的方式来进行网络请求。 它基于 Promise，易于使用，并且提供了丰富的功能来处理各种类型的响应。 然而，你需要注意错误处理和 CORS 问题。 对于更复杂的场景，你可能需要使用 Request 对象来更精细地控制请求。