详解ES6 Fetch API HTTP请求实用指南


Posted in Javascript onNovember 14, 2018

本次将介绍如何使用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是声明性的,就算没有任何技术编码经验,你也可以很容易地理解发生了什么。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
vue中如何添加百度统计代码
Dec 19 Vue.js
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 #Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 #Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 #Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 #Javascript
ES6 fetch函数与后台交互实现
Nov 14 #Javascript
vue-cli3全面配置详解
Nov 14 #Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 #Javascript
You might like
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
python中sets模块的用法实例
2014/09/30 Python
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
详解Python如何生成词云的方法
2018/06/01 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
python基于property()函数定义属性
2020/01/22 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
python 录制系统声音的示例
2020/12/21 Python
2014超市收银员工作总结
2014/11/13 职场文书
个园导游词
2015/02/04 职场文书
员工家属慰问信
2015/03/24 职场文书
企业财务管理制度范本
2015/08/04 职场文书
《秋思》教学反思
2016/02/23 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫