脚本宝典收集整理的这篇文章主要介绍了关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

在本指南中，我将向您展示如何使用Fetch API（ES6 +）执行对REST API的HTTP请求，并提供您最有可能遇到的一些实际示例。

想快速查看HTTP示例？转到第5节。第一部分描述了处理HTTP请求时JavaScript的异步部分。

注意：所有示例均在带有箭头功能的 ES6中给出。

当今的Web /移动应用程序中的一种常见模式是从服务器请求或显示某种数据（例如用户，帖子，评论，订阅，付款等），然后使用CRUD（创建，阅读，更新或删除）操作。

为了进一步操作资源，我们经常使用这些JS方法（推荐），例如  .map()，  .filter()和  .reduce()。

如果您想成为更好的Web开发人员，开始自己的事业，教别人或提高您的开发技能，我将每周发布关于最新Web开发语言的技巧和窍门。

这是我们要解决的问题

1. 处理JS的异步HTTP请求
2. 什么是AJAX？
3. 为什么要获取API？
4. 快速介绍Fetch API
5. 获取API - CRUD示例←好东西！

1.处理JS的异步HTTP请求

理解JavaScript（JS）如何工作的最具挑战性的部分之一是理解如何处理异步请求，这需要并理解promises和回调如何工作。

在大多数编程语言中，我们都认为操作按顺序（顺序）发生。必须先执行第一行才能继续下一行。这是有道理的，因为这是我们人类操作和完成日常任务的方式。

但是使用JS，我们有多个在后台/前台运行的操作，并且我们不能在每次等待用户事件时都冻结一个Web应用程序。

将JavaScript描述为异步可能会产生误导。更准确地说，JavaScript是同步的，并且具有各种回调机制的单线程。阅读更多。

然而，有时事情必须按顺序发生，否则会导致混乱和意外结果。出于这个原因，我们可以使用PRomises和callback来构建它。一个示例可能是在继续下一个操作之前验证用户凭据。

2.什么是AJAX

AJAX代表异步JavaScript和XML，它允许在应用程序运行时通过与Web服务器交换数据来异步更新网页。简而言之，它实质上意味着您可以更新网页的各个部分而无需重新加载整个页面（URL保持不变）。

AJAX是一个误导性的名称。AJAX应用程序可能使用XML来传输数据，但将数据作为纯文本或JSON文本传输同样很常见。 - w3shools.COM

AJAX一路走来？

我已经看到许多开发人员对在单页应用程序（SPA）中拥有所有内容感到非常兴奋，这会导致很多异步痛苦！但幸运的是，我们有像Angular，VueJS和React这样的库，这使得这个过程变得更加容易和实用。

总的来说，在重新加载整个页面或部分页面之间取得平衡非常重要。

在大多数情况下，页面重新加载在浏览器的强大功能方面运行良好。回到过去，页面重新加载需要几秒钟（取决于服务器的位置和浏览器功能）。但是今天的浏览器非常快，所以决定是否执行AJAX或页面重新加载并不是一个很大的区别。

我个人的经验是，使用简单的搜索按钮创建搜索引擎要比使用没有按钮的搜索按钮更简单，更快捷。在大多数情况下，客户不关心它是SPA还是额外的页面重新加载。当然，不要误会我的意思，我确实喜欢SPA，但我们需要考虑一些权衡，如果我们处理有限的预算和缺乏资源，那么快速解决方案可能是更好的方法。

最后，它实际上取决于用例，但我个人认为SPA需要更多的开发时间和一些头痛，而不是简单的页面重新加载。

3.为什么要获取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模板：

        //Template
featch(url)
.then(response.something)
.then(data)

注意！以上示例仅用于说明目的。如果执行它，代码将不起作用。

获取API示例

1. 显示用户
2. 显示用户列表
3. 创建新用户
4. 删除用户
5. 更新用户

注意！资源不会真正在服务器上创建，但会返回虚假结果来模仿真实服务器。

1.显示用户

如前所述，显示单个用户的过程包括两个  .then()处理程序（回调），第一个用于定义对象，第二个用于访问数据。

请注意，只需阅读查询字符串，/users/2我们就能理解/预测API的作用。有关如何编写高质量REST API的更多信息，请查看Mahesh Haldar撰写的这些准则提示。

例显示用户

fetch('https://jsonplaceholder.typicode.com/users/2')
.then(response => response.json())
.then(data=>console.LOG(data))

2.显示用户列表

该示例几乎与前一个示例相同，只是查询字符串是/users，而不是/users/2。

例

fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data=>console.log(data))

3.创建新用户

这个看起来与前面的例子有点不同。如果你不熟悉HTTP协议，它只是为我们提供了一对夫妇的甜蜜方法，如POST，GET，DELETE，UPDATE，PATCH和PUT。这些方法是简单描述要执行的操作类型的动词，主要用于操作服务器上的资源/数据。

无论如何，为了使用Fetch API创建新用户，我们需要使用HTTP谓词POST。但首先，我们需要在某处定义它。幸运的是，Init我们可以传递一个可选参数，用于定义自定义设置的URL，例如方法类型，正文，凭据，标题等。

注意：fetch()方法的参数与Request()构造函数的参数相同。

例

         fetch('https://jsonplaceholder.typicode.com/users',{
         method:"POST",
body:JSON.stingify({
   username:'jscode com',
email:"js-code@jscode.com',
userId:1
}),
headers:{"Content-tyPE":"application/json;charset=utf-8"}
})

4.删除用户

为了删除用户，我们首先需要定位用户/users/1，然后我们定义方法类型DELETE。

例

fetch('https://jsonplaceholder.typicode.com/users',{
         method:"DELETE",
})

HTTP谓词PUT用于操作目标资源，如果要进行部分更改，则需要使用PATCH。有关这些HTTP谓词的更多信息，请查看此信息。

fetch('https://jsonplaceholder.typicode.com/users/3',{          
method:"POST", 
body:JSON.stingify({    
username:'jscode com', 
email:"js-code@jscode.com', 
userId:1 }), 
headers:{"Content-Type":"application/json;charset=utf-8"} 
})

结论

现在，您已基本了解如何使用JavaScript的Fetch API从服务器检索或操作资源，以及如何处理promise。您可以使用本文作为如何构建CRUD操作的API请求的指南。

就个人而言，我觉得Fetch API是声明性的，你可以很容易地理解发生了什么，没有任何技术编码经验。

希望这篇文章很有帮助！如果你喜欢它，请给我一些鼓掌，让更多的人看到它。谢谢！

脚本宝典总结

以上是脚本宝典为你收集整理的关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码全部内容，希望文章能够帮你解决关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。