基本概念
在现代 Web 开发中，处理 HTTP 请求是常见的需求。fetch() API 是一种强大且灵活的工具，用于发起网络请求。本章将详细介绍如何使用 fetch() 发送 POST 请求。
准备工作
首先，确保你的环境支持 ES6 及以上版本，因为 fetch() API 是基于 Promise 的，而 Promise 是 ES6 引入的一个新特性。如果你的项目使用的是旧版浏览器或 Node.js 环境，请考虑使用 polyfill 或者其他兼容性解决方案。
创建一个简单的 POST 请求
发送一个基本的 POST 请求非常简单。你需要做的就是调用 fetch() 方法，并指定请求的 URL 和请求选项。以下是一个简单的示例：
-- -------------------- ---- -------
----- --- - -------------------------------
---------- -
------- ------- -- ------- ----
-------- -
--------------- ------------------ -- ------------- ----
--
----- ----------------
----- ----- -----
---- --
-- -- - ---------- ----- ---- ---
--
-------------- -- ---------------- -- ------- ---- --
---------- -- ------------------ -- ------
------------ -- ----------------------- -------- -- ----在这个例子中，我们向 https://example.com/api/data 发送了一个 POST 请求。请求体包含了一个简单的 JSON 对象，该对象包含了用户的名字和年龄信息。
自定义请求头
在某些情况下，你可能需要自定义请求头，例如设置认证令牌、自定义 Content-Type 等。这可以通过在请求选项中添加 headers 属性来实现。下面的例子展示了如何添加一个自定义的请求头：
-- -------------------- ---- -------
----- --- - -------------------------------
----- ----- - ------------------ -- ----
---------- -
------- -------
-------- -
--------------- -------------------
---------------- ------- --------- -- --------
--
----- ----------------
----- ----- -----
---- --
--
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------- --------在这个例子中，我们添加了一个 Authorization 请求头，用于携带认证令牌。这样可以确保服务器能够验证客户端的身份。
处理不同的响应状态
当发送 POST 请求时，服务器可能会返回各种不同的响应状态码。为了确保程序能够正确地处理这些状态码，你可以检查响应对象的 status 属性。下面是一个示例：
-- -------------------- ---- -------
----- --- - -------------------------------
----- ----- - ------------------
---------- -
------- -------
-------- -
--------------- -------------------
---------------- ------- ---------
--
----- ----------------
----- ------ -------
---- --
--
--
-------------- -- -
-- ------------- - -- --------
------ ----------------
- ---- -
----- --- ----------- ------ ------- ---------------------
-
--
---------- -- ------------------
------------ -- ----------------------- --------在这个例子中，我们使用了 response.ok 来判断响应是否成功。如果响应不成功，则抛出一个错误并被捕获到 catch 块中进行处理。
使用 FormData 发送表单数据
除了 JSON 数据之外，你还可以使用 FormData 对象来发送表单数据。这对于上传文件或其他类型的二进制数据特别有用。下面是一个示例：
-- -------------------- ---- -------
----- --- - ---------------------------------
----- -------- - --- -----------
--------------------------- -----------
----------------------- -----------------------------------------------
---------- -
------- -------
----- --------
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------- --------在这个例子中，我们创建了一个 FormData 对象，并使用 append 方法添加了表单数据。然后，我们将这个 FormData 对象作为请求体发送出去。
结束语
通过本章的学习，你应该已经掌握了如何使用 fetch() API 发送 POST 请求，并能够根据实际需求对请求进行各种自定义配置。希望这些知识能帮助你在未来的 Web 开发工作中更加得心应手。