当前位置：首页 > article >正文

【JavaScript fetch API】简介和使用

article 2024/10/23 21:22:18

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