介绍
Fetch API 代表了 Web 应用程序与服务器交互以及通过网络检索内容的方式的重大演变。 Fetch API 作为 XMLHttpRequest (XHR) 的现代替代方案推出，为开发人员提供了更强大的功能、灵活性和简单性。随着与现代浏览器的集成，Fetch 已成为构建当代 Web 应用程序的重要工具，可以更自然、更高效地处理异步操作。

Fetch API 是什么？
Fetch API 是一个 JavaScript 接口，可简化发送 HTTP 请求和处理网络响应。与旧的 XMLHttpRequest 不同，Fetch 提供了一个与 JavaScript 的 Promise API 无缝集成的简化接口。这种集成不仅使管理异步操作变得更加容易，而且还提高了代码的可读性和可维护性，使您的代码库更干净、更易于管理。

Fetch 的核心是围绕 fetch() 函数构建的，这是现代浏览器中可用的发送网络请求的全局函数。该函数返回一个解析为 Response 对象的 Promise，使开发人员可以轻松访问响应数据、标头和状态。这允许采用更直观、更有组织的方法来处理网络请求的结果。 （阅读更多）

基本语法
Fetch API 围绕 fetch() 函数，该函数被设计得既简单又强大。该函数用于发起网络请求，并带有两个主要参数：

• URL：要获取的资源的URL字符串。
• Options（可选）：包含请求的各种设置或配置的对象，例如 HTTP 方法、标头、正文内容和模式。

简单获取调用的结构
基本的获取调用很简单，如下所示：

fetch(url)
  .then(response => {
    // Handle the response here
  })
  .catch(error => {
    // Handle any errors here
  });

• url为要获取的资源地址。
• then() 方法处理 Fetch API 解析的 Promise，提供 Response 对象。
• catch() 方法处理请求期间可能发生的任何错误。

基本获取请求示例

fetch('https://api.example.com/data')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error('Error:', error);
  });

此示例演示如何发出简单的 Fetch 请求，成功后将响应记录到控制台，并妥善处理错误。

为什么使用 Fetch？

使用 Fetch 的优点

Promises： Fetch 最显着的优势之一是它对 Promises 的使用。与 XHR 基于回调的方法相比，Promise 提供了一种更清晰、更易于管理的方式来处理异步任务。使用 Promises，您可以链接 .then() 方法来处理成功响应，并链接 .catch() 方法来管理错误，从而生成更具可读性且更易于调试的代码。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

此外，Fetch API 与 async/await 语法完美搭配，使异步代码更加简单。

使用 async/await 的示例：

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

更简洁的语法： 与 XHR 相比，Fetch 提供了现代且简洁的语法。传递给 fetch() 的配置对象可以轻松设置请求参数，例如 HTTP 方法、标头和正文内容，从而使代码更清晰、更易于维护。（阅读全文

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

流处理： Fetch 支持响应流，这使得开发人员能够更有效地处理大量数据。虽然 XHR 可能会难以应对大型响应，从而导致性能问题或需要额外的处理来进行分块处理，但 Fetch 的 Response 对象提供了 .body.getReader() 等方法来读取分块数据。这对于流式传输和管理大型数据集特别有用。

fetch('https://api.example.com/large-data')
  .then(response => {
    const reader = response.body.getReader();
    let decoder = new TextDecoder();
    let result = '';

    return reader.read().then(function processText({ done, value }) {
      if (done) {
        console.log('Stream finished.');
        return result;
      }
      result  = decoder.decode(value, { stream: true });
      return reader.read().then(processText);
    });
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

阅读全文 - 单击此处

结论
Fetch API 彻底改变了开发人员在 Web 应用程序中发出网络请求的方式。凭借其简洁的语法、与 Promises 的无缝集成以及对异步/等待和流式传输等现代功能的支持，Fetch 提供了一个强大而灵活的工具来处理 HTTP 请求。随着 Web 开发的不断发展，Fetch API 将仍然是构建高效、可维护和现代 Web 应用程序的关键组件。