一、简介

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应用程序中获取数据和资源的流行选择。

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

简单的了解下 Fetch API 的工作原理的更多相关文章

  1. Windows下ARP协议的工作原理简介

       ARP协议(Address Resolve Protocol,地址解析协议)工作在TCP/IP协议的第二层-数据链路层,用于将IP地址转换为网络接口的硬件地址(媒体访问控制地址,即MAC地址). ...

  2. centos 6.5环境下分布式文件系统MogileFS工作原理及分布式部署实现过程

    MogileFS是一套高效的文件自动备份组件,由Six Apart开发,广泛应用在包括LiveJournal等web2.0站点上 MogileFS由3个部分组成:    第1个部分:是server端, ...

  3. Kubernetes API server工作原理

    作为Kubernetes的使用者,每天用得最多的命令就是kubectl XXX了. kubectl其实就是一个控制台,主要提供的功能: 1. 提供Kubernetes集群管理的REST API接口,包 ...

  4. Ajax新玩法fetch API

    目前 Web 异步应用都是基于 XMLHttpRequest/ActiveXObject (IE)实现的, 这些对象不是专门为资源获取而设计的,因而它们的 API 非常复杂,同时还需要开发者处理兼容性 ...

  5. Fetch API与POST请求那些事

    简述 相信不少前端开发童鞋与后端联调接口时,都会碰到前端明明已经传了参数,后端童鞋却说没有收到,尤其是post请求,遇到的非常多.本文以node.js作为服务端语言,借用express框架,简要分析客 ...

  6. 了解 Fetch API与Fetch+Async/await

    背景 提及前端与服务器端的异步通信,离不开 Ajax (Asynchronous JavaScript and XML).实际上我们常说的 Ajax 并非指某一项具体的技术,它主要是基于用脚本操作 H ...

  7. 【转】memcached工作原理介绍

    FROM: http://my.oschina.net/flynewton/blog/8984 官方主页: http://memcached.org/ 面临的问题  对于高并发高访问的Web应用程序来 ...

  8. 详解HashMap的内部工作原理

    本文将用一个简单的例子来解释下HashMap内部的工作原理.首先我们从一个例子开始,而不仅仅是从理论上,这样,有助于更好地理解,然后,我们来看下get和put到底是怎样工作的. 我们来看个非常简单的例 ...

  9. 电感式DC/DC变换器工作原理

    http://www.amobbs.com/thread-3293203-1-1.html 首先必须要了解电感的一些特性:电磁转换与磁储能.其它所有参数都是由这两个特性引出来的. 电感回路通电瞬间 断 ...

  10. Java HashMap的工作原理

    面试的时候经常会遇见诸如:”java中的HashMap是怎么工作的”.”HashMap的get和put内部的工作原理”这样的问题. 本文将用一个简单的例子来解释下HashMap内部的工作原理. 首先我 ...

随机推荐

  1. 确定linux系统网卡对应的物理网口

    没插网线的情况下系统上执行ethtool -p eth0 #eth0 对应的物理口一个灯在不停的闪烁ethtool  --identify  eth0 30 #eth0 对应的物理口闪烁30秒 ... ...

  2. new一个实例的原理及过程

    前提,要明白new出来的实例是什么,包含了哪些内容? 请看一下举例代码↓↓↓↓ function Person(name,age){ this.name = name; this.age = age; ...

  3. 【内存管理】ION内存管理器浅析(system contig heap)

    system contig heap与system heap 从代码中我们看到system contig heap与system heap同属一个文件中,ion_system_heap.c 相同点:它 ...

  4. 解决WIN7下pl/sql连接弹出空白提示框问题

    问题描述: win7 32位系统,已安装oracle10.0开发客户端,已配置数据库, 登陆pl/sql时出现空白提示框问题,尝试重装oracle无果,于是上网查找解决方法,逐步尝试,终于把客户端弄好 ...

  5. CH573 CH582 CH579蓝牙从机(peripheral)例程讲解六(蓝牙设置白名单)

    蓝牙从机设置白名单,可以只扫描应答(白名单中列出的)设备,只允许(白名单中列出的)设备连接. 蓝牙主机设置白名单,可以只扫描.连接特定的蓝牙设备(白名单中列出的). 一.蓝牙从机白名单设置有关的函数介 ...

  6. 导出生成word

    用XML做就很简单了.Word从2003开始支持XML格式,大致的思路是先用office2003或者2007编辑好word的样式,然后另存为xml,将xml翻译为FreeMarker模板(后缀为.ft ...

  7. 痞子衡嵌入式:分享一个i.MXRT系列配套DRAM压力测试上位机工具(i.MXRT DRAM Tester)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦SE团队制作的i.MXRT配套DRAM压力测试上位机工具. 事情源于痞子衡的技术交流群里的提问,有群友在恩智浦官方技术公众号 [恩 ...

  8. IDEA: 如何导入项目模块 以及 将 Java程序打包 JAR 详细步骤

    IDEA: 如何导入项目模块 以及 将 Java程序打包 JAR 详细步骤 . @ 目录 IDEA: 如何导入项目模块 以及 将 Java程序打包 JAR 详细步骤 IDEA 导入项目模块 Modul ...

  9. Navicat基础教程

    1.安装 可以直接前往官网进行安装,网址如下: https://navicat.com.cn/download/navicat-premium 下载之后将下载后的压缩包解压到当前文件夹,然后根据里面自 ...

  10. Double-Checked Locking 双重检查锁问题

    Code Correctness: Double-Checked Locking Abstract Double-checked locking 是一种不正确的用法,并不能达到预期目标. Explan ...