JavaScript - Fetch API 完全手册
yuyutoo 2024-10-15 16:50 8 浏览 0 评论
如果您想从 API 加载数据，那么 fetch API 是在 JavaScript 中执行此操作的最佳方式。您不需要引入任何第三方库，就可以直接使用方便的fetch。
像上图所示，绝大多数浏览器已经原生支持Fetch，所以您可以放心使用。Node.js 对它的支持也正在路上，Fetch 已经作为 Node v17 中的实验性功能提供，你可以使用 node app.js --experimental-fetch 来开启它。
Fetch API 的基本使用
Fetch API 是基于Promise的，所以如果你不了解Promise, 最好先学习一下Promise。
调用 fetch API 的最简单方法是将 URL 传递给 fetch 函数。
这将返回一个包含响应数据的Promise。此响应数据包含状态属性以及将原始响应数据转换为 JSON、文本或其他格式的方法。
上面显示res.json() 是在我们的响应中调用 json() 方法，这个方法会返回另外一个 promise，该 promise 从我们的响应中解析 JSON 数据。
我们可以在后面的then方法中获取到最终需要的JSON数据对象。
如果您从 JSON api 获取数据，这就是大多数获取请求的样子。 我们首先获取 URL，然后将响应转换为 JSON，最后使用最终 .then 中的数据。
如果使用async/await语法，可能会更简单点。
Fetch 参数
这将涵盖您的一些 fetch 用途，但通常您需要传递其他选项来进行 fetch 配置。 fetch 函数采用第二个选项对象参数，其中包含大量潜在选项。
method
最常用的选项是方法选项。 此选项允许您设置要使用的 HTTP 动词（GET、POST、PUT、DELETE 等）。
body
如果您正在修改方法，那么您可能需要将数据与您的请求一起传递。 这就是 body 选项的用武之地。body 不接受对象，因此如果您想将 JSON 传递给您的 API，您必须首先将其转换为字符串。
headers
现在，执行上述操作可能看起来像是将 JSON 传递给 API 所需要做的一切，但这实际上是行不通的。 原因是您需要设置正确的标头来告诉您的 API 您正在发送 JSON 信息。 此标头选项允许您设置所需的任何 HTTP 标头。
上面这组代码是将 JSON 传递给 API 所需要做的一切。
signal
最后一个要说的的是信号选项。 这个选项接受一个 AbortSignal，它可以用来中止一个获取请求。
正如您从代码中看到的那样，这比其他选项要复杂一些。 首先你必须创建一个新的 AbortController 这个控制器有一个信号属性，这是你传递给signal选项的。 控制器还有一个 abort 方法，当调用该方法时，将使用相关信号中止获取请求。 这将导致 fetch Promise以 AbortError Reject异常。
这些选项应该是可以cover你90%左右的用例。具体还有其他一些不常用的可以去查看官网文档。
总结：
fetch API 是一个功能强大的工具，易于上手，它包含适用于每个可以想象的用例的许多高级选项。最重要的是，马上node.js就可以原生支持它，逻辑可以前后端共享，岂不美哉！
感谢阅读！
相关推荐
- 墨尔本一华裔男子与亚裔男子分别失踪数日 警方寻人
-
中新网5月15日电据澳洲新快网报道，据澳大利亚维州警察局网站消息，22岁的华裔男子邓跃(Yue‘Peter’Deng，音译)失踪已6天，维州警方于当地时间13日发布寻人通告，寻求公众协助寻找邓跃。华...
- 网络交友须谨慎!美国犹他州一男子因涉嫌杀害女网友被捕
-
伊森·洪克斯克（图源网络，侵删）据美国广播公司（ABC）25日报道，美国犹他州一名男子于24日因涉嫌谋杀被捕。警方表示，这名男子主动告知警局，称其杀害了一名在网络交友软件上认识的25岁女子。雷顿警...
- 一课译词:来龙去脉（来龙去脉 的意思解释）
-
Mountainranges[Photo/SIPA]“来龙去脉”，汉语成语，本指山脉的走势和去向，现比喻一件事的前因后果（causeandeffectofanevent），可以翻译为“i...
- 高考重要考点:range（range高考用法）
-
range可以用作动词，也可以用作名词，含义特别多，在阅读理解中出现的频率很高，还经常作为完形填空的选项，而且在作文中使用是非常好的高级词汇。...
- C++20 Ranges:现代范围操作（现代c++白皮书）
-
1.引言：C++20Ranges库简介C++20引入的Ranges库是C++标准库的重要更新，旨在提供更现代化、表达力更强的方式来处理数据序列（范围，range）。Ranges库基于...
- 学习VBA，报表做到飞 第二章 数组 2.4 Filter函数
-
第二章数组2.4Filter函数Filter函数功能与autofilter函数类似，它对一个一维数组进行筛选，返回一个从0开始的数组。...
- VBA学习笔记:数组:数组相关函数—Split，Join
-
Split拆分字符串函数，语法Split（expression，字符，Limit，compare），第1参数为必写，后面3个参数都是可选项。Expression为需要拆分的数据，“字符”就是以哪个字...
- VBA如何自定义序列，学会这些方法，让你工作更轻松
-
No.1在Excel中，自定义序列是一种快速填表机制，如何有效地利用这个方法，可以大大增加工作效率。通常在操作工作表的时候，可能会输入一些很有序的序列，如果一一录入就显得十分笨拙。Excel给出了一种...
- Excel VBA入门教程1.3 数组基础（vba数组详解）
-
1.3数组使用数组和对象时，也要声明，这里说下数组的声明：'确定范围的数组，可以存储b-a+1个数，a、b为整数Dim数组名称(aTob)As数据类型Dimarr...
- 远程网络调试工具百宝箱-MobaXterm
-
MobaXterm是一个功能强大的远程网络工具百宝箱，它将所有重要的远程网络工具（SSH、Telnet、X11、RDP、VNC、FTP、MOSH、Serial等）和Unix命令（bash、ls、cat...
- AREX:携程新一代自动化回归测试工具的设计与实现
-
一、背景随着携程机票BU业务规模的不断提高，业务系统日趋复杂，各种问题和挑战也随之而来。对于研发测试团队，面临着各种效能困境，包括业务复杂度高、数据构造工作量大、回归测试全量回归、沟通成本高、测试用例...
- Windows、Android、IOS、Web自动化工具选择策略
-
Windows平台中应用UI自动化测试解决方案AutoIT是开源工具，该工具识别windows的标准控件效果不错，但是当它遇到应用中非标准控件定义的UI元素时往往就无能为力了，这个时候选择silkte...
- python自动化工具:pywinauto（python快速上手 自动化）
-
简介Pywinauto是完全由Python构建的一个模块，可以用于自动化Windows上的GUI应用程序。同时，它支持鼠标、键盘操作，在元素控件树较复杂的界面，可以辅助我们完成自动化操作。我在...
- 时下最火的 Airtest 如何测试手机 APP?
-
引言Airtest是网易出品的一款基于图像识别的自动化测试工具，主要应用在手机APP和游戏的测试。一旦使用了这个工具进行APP的自动化，你就会发现自动化测试原来是如此简单！！连接手机要进行...
- 【推荐】7个最强Appium替代工具，移动App自动化测试必备!
-
在移动应用开发日益火爆的今天，自动化测试成为了确保应用质量和用户体验的关键环节。Appium作为一款广泛应用的移动应用自动化测试工具，为测试人员所熟知。然而，在不同的测试场景和需求下，还有许多其他优...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)