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

如果我们想要访问数据，我们需要两个.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": "[email protected]",
//     "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": "[email protected]",
//       "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: ‘[email protected]‘,
        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: ‘[email protected]‘,
        userId: 1
    }),
      headers: { ‘Content-Type‘: ‘application/json;charset=utf-8‘}
})

结论

现在，你已基本了解如何使用JavaScript的Fetch API从服务器检索或操作资源，以及如何处理promise。您可以使用本文作为如何构建CRUD操作的API请求的指南。
就个人而言，我觉得Fetch API是声明性的，就算没有任何技术编码经验，你也可以很容易地理解发生了什么。

如果有啥问题在评论处分享你的想法。

来源：https://segmentfault.com/a/1190000017010723

原文地址：https://www.cnblogs.com/thatme/p/10159190.html

时间： 2024-10-06 10:20:16

ES6 Fetch API HTTP请求实用指南的相关文章

(转)这个API很“迷人”——新的Fetch API

原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以表示迷人的意思——译者注 JavaScript 通过XMLHttpRequest(XHR)来执行异步请求,这个方式已经存在了很长一段时间.虽说它很有用,但它不是最佳API.它在设计上不符合职责分离原则,将输入.输出和用事件来跟踪的状态混杂在一个对象里.而且,基于事件的模型与最近JavaScript流

Ajax新玩法fetch API

目前 Web 异步应用都是基于 XMLHttpRequest/ActiveXObject (IE)实现的, 这些对象不是专门为资源获取而设计的,因而它们的 API 非常复杂,同时还需要开发者处理兼容性问题. 虽然开发者普遍使用 $.ajax() 这样的上层包装,但 Fetch API 意在提供更加方便和一致的原生 API, 同时统一 Web 平台上的资源获取行为,包括外链脚本.样式.图片.AJAX 等.同时Fetch API使用Promise,因此是一种简洁明了的API,比XMLHttpRequ

React开发中使用fetch进行异步请求

React开发中使用fetch进行异步请求 最新的Web API接口中提供了一个全局fetch方法,从而以一种更为简单.合理的方式来支持跨网络异步获取资源. 这种功能以前是使用 XMLHttpRequest实现的.Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如 Service Workers.Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展. 请注意,fetch规范与jQuery.ajax()主要有两种方式的不同: 当接收到一个代表错误

【原】fetch跨域请求附带cookie（credentials）

HTTP访问控制 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 解决跨域的方式有很多种,本文介绍"跨域请求附带发送cookie" 一.测试环境 前提:后台使用apache+php实现.apache设置多个虚拟主机,设置方式参考:http://www.cnblogs.com/sivkun/p/7347978.html 在http://a.sivkun.com域中/cors-cookie/目录下有

React Native探索（五）使用fetch进行网络请求

前言 React Native可以使用多种方式来进行网络请求,比如fetch.XMLHttpRequest以及基于它们封装的框架,fetch可以说是替代XMLHttpRequest的产物,这一节我们就来学习fetch的基本用法. 1.get请求 fetch API是基于 Promise 设计的,因此了解Promise也是有必要的,推荐阅读MDN Promise教程 . get请求访问淘宝IP库 我们先从最基础的get请求开始,get请求的地址为淘宝IP地址库,里面有访问接口的说明.请求代码如下所

交互设计实用指南系列(12)—避免出错

http://ued.taobao.org/blog/2010/04/交互设计实用指南系列12-避免出错/ 一.如何理解本条内容: 一个“简单”和“复杂”的例子 在我和开发人员沟通一个项目需求的时候,他们频频慨叹Mockup的设计所考虑情况之细致,很多程序要实现的预判和“非基础功能点”让开发人员望而却步不情愿去实现.相比较设计师为了让用户避免出错而绞尽脑汁去设想和考虑,开发人员更倾向于直接给到一个只能容许的操作行为,其他非法请求全部报错:“程序是严谨的,他错,我报错,以不变应万变.简单一点不好吗

Docker实用指南：将Python Web应用容器化

Docker实用指南:将Python Web应用容器化 提供 Zstack社区 前言 Web应用随时可能被攻击者利用来夺取整个主机的权限,这是很常见也是很恐怖的一件事.为了更高的安全性,就需要将不同应用之间进行隔离(尤其是在这些应用属于不同的用户的情况下),然而这种隔离的实现一直是个挑战.到目前为止,隔离性的实现方法已经有了很多,然而它们要么太过昂贵(时间的层面以及资源的层面),要么太过复杂(无论对开发者还是对管理员). 本文将讨论如何让"容器化"的Python Web应用跑在安全的沙

黑客秘笈 渗透测试实用指南——互动出版网

这篇是计算机类的优质预售推荐>>>><黑客秘笈 渗透测试实用指南> 市面上最佳的渗透测试图书 美亚排名位居第一 通过模拟渗透测试的流程全讲解期间用到的各种工具和技术 编辑推荐 市场上口碑最佳的渗透测试图书,在美亚的测试图书领域排名第一,且好评如潮 全书以橄榄球的行话阐述渗透测试的战术,其内容如下所示. 赛前准备-安装:关于如何配置本书所用到的攻击机器.工具. 发球前-扫描网络:在出招之前,需要进行扫描,了解即将面对的环境.本章将深入探讨寻找目标信息.智能扫描的相关内容.

基于Promise规范的fetch API的使用

基于Promise规范的fetch API的使用 fetch的使用 作用:fetch 这个API,是专门用来发起Ajax请求的: fetch 是由原生 JS 提供的 API ,专门用来取代 XHR 这个对象的: fetch('请求的url地址').then(response => res.json()).then(data= > console.log(data)) // 注意: 第一个.then 中获取到的不是最终的数据,而是一个中间的数据流对象: // 注意: 第一个 .then 中获取到