详解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 GridView 实现自动计算操作代码
Mar 25 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
Javascript执行流程细节原理解析
May 14 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
PHP四大安全策略
2014/03/12 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
公司授权委托书
2014/04/04 职场文书
社团活动总结报告
2014/06/27 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android