详解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 相关文章推荐
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
微信小程序购物车、父子组件传值及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
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
PHP安全上传图片的方法
2015/03/21 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
KMP算法精解及其Python版的代码示例
2016/06/01 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Django添加sitemap的方法示例
2018/08/06 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
python-地图可视化组件folium的操作
2020/12/14 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
留学自荐信
2013/10/10 职场文书
优秀学生自我鉴定范例
2013/12/18 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
yy婚礼主持词
2014/03/14 职场文书
2014高考励志标语
2014/06/05 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
市场总监岗位职责
2015/02/11 职场文书
新闻稿件写作技巧
2015/07/18 职场文书