详解ES6 Fetch API HTTP请求实用指南

Fetch API 概述与异步处理基础

本文将介绍如何使用Fetch API（ES6及更高版本）对REST API发起HTTP请求，并提供相关示例以辅助理解。

注意：所有示例均基于支持箭头函数的ES6环境编写。

当前Web和移动应用开发中，一种常见模式是从服务器请求或展示数据（如用户信息、帖子、评论、订阅、支付记录等），随后执行CRUD（创建、读取、更新或删除）操作。

为了进一步处理这些数据资源，我们通常使用推荐的JavaScript方法，例如.map()、.filter()和.reduce()。

以下是本文旨在解决的核心问题：

• 处理JavaScript中的异步HTTP请求
• 什么是AJAX？
• 为什么要使用Fetch API？
• Fetch API快速入门
• Fetch API - CRUD操作示例

1. 处理JavaScript中的异步HTTP请求

JavaScript（JS）最具挑战性的部分之一是理解如何处理异步请求，这需要深入理解Promise和回调机制的工作原理。 在大多数编程语言中，我们习惯认为操作是按顺序发生的：必须先执行第一行代码，才能继续执行下一行。这符合我们的日常逻辑和工作习惯，当然，你也可以选择一边听音乐一边写代码（O(∩_∩)O哈哈~）；

然而在使用JS时，我们有多个操作在后台或前台并行运行，且我们不能在等待用户事件时冻结整个Web应用程序。

将JavaScript描述为“异步”可能会产生一些误导。更准确地说，JavaScript是单线程同步执行的，并拥有各种回调机制。

但是有些操作必须按特定顺序发生，否则会导致流程混乱和产生意外结果。因此，我们可以使用Promise和回调来构建这种顺序。例如：在执行某个操作之前，需要先验证用户凭据。

AJAX 与单页应用（SPA）的权衡

2. 什么是AJAX

AJAX代表异步JavaScript和XML（Asynchronous JavaScript and XML），它允许应用程序在与Web服务器交换数据时异步更新网页。简而言之，这意味着您可以在不重新加载整个页面（URL保持不变）的情况下更新网页的特定部分。

AJAX这个名称具有误导性。虽然AJAX应用程序可能使用XML来传输数据，但将数据作为纯文本或JSON格式传输同样非常常见。 - w3shools.com

AJAX的发展历程？

许多开发人员对单页应用程序（SPA）中拥有所有功能感到兴奋，但这也会导致大量的异步处理痛点！幸运的是，我们有Angular、VueJS和React等库，使得编写SPA应用变得更加简单和易用。

总的来说，如何平衡重新加载整个页面与仅加载部分页面显得尤为重要。

在大多数情况下，随着浏览器功能的日益完善，页面重新加载已经表现良好。在过去，页面重新加载可能需要几秒钟（取决于服务器位置和浏览器功能）。但如今的浏览器速度极快，因此选择执行AJAX还是页面重新加载的区别已不再显著。 个人经验表明，在大多数情况下，用户并不关心这是SPA还是额外的页面重新加载。当然，不要误解我的意思，我个人确实喜欢SPA，但我们需要权衡利弊。如果我们面临有限的预算和资源短缺，那么快速的解决方案可能是更好的选择。

最后，这实际上取决于具体用例，但我个人认为，与简单的页面重新加载相比，SPA需要更多的开发时间，并需要处理一些棘手的问题（如页面首次加载）。

为什么选择 Fetch API

3. 为什么要使用Fetch API？

这允许我们对服务器执行声明式的HTTP请求。对于每个请求，它创建一个Promise，必须解决该请求才能定义内容类型并访问数据。

Fetch API的好处在于它完全受JS生态系统的支持，并且也是MDN Mozilla文档的一部分。最后但并非最不重要的是，它在大多数浏览器（IE除外）上开箱即用。从长远来看，我推测它将成为调用Web API的标准方式。 注意！我很清楚其他HTTP方法，例如使用带有RXJS的Observable，以及它如何关注订阅/取消订阅等方面的内存管理/泄漏问题。也许这将成为执行HTTP请求的新标准方式，谁知道呢？

无论如何，在本文中我只关注Fetch API，但可能在将来写一篇关于Observable和RXJS的文章。

Fetch API 核心概念解析

4. Fetch API快速入门

fetch()方法返回一个Promise，该Promise解析来自Request的Response，显示状态（成功与否）。如果您在控制台日志屏幕中收到此消息，请不要惊慌 - 它基本上意味着Promise正在工作，但等待解决。因此，为了解决它，我们需要使用.then()处理程序（回调）来访问内容。

简而言之，我们首先定义路径（Fetch），其次是从服务器请求数据（Request），第三个定义内容类型（Body），最后但并非最不重要的是，我们访问数据（Response）。

如果你很难理解这个概念，不要慌。您将通过下面显示的示例获得更好的概述。

我们将用于示例的路径

https://jsonplaceholder.typicode.com/users //返回JSON

Fetch API CRUD 操作实战示例

5. Fetch API - HTTP示例

如果我们想要访问数据，我们需要两个.then()处理程序（回调）。但是如果我们想要操纵资源，我们只需要一个.then()处理程序。不过，我们可以使用第二个来确保值已发送。

基本Fetch API模板

//基于fetch的基本模块
fetch
.then(response.something) //定义返回的类型和数据格式
.then(data) // 返回的数据

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

• Fetch 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是声明性的，就算没有任何技术编码经验，你也可以很容易地理解发生了什么。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。