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

时间:2018-11-14
本次将介绍如何使用Fetch API（ES6 +）对REST 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是声明性的，就算没有任何技术编码经验，你也可以很容易地理解发生了什么。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

随机文章
Javascript知识点必读
最近更新