前言
在前端开发中，经常需要与服务器进行交互，获取数据或更新信息。而发送网络请求是实现这种交互的关键步骤之一。在 ECMAScript 2021 中，fetch API为我们提供了一种非常简单而强大的方式来发送 HTTP 请求。
本文将详细介绍如何使用 ECMAScript 2021 中的 fetch API 发送网络请求，并提供了一些示例代码以供学习和实践。
fetch API 概述
fetch API 是基于 Promise 的现代 HTTP API。它提供了一种简单、可组装、可拓展，易于使用的方式来发送请求。它的一个重要特点是返回 Promise 对象，这使得我们能够快速高效地处理响应结果。
该 API 遵循 Promise A+ 规范，使得它可以方便地与其他 Promise 相关的 API 配合使用，从而使我们的代码更加清晰。
发送请求
基本用法
使用 fetch API 发送请求非常简单，只需要传递一个 URL 并且调用 fetch 方法即可。fetch API 返回一个 Promise 对象，在 Promise 对象被解析时，我们可以访问响应的属性，例如 status、headers 或者 body。
下面是基本的用法：
fetch('https://api.example.com/users')
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.error(error))在这个例子中，我们向 https://api.example.com/users 发送了一个 GET 请求。在 Promise 解析时，响应的 JSON 数据被解析并且打印到控制台中。如果请求失败，我们将捕获错误并输出到控制台中。
发送 POST 请求
使用 fetch API 发送 POST 请求非常简单。只需要传递一个 URL，以及指定请求方法和一些请求选项对象即可。
-- -------------------- ---- -------
-------------------------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
----- ----- -----
------ ------------------
--
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ---------------------在这个例子中，我们向 https://api.example.com/users 发送了一个 POST 请求，并在请求头中设置了 Content-Type 为 application/json。请求体中包含了一个 JSON 对象。
我们可以使用 JSON.stringify 将 JavaScript 对象转换为 JSON 格式的字符串。
设置请求头
我们可以在 fetch 方法的第二个参数中设置请求头。请求头是一个包含键值对的对象。下面是一个示例：
-- -------------------- ---- -------
----- ------- - --- ---------
--------------- -------------------
---------------- ------- ---------
--
-------------------------------------- -
------- -------
-------- --------
----- ----------------
----- ----- -----
------ ------------------
--
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ---------------------在这个例子中，我们创建了一个包含请求头信息的 Headers 对象，并将其传递给请求选项对象中的 headers 属性。
设置超时时间
我们可以使用 AbortController 接口来设置超时时间，并在超时发生时取消请求。
-- -------------------- ---- -------
----- ---------- - --- -----------------
----- ------ - -----------------
------------- -- ------------------- -----
-------------------------------------- -
------- -------
------- -------
-------- -
--------------- ------------------
--
----- ----------------
----- ----- -----
------ ------------------
--
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ---------------------在这个例子中，我们创建了一个 AbortController 对象，并设置 5000 毫秒的超时时间。如果请求在这个时间内没有完成，我们将取消该请求。
使用 signal 属性指定此请求的控制器对象。当我们调用 controller.abort() 时，将发出一个信号，指示请求应该被取消。
结论
使用 ECMAScript 2021 中的 fetch API 发送网络请求非常简单。在本文中，我们学习了如何使用 fetch 发送 GET、POST 请求、设置请求头和超时时间。我们还学习了如何在 Promise 解析时处理响应结果以及如何捕获错误。
在现代前端开发中，fetch API 成为了常用的 API，因为它提供了非常方便的方式来发送 HTTP 请求。这种方式不仅易于使用，而且可以快速地处理响应结果，并与其他 Promise 相关的 API 配合使用。
最后提醒一下，在使用 fetch 发送请求时，需要特别注意处理错误，并遵循一些最佳实践来优化请求和响应过程，例如使用缓存和 GZIP 压缩等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6773edea6d66e0f9aae8f725