详解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来构建它。举例：在某个操做以前须要验证用户凭据才能进行这个操做。

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

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"
//   }
// }

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

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"
//    }
//   }
// 更多...
// ]

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

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是声明性的，就算没有任何技术编码经验，你也能够很容易地理解发生了什么