最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

当前时讯:简单的了解下 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应用程序中获取数据和资源的流行选择。

来源:微信公众号[前端达人]

关键词: