ES6 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()处理程序。但是,我们可以使用第二个来确保已发送值。
基本提取API模板
//基于fetch的基本模块
fetch
.then(response.something) //定义返回的类型和数据格式
.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是声明性的,就算没有任何技术编码经验,你也可以很容易地理解发生了什么。
如果有啥问题在评论处分享你的想法。
来源:https://segmentfault.com/a/1190000017010723
ES6 Fetch API HTTP请求实用指南的更多相关文章
- Fetch API与POST请求那些事
简述 相信不少前端开发童鞋与后端联调接口时,都会碰到前端明明已经传了参数,后端童鞋却说没有收到,尤其是post请求,遇到的非常多.本文以node.js作为服务端语言,借用express框架,简要分析客 ...
- 解决React Native使用Fetch API请求网络报Network request failed
问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...
- 取消Fetch API请求
如今,Fetch API已经成为现在浏览器异步网络请求的标准方法,但Fetch也是有弊端的,比如: Fetch还没有方法终止一个请求,而且Fetch无法检测上传进度 现在我们可以通过 AbortCon ...
- Cross-origin resource sharing JSON with Padding 同源策略 JSONP 为什么form表单提交没有跨域问题,但ajax提交有跨域问题? XMLHttpRequest and the Fetch API follow the same-origin policy 预检请求(preflight request)
https://zh.wikipedia.org/wiki/跨来源资源共享 跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略[1 ...
- (转)这个API很“迷人”——新的Fetch API
原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以 ...
- Ajax新玩法fetch API
目前 Web 异步应用都是基于 XMLHttpRequest/ActiveXObject (IE)实现的, 这些对象不是专门为资源获取而设计的,因而它们的 API 非常复杂,同时还需要开发者处理兼容性 ...
- Postman - 功能强大的 API 接口请求调试和管理工具
Postman 是一款功能强大的的 Chrome 应用,可以便捷的调试接口.前端开发人员在开发或者调试 Web 程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的 Fi ...
- Chrome 控制台实用指南【转】
转自伯乐在线. Chrome 控制台实用指南 前言 Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新特性也比其它浏览器多,还有一部分我想就是因为它的控制台 ...
- 【原】fetch跨域请求附带cookie(credentials)
HTTP访问控制 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 解决跨域的方式有很多种,本文介绍" ...
随机推荐
- 区间最小值(2) (线段树 更新区间)2015年 JXNU_ACS 算法组暑假第一次周赛
区间最小值(2) Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Subm ...
- iOS for循环创建button,button的宽度依据上面的文字来自适应.
近期须要使用一个标签页,寻思自己写一个demo. 标签的大小依据上面的文字来自适应大小,须要依据后台返回的数据自己主动换行.没有加入 NSArray *arr = @[@"无知", ...
- 社区之星礼品开箱——感谢CSDN
前言 尽管已经看过国内外无数的开箱.评測视频,也看过无数国内社区的各种玩具.电子产品.摄影的分享贴.自己却从未写过--摄影水平有限以及懒-- 昨天看到上图的文章,看到最后都说了应该晒晒照片.写写博客, ...
- 导出excel(利用工具类导出excel)
/** * 添加导出功能 * @param creditPageResult * @param request * @param response */ @RequestMapping(value = ...
- js 保留两位小数 javascript
alert((0.9996*100).toFixed(2)); 得到99.96,这是我想要的! 使用Number.toFixed()可以格式数字显示任意的小数位!
- 微信小程序-关于日期选择器(input)
小程序并没有input带有日期组件(只有picker组件带日期),要不自创,要不就用picker把选中的值放入input当中 wxml js 因为会触发input,所以禁用它就可以了
- 微信小程序-获取用户信息(getUserInfo)
当小程序抹杀掉这个接口的时候,多少人心凉了.. 作为一个初级web前端开发,我是更加懵逼,小程序员跑路了... 当时以及现在用的办法就是: 1.增加一个登陆或授权页 2.上线以后自动获取 3.增加一个 ...
- docker创建私有仓库及存储image
Docker官方的Docker hub尽管提供了有非常多image,也基本上包括了我们须要使用的,可是其訪问起来比較慢.假设自己要定制image.多台server之间的共享使用此image非常不方便. ...
- swoole新手教程01-环境搭建及扩展安装
写在前面的废话 <swoole源代码分析>已经写了13章,整个swoole的核心架构基本都分析的差点儿相同了.于是心里一直以来想整理swoole的文档并写一份教程的想法就再度浮了出来. 实 ...
- Javascript模式(二) 发布者/订阅者模式
var publisher = { // 订阅者数组 subscribers : { "any" : [] }, // 增加订阅者 on : function(type, fn, ...