前言
在 React 中，我们通常需要向服务器发起一个 Ajax 请求来获取数据，然后使用这些数据来更新页面。Fetch API 提供了一个现代、简洁的方式，来进行网络请求。下面，我将向大家介绍如何在 React SPA 应用中使用 Fetch 进行 Ajax 请求，并将详细讨论 Fetch 的各种用法以及如何处理请求和响应。
引入 Fetch
Fetch API 是在 ES6 中引入的，因此，我们在项目中使用 Fetch 前，需要使用 polyfill 将其引入。在 React 中，我们可以使用 isomorphic-fetch 库，将 Fetch 引入项目：
// 引入 fetch 和 Promise polyfill require('isomorphic-fetch'); require('es6-promise').polyfill();
基本使用
在 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
