Fetch API HTTP请求实用指南
本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解。
注意:所有示例均在带有箭头功能的 ES6中给出。
当前的Web /移动应用程序中的一种常见模式是从服务器请求或显示某种数据(例如用户,帖子,评论,订阅,付款等),然后使用CRUD(创建-Create,阅读-Retrieve,更新-Update或删除-Delete)操作。
为了进一步操作资源,我们经常使用这些JS方法(推荐),例如 .map(), .filter()和 .reduce()。
一下就是我们要解决的问题:
处理JS的异步HTTP请求
什么是AJAX?
为什么要获取API?
快速介绍Fetch API
获取API - CRUD示例←好东西!
1.处理JS的异步HTTP请求
JavaScript(JS)的工作原理是最具有挑战性的部分之一是理解如何处理异步请求,这需要理解promises和回调是如何工作的。
在大多数编程语言中,我们都认为操作按顺序(顺序)发生。必须先执行第一行才能继续下一行。这个道理显而易见,因为这是我们自己就是这么操作或者是工作的,当然你也可以选择边听歌边写代码(O(∩_∩)O哈哈~); 但是使用JS,我们有多个在后台/前台运行的操作,并且我们不能在每次等待用户事件时都冻结一个Web应用程序。 将JavaScript描述为异步可能会产生一些误导。更准确地说,JavaScript是同步的,并且具有各种回调机制的单线程。 但是有些事情必须按顺序发生,否则会导致流程混乱和产生意外结果。出于这个原因,我们可以使用promises和callback来构建它。举例:在某个操作之前需要验证用户凭据才能进行这个操作。
2.什么是AJAX
AJAX代表异步JavaScript和XML,它允许在应用程序运行时通过与Web服务器交换数据来异步更新网页。简而言之,它实质上意味着您可以更新网页的各个部分而无需重新加载整个页面(URL保持不变的情况下)。
AJAX是一个误导性的名称。AJAX应用程序可能使用XML来传输数据,但将数据作为纯文本或JSON文本传输同样很常见。 - w3shools.com
AJAX一路走来?
许多开发人员对在单页应用程序(SPA)中拥有所有特性感到非常兴奋,但是这也会导致很多异步痛苦!但幸运的是,我们有像Angular,VueJS和React这样的库,所以在写SPA应用的时候会更加简单和易用。 总的来说,如何平衡重新加载整个页面或加载部分页面就显得非常重要了。 在大多数情况下,页面重新加载在浏览器日益完善的功能下已经表现的非常好了。要是在以前,页面重新加载需要几秒钟(取决于服务器的位置和浏览器功能)。但是今天的浏览器非常快,所以决定是否执行AJAX或页面重新加载的区别并不大。 个人的经验是,在大多数情况下,客户不关心它是SPA还是额外的页面重新加载。当然,不要误会我的意思,我确实喜欢SPA,但我们需要考虑一些权衡,如果我们处理有限的预算和缺乏资源,那么快速解决方案可能是更好的方法。
最后,它实际上取决于用例,但我个人认为SPA需要更多的开发时间和处理一些头痛的问题(页面的首次加载),而不是简单的页面重新加载。
3.为什么要 Fetch API?
这允许我们对服务器执行声明性HTTP请求。对于每个请求,它创建一个Promise必须解决的请求才能定义内容类型并访问数据。
现在,Fetch API的好处在于它完全受JS生态系统的支持,并且也是MDN Mozilla文档的一部分。最后但并非最不重要的是,它在大多数浏览器(IE除外)上开箱即用。从长远来看,我猜它将成为调用Web API的标准方式。
注意!我很清楚其他HTTP方法,例如使用带有RXJS的Observable,以及它如何关注订阅/取消订阅等方面的内存管理/泄漏。也许这将成为执行HTTP请求的新标准方式,谁知道呢? 无论如何,在本文中我只关注Fetch API,但可能在将来写一篇关于Observable和RXJS的文章。
4.快速介绍Fetch API
该fetch()方法返回一个Promise解析Response来自Request显示状态(成功与否)的方法。如果您promise {}在控制台日志屏幕中收到此消息,请不要惊慌 - 它基本上意味着Promise工作,但等待解决。因此,为了解决它,我们需要 .then()处理程序(回调)来访问内容。
所以简而言之,我们首先定义路径(Fetch),其次是从服务器请求数据(Request),第三个定义内容类型(Body),最后但并非最不重要的是,我们访问数据(Response)。
如果你很难理解这个概念,不要慌。您将通过下面显示的示例获得更好的概述。
我们将用于示例的路径
https://jsonplaceholder.typicode.com/users //返回JSON
复制代码
5.获取API - HTTP示例
如果我们想要访问数据,我们需要两个.then()处理程序(回调)。但是如果我们想要操纵资源,我们只需要一个 .then()处理程序。但是,我们可以使用第二个来确保已发送值。 第一个response它只是一个 HTTP 响应,而不是真的JSON。为了获取JSON的内容,我们可以使用json()方法,除了 resonance.json()还有resonance.text() 等等;详情请看 mozilla官方文档
基本提取API模板
//基于fetch的基本模块
fetch
.then(response.something) //定义返回的类型和数据格式 resonance.json()
.then(data) // 返回的数据
复制代码
注意!以上示例仅用于说明目的。如果执行它,代码将不起作用。
获取API示例
显示用户
显示用户列表
创建新用户
删除用户
更新用户
注意!资源不会真正在服务器上创建,但会返回虚假结果来模仿真实服务器。
1.显示用户
如前所述,显示单个用户的过程包括两个 .then()处理程序(回调),第一个用于定义对象,第二个用于访问数据。 请注意,只需阅读查询url字符串,/users/2我们就能理解/预测API的作用。这也是rest api 的重要意义之一
例子
fetch('https://jsonplaceholder.typicode.com/users/2').then(response => response.json()) //定义返回的类型和数据格式.then(data => console.log(data)) // 返回的数据
// 数据示例:
// {
// "id": 2,
// "name": "Ervin Howell",
// "username": "Antonette",
// "email": "Shanna@melissa.tv",
// "address": {
// "street": "Victor Plains",
// "suite": "Suite 879",
// "city": "Wisokyburgh",
// "zipcode": "90566-7771",
// "geo": {
// "lat": "-43.9509",
// "lng": "-34.4618"
// }
// },
// "phone": "010-692-6593 x09125",
// "website": "anastasia.net",
// "company": {
// "name": "Deckow-Crist",
// "catchPhrase": "Proactive didactic contingency",
// "bs": "synergize scalable supply-chains"
// }
// }复制代码
2.显示用户列表 该示例几乎与前一个示例相同,只是查询字符串是/users,而不是/users/2。
例子
fetch('https://jsonplaceholder.typicode.com/users').then(response => response.json()) //定义返回的类型和数据格式.then(data => console.log(data)) // 返回的数据
// 数据示例:
// [
// {
// "id": 1,
// "name": "Leanne Graham",
// "username": "Bret",
// "email": "Sincere@april.biz",
// "address": {
// "street": "Kulas Light",
// "suite": "Apt. 556",
// "city": "Gwenborough",
// "zipcode": "92998-3874",
// "geo": {
// "lat": "-37.3159",
// "lng": "81.1496"
// }
// },
// "phone": "1-770-736-8031 x56442",
// "website": "hildegard.org",
// "company": {
// "name": "Romaguera-Crona",
// "catchPhrase": "Multi-layered client-server neural-net",
// "bs": "harness real-time e-markets"
// }
// }
// 更多...
// ]
复制代码
3.创建新用户
这个看起来与前面的例子有点不同。如果熟悉HTTP协议,它给我们提供了很多的方法,如POST,GET,DELETE,UPDATE,PATCH和PUT。这些方法是简单描述要执行的操作类型的动词,主要用于操作服务器上的资源/数据。
无论如何,为了使用Fetch API创建新用户,我们需要使用HTTP谓词POST。但首先,我们需要在某处定义它。幸运的是,Init我们可以传递一个可选参数,用于定义自定义设置的URL,例如方法类型,正文,凭据,标题等。
例子
fetch('https://jsonplaceholder.typicode.com/users',{method: 'POST',body: JSON.strignify({username: '张三',email: 'elonasdfk@gmail.com',userId: 1}),headers: { 'Content-Type': 'application/json;charset=utf-8'}
})
复制代码
4.删除用户
为了删除用户,我们首先需要定位用户/users/1,然后我们定义方法类型DELETE。
例子
fetch('https://jsonplaceholder.typicode.com/users/1',{methods: 'DELETE'
})
复制代码
5.更新用户
HTTP谓词PUT用于操作目标资源,如果要进行部分更改,则需要使用PATCH。
例子
fetch('https://jsonplaceholder.typicode.com/users',{method: 'PUT',body: JSON.strignify({username: '张三',email: 'elonasdfk@gmail.com',userId: 1}),headers: { 'Content-Type': 'application/json;charset=utf-8'}
})
复制代码
结论
现在,你已基本了解如何使用JavaScript的Fetch API从服务器检索或操作资源,以及如何处理promise。您可以使用本文作为如何构建CRUD操作的API请求的指南。 就个人而言,我觉得Fetch API是声明性的,就算没有任何技术编码经验,你也可以很容易地理解发生了什么。
如果有啥问题在评论处分享你的想法。
Fetch API HTTP请求实用指南相关推荐
- ES6 Fetch API和Cookie相关的知识点
Jerry Wang曾经写过一篇比较web应用处于stateful和stateless不同状态下的行为差异,发表在SAP社区上: https://blogs.sap.com/2017/03/31/st ...
- 【Fetch 】深度剖析 JavaScript Fetch API
概览 在Web开发中,经常需要与服务器进行数据交互,而 Fetch API 是一种基于 Promise 的现代API,用于在网络中发送和接收请求.笔者将深入介绍 Fetch API 的工作原理,从网络 ...
- 使用fetch封装请求_关于如何使用Fetch API执行HTTP请求的实用ES6指南
使用fetch封装请求 In this guide, I'll show you how to use the Fetch API (ES6+) to perform HTTP requests to ...
- Fetch API 简单指南
Fetch API 简单指南 什么是 Fetch API fetch api 是一个基于Promise api设计的 xmlHttpRequest 的升级替代品,用于通过javascript发起异步请 ...
- 如何使用浏览器对网络请求编辑重发(Edit and Resent) 以及: fetch API 中 ReadablleStream 的打印方法
文章目录 需求 火狐浏览器-编辑重发(Edit and Resent) fetch API Links 需求 上网用F12分析一个请求,调用的事服务端的一个数据接口. 想修改请求参数(请求头.请求体, ...
- 使用JavaScript Fetch API发送HTTP请求
介绍 JavaScript的Fetch API允许我们发送HTTP请求.自从ECMAScript 2015(通常称为ES6)被引入并使用Promises以来,它一直是JavaScript的标准部分. ...
- 原生Js调用Fetch Api请求接口(新的Ajax解决方案)
Fetch Api Fetch Api是新的ajax解决方案,Fetch会返回Promise:Fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象. 前端与后端交 ...
- 批量调取接口_批量请求接口-API文档-开发指南-Web服务 API | 高德地图API
产品介绍 特别说明:受产品策略调整影响,自2020年11月起,建议您不再使用此批量接口.后续平台会逐步废弃并下线此服务. 批量接口通过用户传入合并后的请求,同时返回多个请求的顺序集合,目前最多支持20 ...
- 《Scikit-Learn与TensorFlow机器学习实用指南》第9章 启动并运行TensorFlow
第9章 启动并运行TensorFlow 来源:ApacheCN<Sklearn 与 TensorFlow 机器学习实用指南>翻译项目 译者:@akonwang @WilsonQu 校对:@ ...
最新文章
- bmp类型转成Halcon的Hobject类型
- airpods固件更新方法_苹果AirPods 2 和 AirPods Pro固件升级
- Codeforces Beta Round #9 (Div. 2 Only)【未完结】
- [蓝桥杯2018初赛]全球变暖-dfs,bfs,连通块
- leetcode714. 买卖股票的最佳时机含手续费(动态规划)
- Web框架——Flask系列之Flask-SQLAlchemy安装与使用 定义数据模型(八)
- 蚂蚁金服开源的机器学习工具 SQLFlow,有何特别之处?
- VC用ADO访问数据库全攻略 作者 相生昌
- wikioi 1294 全排列 dfs
- 计算机毕业设计源码分享双鱼林,计算机毕业课程设计论文源码-057双鱼林asp教务选课信息系统...
- Firefox关闭最后一个标签页时不关闭Firefox的设置
- 链表和数组的区别在哪里?
- EF6.0新特性-DbCommandInterceptor实现非SQL端读写分离
- 用script实现Web Service的异步调用
- java聊天室系统用例图_java聊天室的设计与实现.ppt
- c语言源代码如何读取打开文件,C语言读取文件
- md5算法不可逆,为啥网上很多网站声称可以解密md5
- 盒马-在路上的服务设计品牌
- 程序的启动、卸载和分享
- 基于Java+springboot+mvc+vue员工管理系统
热门文章
- 内网和外网的区别_无需服务器,树莓派使用内网穿透进行建站与维护
- c语言cnn实现ocr字符,端到端的OCR:基于CNN的实现
- python提取word参考文献_写作相关 | word中参考文献转化为.bib格式全流程
- kaldi语音识别实战pdf_语音识别相关工具和资料分享
- java jframe 背景颜色_Java JFrame背景颜色不起作用
- node oracle linux 安装,Linux 下 nodejs 使用官方oracledb库连接数据库 教程
- 的源码管理器中有感叹图标_Win7系统我的电脑中没有光驱图标的解决方法
- Adobe Reader 文档无法签名_手把手教你如何利用PDF阅读器压缩PDF文档
- 有三AI发布360页11万字深度学习CV算法工程师成长指导手册,可下载收藏打印,未完待续...
- 【TensorFlow2.0】以后我们再也离不开Keras了?