详解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示例

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/d843f212c21cfae1f52d8d167c8007ad.html