js fetch异步请求使用详解

2023-09-07 10:15:37

前言

异步请求是指向服务器发送请求并接收响应，而无需等待请求完成。这使得 Web 应用程序能够在不阻塞用户界面 (UI) 的情况下与服务器通信，从而提高用户体验和应用程序性能。JavaScript 中用于进行异步请求的流行方法之一是 fetch API。

Fetch API

fetch API 是一个 JavaScript 全局函数，用于向服务器发送请求并接收响应。它返回一个 Promise 对象，该对象表示请求的最终结果。如果请求成功，则 Promise 将解析为 Response 对象，该对象包含有关响应的信息，例如状态代码、标题和正文。如果请求失败，则 Promise 将被拒绝，并且错误将作为拒绝原因提供。

使用 Fetch API 进行异步请求

进行异步请求的基本语法如下：

fetch(url)
  .then(response => {
    if (response.ok) {
      // 请求成功，处理响应正文
    } else {
      // 请求失败，处理错误
    }
  })
  .catch(error => {
    // 请求失败，处理错误
  });

其中：

url 是要发送请求的 URL。
then 处理程序用于处理成功响应。
catch 处理程序用于处理请求失败。

请求选项

我们可以通过向 fetch 函数传递一个 init 对象来指定请求选项，该对象包含以下属性：

method：请求方法，例如 GET、POST 或 PUT。
headers：请求头，例如 Content-Type。
body：请求正文，例如 JSON 数据。

响应处理

响应对象提供了有关响应的信息，我们可以使用以下方法来处理响应：

ok：布尔值，指示请求是否成功（状态代码在 200-299 范围内）。
status：响应状态代码。
statusText：响应状态文本。
headers：响应头。
body：响应正文，可以进一步使用 text() 或 json() 方法获取。

示例

下面是一个使用 fetch API 获取服务器上的 JSON 数据的示例：

fetch('https://example.com/api/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('请求失败');
    }
  })
  .then(data => {
    // 处理 JSON 数据
  })
  .catch(error => {
    // 处理错误
  });