前言
在 React 中，我们通常需要向服务器发起一个 Ajax 请求来获取数据，然后使用这些数据来更新页面。Fetch API 提供了一个现代、简洁的方式，来进行网络请求。下面，我将向大家介绍如何在 React SPA 应用中使用 Fetch 进行 Ajax 请求，并将详细讨论 Fetch 的各种用法以及如何处理请求和响应。
引入 Fetch
Fetch API 是在 ES6 中引入的，因此，我们在项目中使用 Fetch 前，需要使用 polyfill 将其引入。在 React 中，我们可以使用 isomorphic-fetch 库，将 Fetch 引入项目：
-- -- ----- - ------- -------- ---------------------------- ----------------------------------
基本使用
在 React 中，我们可以使用 Fetch 的基本用法来实现 Ajax 请求。基本用法如下：
---------- --------
-------------- -- -
-- ------------- -
------ ----------------
- ---- -
----- --- -------------- -------- --- --- ------
-
--
---------- -- -
------------------
--
------------ -- -
-------------------- --- - ------- ---- --- ----- ------------ -------
---基本上，Fetch 提供了一个很简洁的接口，但我们需要传递两个参数：
url：要请求的 URL；options：选项对象，用于配置请求；
options 对象可以包含以下选项：
method：HTTP 请求方法，默认为 GET；headers：HTTP 请求头；body：请求体，通常用于 POST/PUT 请求，包含发送到服务器的数据；mode：CORS 请求中是否需要带上凭证；cache：请求时是否应该缓存结果，以及如何定义缓存。
当我们完成请求并且获得响应后，我们还可以后续进行数据流的处理。
处理响应
Fetch 没有为我们提供典型情况下的响应处理。因此，我们需要判断状态码、处理响应头、序列化响应体、取消请求等。下面是一个稍微复杂些的例子：
-------- ------------ -------- -
-- ------
------- - ----------------- -
------- ------
-------- -
--------------- ------------------ --------------
--
------------ ---------
-- ---------
------ ---------- --------
-------------- -- -
-- ---------------- --- ---- -
------ -----
- ---- -- ---------------- -- --- -- --------------- - ---- -
----- ----------- - -------------------------------------
-- ------------ -- --------------------------------------- --- --- -
------ ----------------
- ---- -
------ ----------------
-
- ---- -- ---------------- --- ---- -
----- --- ----------------------
- ---- -- ---------------- --- ---- -
----- --- -------------------
- ---- -- ---------------- --- ---- -
----- --- ---------- --------
- ---- -
----- --- ------------------------- -------------------------
-
--
------------ -- -
---------------- ------ -----------
---
-在这个例子中，我们为请求添加了默认的请求头、CORS 凭证、状态码和响应体的处理。此外，我们还可以抛出自定义的错误。
配置请求
在 Fetch 中，我们可以通过设置 options 选项来配置请求。这里有几个常用的选项：
method：我们可以使用以下请求方法：GET、PUT、POST、DELETE 等；headers：为我们的请求设置标头；body：请求主体，我们可以设置请求数据；credentials：设置请求凭证，用于支持跨域 ajax 请求。
这样可以设置如下：
---------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
----- -----
---
------------ ---------
--
-------------- -- ----------------
---------- -- ------------------
---------- -- ------------------- ------结束请求
在某些情况下，我们需要中止 Fetch 操作，以防止获取更多数据或执行不必要的操作。Fetch API 中提供了 AbortController，用于取消请求。该控制器跟踪请求和响应，允许我们在任何时候取消请求。
-- ----- ----- ---------- - --- ------------------ ----- ------ - ------------------ -- ---- ---------------------- - ------ -- -------------- -- ---------------- ---------- -- ------------------ ---------- -- ------------------- ------ -- ---- -------------------
总结
Fetch API 是 React 中进行 Ajax 请求的一种现代、简洁的方式。在本文中，我们介绍了 Fetch 的基本使用、处理响应以及如何配置请求。我们还了解了如何使用 AbortController 中断请求。通过这些基础知识，我们可以在 React SPA 应用中使用 Fetch 进行 Ajax 请求，并确保代码质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65aa79b4add4f0e0ff4129c0