精通Fetch：轻松编写高效的异步网络应用

前端

2023-11-14 18:31:38

浅谈 Fetch

在当今快节奏的互联网世界中，异步网络应用已成为构建现代化、响应迅速的网站和应用程序的必备利器。借助异步网络应用，开发者能够让网页在不中断用户交互的情况下进行数据传输，从而显著提升用户体验。

在过去，想要开发异步网络应用，XHR（XMLHttpRequest）曾是开发者们的首选。然而，随着Fetch API的诞生，XHR逐渐淡出舞台，成为历史。Fetch API拥有更为简洁、语义化的语法，且无需多次回调，因此备受开发者的青睐。

接下来，我们将详细剖析Fetch API的使用方式，助您轻松打造高效的异步网络应用。

一、Fetch API简介

Fetch API是一个基于Promise的网络接口，它允许开发者以更简单、更直观的方式进行网络请求。Fetch API的主要优点如下：

语法简洁、易于理解。
无需多次回调。
支持Promise，便于异步编程。
跨浏览器兼容性良好。

二、Fetch API的基本使用

发送GET请求

最简单的Fetch请求便是发送GET请求，代码如下：

fetch('https://example.com/api/v1/users')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error: ', error);
  });

这段代码首先使用fetch()方法发起一个GET请求，并将请求的URL作为参数传入。然后，使用then()方法处理请求的响应。如果响应的状态码是200（OK），则调用json()方法将响应数据解析为JSON格式。否则，抛出错误。

解析完JSON数据后，可以使用另一个then()方法处理解析后的数据。最后，使用catch()方法处理请求过程中可能出现的错误。

发送POST请求

要发送POST请求，需要在fetch()方法中指定请求的method参数。代码如下：

fetch('https://example.com/api/v1/users', {
  method: 'POST',
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john.doe@example.com'
  }),
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error: ', error);
  });

这段代码首先使用fetch()方法发起一个POST请求，并将请求的URL作为参数传入。然后，在fetch()方法中指定请求的method参数为'POST'。接着，使用body参数指定要发送的数据，并将数据转换为JSON格式。最后，在headers参数中指定请求头，表明发送的数据类型为JSON。

发送其他类型的请求

除了GET和POST请求之外，Fetch API还支持发送其他类型的请求，如PUT、DELETE等。代码如下：

fetch('https://example.com/api/v1/users/1', {
  method: 'PUT',
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john.doe@example.com'
  }),
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error: ', error);
  });