本次将介绍如何使用 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 是声明性的, 就算没有任何技术编码经验, 你也可以很容易地理解发生了什么.
如果有啥问题在评论处分享你的想法.
来源: https://juejin.im/post/5beb8eefe51d450f9461c481