如何使用 JavaScript Fetch API 获取数据？

在前端开发中，我们常常需要通过网络请求获取数据并展示在页面上。Fetch API 是浏览器原生提供的一种 HTTP 请求方法，它通过简洁的 API 封装了 XMLHttpRequest 对象，实现了更加方便、易读和易用的网络请求方式。

基本使用方法

在最简单的情况下，我们可以使用 fetch() 方法来发起网络请求并获取响应数据。例如，我们获取一个 API 返回的 JSON 数据：

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

这段代码中，fetch('https://jsonplaceholder.typicode.com/todos/1') 发起了一个 GET 请求，获取了 ID 为 1 的待办事项数据。然后，我们使用 response.json() 方法将响应数据中的 JSON 对象解析出来，返回一个 Promise 对象；最后，我们使用 .then() 方法，将解析后的数据打印到浏览器控制台中。

需要注意的是， fetch() 方法默认使用 GET 请求方式，如果需要使用 POST 或其他请求方式，需要在第二个参数中设置请求配置项：

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log(data))

在这个例子中，我们发起了一个 POST 请求，向 API 发送了一个 JSON 字符串，包含了文章标题、内容和作者 ID 信息。然后，我们将响应数据中的 JSON 对象解析出来，并打印到浏览器控制台中。

请求配置项

fetch() 方法的第二个参数是一个可选的请求配置对象。通过配置对象，我们可以设置请求方式、请求头、请求体、请求超时时间等等一系列与网络请求相关的选项。

以下是一个常见的请求配置项的例子：

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'foo',
    completed: false,
  }),
  timeout: 5000,
})
  .then(response => response.json())
  .then(data => console.log(data))

method

设置请求方式，可以是 GET、POST、PUT、DELETE 等等。默认值为 GET。

headers

设置请求头信息。可以是一个对象，也可以是一个 Headers 对象。默认值为 {}。

headers: {
  'Content-Type': 'application/json',
  'X-Auth-Token': 'my-secret-token',
}

body

设置请求体信息。可以是一个字符串，也可以是一个 FormData、Blob、BufferSource、URLSearchParams、ReadableStream 或者 FormData 对象。默认值为 null。

body: JSON.stringify({
  title: 'foo',
  completed: false,
})

mode

设置请求模式。可以是 'cors'、'no-cors'、'same-origin'、'navigate' 或者自定义模式。默认值为 'cors'。

cache

设置缓存模式。可以是 'default'、'no-store'、'reload'、'no-cache'、'force-cache' 或者 'only-if-cached'。默认值为 'default'。

credentials

设置请求是否带上凭证信息。可以是 'omit'（不带凭证）、'same-origin'（同源带凭证）、'include'（跨域带凭证）。默认值为 'same-origin'。

redirect

设置请求的跟随模式。可以是 'follow'（跟随重定向）、'manual'（手动重定向）或者 'error'（发生错误时不跟随重定向）。默认值为 'follow'。

referrer

设置请求的来源信息。可以是 ''（默认，不发送来源信息）、'no-referrer'（不发送任何来源信息）、'origin'（只发送来源域名）、'no-referrer-when-downgrade' 或者自定义值。

referrerPolicy

设置请求的 Referrer 策略。可以是 'no-referrer'、'no-referrer-when-downgrade'、'same-origin'、'origin'、'strict-origin'、'origin-when-cross-origin'、'strict-origin-when-cross-origin' 或者自定义值。

integrity

设置请求的完整性校验值。可以是一个字符串，表示文件的 SHA-256 值、Subresource Integrity 值等等。例如：

integrity: 'sha256-KDfMZMBVte8WtOkw97JORq3iKllsZsSZ82ooOnzFbLY=',

keepalive

是否开启长连接，即保持请求与服务器的连接一直打开，而不是发送完一次请求就立即关闭。默认值为 false。

signal

设置 ABORT 控制器，用于取消请求。如果设置了 signal 字段，则 fetch() 将返回一个被解析为 AbortController 对象的 Promise；否则，它将返回一个被解析为 Response 对象的 Promise。例如：

const abortController = new AbortController();
const signal = abortController.signal;

setTimeout(() => {
  abortController.abort();
}, 5000);

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

处理响应数据

fetch() 方法返回的是一个 Promise，我们可以使用 .then() 方法来处理异步操作的结果。在网络请求中，响应数据通常包含在一个 Response 对象中，我们需要对其进行解析才能获得我们想要的数据信息。

解析 JSON 数据

如果需要获取的是 JSON 数据，我们可以使用 response.json() 来将响应数据解析为 JSON 对象。例如：

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

解析文本数据

如果需要获取的是文本数据，我们可以使用 response.text() 来将响应数据解析为字符串。例如：

fetch('https://www.baidu.com/')
  .then(response => response.text())
  .then(data => console.log(data))

获取响应头信息

如果需要获取响应头信息，我们可以使用 response.headers 属性。它返回一个名为 Headers 的对象，可以使用 get() 方法来获取指定键的值。例如：

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => console.log(response.headers.get('content-type')))

获取响应状态码

如果需要获取响应状态码，我们可以使用 response.status 属性。例如：

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => console.log(response.status))

获取原始的响应对象

如果需要获取原始的 Response 对象，我们可以直接访问 .then() 方法的回调函数的第一个参数，例如：

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => console.log(response))

错误处理

网络请求可能会出现各种错误，例如请求超时、网络连接中断、服务器返回错误码等等。在 fetch() 中，我们可以通过 .catch() 方法来捕捉和处理错误。例如：

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

在这个例子中，我们使用 .ok 属性来判断响应是否成功。如果成功，我们将响应数据解析为 JSON 对象并打印到控制台中，否则我们将抛出一个错误并将错误信息打印到控制台中。

参考资料

• Fetch API 文档