本次介绍如何使用FetchAPI（ES6+）对RESTAPI进行HTTP请求，并提供一些例子方便大家理解。注意：所有示例均在ES6中使用箭头函数给出。当前网络/移动应用程序中的一个常见模式是从服务器请求或显示某种数据（例如用户、帖子、评论、订阅、付款等），然后使用CRUD（创建-检索，更新-更新或删除-删除）操作。为了进一步操作资源，我们经常使用这些JS方法（推荐），例如.map()、.filter()和.reduce()。下面是我们要解决的问题：处理JS异步HTTP请求什么是AJAX？为什么要获取API？FetchAPI快速介绍FetchAPI-CRUD示例←好东西！1.处理JS的异步HTTP请求JavaScript(JS)工作原理中最具挑战性的部分之一是理解如何处理异步请求，这需要理解promises和回调的工作原理。在大多数编程语言中，我们认为操作是按顺序（sequentially）发生的。第一行必须在继续下一行之前执行。这个原因很明显，因为这就是我们运作或工作的方式。当然你也可以选择边听歌边写代码（O(∩_∩)O哈哈~）；但是使用JS，我们有多个/actions在前台运行，我们不能在每次等待用户事件时冻结Web应用程序。将JavaScript描述为异步可能会产生误导。更准确地说，JavaScript是同步的和单线程的，具有各种回调机制。但是有些事情是必须按顺序发生的，否则就会把过程搞乱，产生意想不到的结果。为此，我们可以使用promises和callbacks来构建它。例如：_在执行操作之前需要验证用户凭据。_2。什么是AJAXAJAX代表异步JavaScript和XML，它允许在应用程序运行时通过与Web服务器交换数据来异步更新网页。简而言之，它本质上意味着您可以更新网页的某些部分而无需重新加载整个页面（同时URL保持不变）。*AJAX是一个误导性的名称。AJAX应用程序可能使用XML来传输数据，但以纯文本或JSON文本形式传输数据同样常见。-w3shools.com*AJAX一路走来？许多开发人员非常高兴能够在一个单页应用程序(SPA)中拥有所有功能，但这也导致了很多异步的痛苦！但幸运的是，我们有像Angular、VueJS和React这样的库，因此在编写SPA应用程序时会越来越容易使用。一般来说，如何平衡重新加载整个页面或加载部分页面是非常重要的。在大多数情况下，页面重新加载已经可以很好地配合浏览器日益复杂的功能。过去，页面重新加载需要几秒钟（取决于服务器位置和浏览器功能）。但是今天的浏览器速度非常快，所以在决定是执行AJAX还是重新加载页面时并没有太大区别。个人经验是，大多数情况下客户端并不关心是SPA还是额外的页面reload。当然，不要误会我的意思，我确实喜欢SPA，但我们需要考虑一些权衡，如果我们的预算有限且缺乏资源，快速修复可能是更好的方法。最后，这真的取决于用例，但我个人认为SPA需要更多的开发时间和一些令人头疼的事情来处理（页面的第一次加载），而不是简单的页面重新加载。3.为什么要获取API？这允许我们向服务器执行声明性HTTP请求。对于每个请求，它都会创建一个Promise，该Promise必须解析请求才能定义内容类型和访问数据。现在，FetchAPI的好处在于它得到了JS生态系统的完全支持，并且也是MDNMozilla文档的一部分。最后但同样重要的是，它可以在大多数浏览器（IE除外）上开箱即用。从长远来看，我猜它会成为调用WebAPI的标准方式。注意！我很清楚其他HTTP方法，例如将Observable与RXJS一起使用，以及它如何处理订阅/取消订阅等方面的内存管理/泄漏。也许这将成为执行HTTP请求的新标准方式，谁知道呢？总之，在本文中我只关注FetchAPI，但将来可能会写一篇关于Observable和RXJS的文章。4.快速介绍FetchAPI。fetch()方法返回一个Promise来解析Request的Response以显示状态（成功与否）。如果您在控制台日志屏幕中收到此promise{}消息，请不要惊慌-这基本上意味着Promise有效，但正在等待解决。因此，要修复它，我们需要.then()处理程序（回调）来访问内容。所以简而言之，我们首先定义路径(Fetch)，其次我们从服务器请求数据(Request)，第三定义内容类型(Body)，最后但并非最不重要的是，我们访问数据(Response)。如果您很难理解这个概念，请不要惊慌。您将通过下面显示的示例获得更好的概述。我们将用于示例的路径https://jsonplaceholder.typicode.com/users//返回JSON5。FetchAPI-HTTP示例如果我们想要访问数据，我们需要两个.then()处理程序（回调）。但是如果我们想操作资源，我们只需要一个.then()处理程序。但是，我们可以使用第二个来确保发送值。基础抽取API模板//基于fetch的基础模块fetch.then(response.something)//定义返回类型和数据格式。then(data)//返回数据注意！以上示例仅供说明之用。如果执行它，代码将不起作用。获取API示例显示用户显示用户列表创建新用户删除用户更新用户注意！该资源实际上不会在服务器上创建，但会返回伪造的结果以模仿真实的服务器。1.显示用户如前所述，显示单个用户的过程涉及两个.then()处理程序（回调），第一个用于定义对象，第二个用于访问数据。请注意，仅通过读取查询url字符串/users/2我们就可以理解/预测API的作用。这也是restapi示例的重要意义之一fetch('https://jsonplaceholder.typicode.com/users/2').then(response=>response.json())//定义返回类型和数据格式。then(data=>console.log(data))//返回的数据//数据示例：//{//"id":2,//"name":"ErvinHowell",//"username":"Antonette",//"email":"Shanna@melissa.tv",//"address":{//"street":"VictorPlains",//"suite":"Suite879",//"城市":"Wisokyburgh",//"zipcode":"90566-7771",//"geo":{//"lat":"-43.9509",//"lng":"-34.4618"//}//},//"phone":"010-692-6593x09125",//"website":"anastasia.net",//"company":{//"name":"Deckow-Crist",//"catchPhrase":"Proactivedidacticcontingency",//"bs":"synergizescalablesupply-chains"//}//}2.显示用户列表这个例子几乎与前一个相同，除了查询字符串是/users而不是/users/2。示例fetch('https://jsonplaceholder.typicode.com/users').then(response=>response.json())//定义返回类型和数据格式.then(data=>console.log(data))//返回数据//示例数据：//[//{//"id":1,//"name":"LeanneGraham",//"username":"Bret",//"email"：“Sincere@april.biz”，//“地址”：{//“街道”：“KulasLight”，//“套房”：“Apt.556”，//“城市”：“Gwenborough”，//"zipcode":"92998-3874",//"geo":{//"lat":"-37.3159",//"lng":"81.1496"//}//},//"phone"：“1-770-736-8031x56442”，//“网站”：“hildegard.org”，//“公司”：{//“名称”：“Romaguera-Crona”，//“catchPhrase”：“多层客户端-服务器神经网络",//"bs":"利用实时电子市场"//}//}//更多...//]3.创建一个新用户，看到这个看起来和前面的例子有点不一样。如果你熟悉HTTP协议，它为我们提供了很多方法，如POST、GET、DELETE、UPDATE、PATCH和PUT。这些方法是简单描述要执行的操作类型的动词，主要用于操作服务器上的资源/数据。无论如何，为了使用FetchAPI创建新用户，我们需要使用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/users/1，然后我们定义方法类型DELETE。Examplefetch('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的FetchAPI从服务器检索或操作资源有了基本的了解，以及如何处理承诺。您可以将本文用作有关如何为CRUD操作构建API请求的指南。个人感觉FetchAPI是声明式的，无需任何技术编码经验也能轻松理解发生了什么。如果您有任何问题，请在评论中分享您的想法。
