简单的了解下 Fetch API 的工作原理

简介

Fetch API是一种现代的Web API，提供了一种异步获取网络资源的方法。由于其简单性、灵活性和一致性，它已经成为Web应用程序中获取数据和资源的流行选择。在本文中，我们将深入探讨Fetch API的核心特性，并了解其工作原理。

Fetch API的工作原理是什么？

Fetch API基于Promise API，该API提供了一种一致而优雅的方式来处理JavaScript中的异步操作。当您调用fetch()函数时，它返回一个Promise对象，如果请求成功，则该对象将解析为一个Response对象，否则将拒绝并返回错误。

在底层，Fetch API使用XMLHttpRequest对象向服务器发送HTTP请求并接收响应。XMLHttpRequest是一个低级API，早期的Web应用程序就使用了它，并且被许多其他Web API使用，包括AJAX和WebSockets。

当您调用fetch()函数时，它创建一个新的XMLHttpRequest对象并设置事件侦听器来处理来自服务器的响应。fetch()函数还接受一个可选的options对象，允许您自定义HTTP请求，包括HTTP方法、标头和正文。

以下是使用Fetch API获取网络资源的示例：

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

在这个示例中，我们使用fetch()从服务器获取一个JSON文件。一旦接收到响应，我们调用Response对象上的json()方法来提取响应中的JSON数据。然后将数据记录到控制台中。如果出现错误，我们将错误记录到控制台中。

Fetch API还支持各种HTTP方法，包括GET、POST、PUT、DELETE和其他方法。您可以使用options对象指定HTTP方法，如下所示：

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

在这个示例中，我们使用fetch()发送一个带有JSON负载的POST请求到服务器。我们设置Content-Type标头为application/json，以指示负载为JSON数据。

Fetch API还支持各种其他功能，包括请求和响应标头、请求和响应模式、cookies等。

简化的示例

这是一个简化的JavaScript实现Fetch API的示例，它解释了Fetch API的工作原理：

function fetch(url, options) {
  // 创建一个新的Promise对象
  return new Promise((resolve, reject) => {
    // 创建一个新的XMLHttpRequest对象
    const xhr = new XMLHttpRequest();

    // 处理服务器的响应
    xhr.onload = () => {
      // 创建一个新的Response对象并解析响应数据
      const response = new Response(xhr.responseText, {
        status: xhr.status,
        statusText: xhr.statusText,
        headers: xhr.getAllResponseHeaders()
      });
      resolve(response); // 请求成功，解析为Response对象并解析Promise对象
    };

    // 处理获取数据过程中出现的任何错误
    xhr.onerror = () => {
      reject(new TypeError('Network request failed')); // 请求失败，拒绝Promise对象并返回一个TypeError错误
    };

    // 打开到服务器的连接
    xhr.open(options.method || 'GET', url);

    // 设置任何提供的标头
    for (const header in options.headers) {
      xhr.setRequestHeader(header, options.headers[header]);
    }

    // 发送请求到服务器
    xhr.send(options.body);
  });
}

这个Fetch API的实现使用了XMLHttpRequest对象，它是现代Web API的基础网络API。以下是它的工作原理：

• fetch()函数接受两个参数：要获取的资源的URL和包含有关请求的任何其他信息（如标头、要使用的HTTP方法和请求体）的options对象。

• fetch()函数创建一个新的Promise对象并返回它。如果请求成功，Promise将解析为一个Response对象，否则将拒绝并返回一个错误。

• fetch()函数创建一个新的XMLHttpRequest对象，该对象将用于向服务器发送实际的HTTP请求。

• 当从服务器接收到响应时，xhr.onload()函数被调用。该函数创建一个新的Response对象，该对象填充响应数据（响应主体、标头、状态代码和状态文本）。然后将Response对象传递给resolve()函数，该函数解析fetch()返回的Promise。

• 如果在获取资源时发生错误，则调用xhr.onerror()函数。该函数创建一个带有消息“Network request failed”的新TypeError对象，并将其传递给reject()函数，该函数拒绝fetch()返回的Promise。

• xhr.open()函数用于打开到服务器的连接。它接受两个参数：要使用的HTTP方法（如果没有提供，则默认为“GET”）和要获取的资源的URL。

• xhr.setRequestHeader()函数用于设置在options对象中提供的任何标头。这通过迭代options.headers对象的属性并逐个设置每个标头来完成。

• xhr.send()函数用于向服务器发送实际的HTTP请求。如果请求有一个请求体，则它作为参数传递给send()函数。

这个Fetch API的实现是简化的，并不包括所有实际的Fetch API的功能，但是它应该能够让你了解它的底层工作原理。

总结

Fetch API为Web应用程序提供了一种强大而灵活的方式来获取网络资源。在底层，它使用XMLHttpRequest对象向服务器发送HTTP请求并接收响应。通过使用Promise和一致的API，Fetch API使JavaScript中的异步操作变得容易处理。通过支持HTTP方法、标头和其他功能，Fetch API已经成为现代Web应用程序中获取数据和资源的流行选择。

在文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注「前端达人」，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

原文：
https://javascript.plainenglish.io/how-javascripts-fetch-api-works-under-the-hood-2e4f990b9ce1

作者：Kyle Le

非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正