React 是前端开发中非常流行的框架，也因此有诸多相关的库和扩展工具。在使用 React 构建单页面应用（SPA）时，我们通常需要从后端获取数据，用于在页面上渲染需要展示的内容。而 fetch API 是一种用于获取数据的现代标准，它是一种基于 Promise 的网络请求 API，具有简洁易用的特点。本文将介绍如何在 React SPA 应用中使用 fetch API 进行数据请求。
fetch API 简介
fetch API 是浏览器内置的一种获取资源（通常是数据）的方式。它支持跨域请求，使用 Promise 对象处理异步操作，且更加简洁易用，较而 XMLHttpRequest 和 jQuery.ajax 而言更具优势，并且可以方便地基于现代浏览器（如 Chrome、Firefox、Edge 等）使用。
fetch('https://example.com/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));fetch API 第一个参数为请求的 URL，该方法返回一个 Promise 对象，可以通过 then() 方法链式调用，第一个 then() 方法获取服务器的响应数据并通过 response.json() 转换为 JavaScript 对象，第二个 then() 方法处理转换后的数据，catch() 方法则处理错误情况。fetch API 的语法非常简单易懂，但是需要注意的是，其它的 HTTP 状态码也会返回 resolve 状态，而不仅仅是 200-299 范围内的状态码，因此需要在 then() 方法中添加错误的处理逻辑。
React 组件中使用 fetch API
在 React 中，组件是可重用的 UI 单元，可以用于构建完整的应用程序。通过使用 props 传递数据和 handler，可以将组件连接到你的应用程序中的其他组件。react-fetch-api 库提供了一个用于在 React 组件中使用 fetch API 的组件。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------------
----- ----------- ------- --------- -
-------- -
------ -
--------- -----------------------------------
--- ---------- ------ ---- -- -- -
-- ------- -
------ ---------------------------
-
-- ----------- -
------ ----------------------
-
------ -
----
-------------- -- -
--- ------------------------------
---
-----
--
--
-----------
--
-
-FetchApi 组件是一个包装 fetch API 请求的高阶组件（HOC），它接受一个 URL 属性作为参数，并将请求的结果作为子组件渲染。子组件需要根据 isLoading、error 和 data 属性输出相应的内容。
React Hooks 中使用 fetch API
React Hooks 是 React 16.8.0 版本新增的功能， 支持在不编写 class 的情况下使用 state 等 React 特性。可以基于真实的 React SPA 应用代码，使用 Hooks 编写一个 fetcher 钩子来处理数据获取逻辑。
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
------ ------- -------- --------------- -
----- ------ -------- - ---------------
----- ------- --------- - ---------------
----- ----------- ------------- - ---------------
------------ -- -
----- --------- - ----- -- -- -
--- -
----- -------- - ----- -----------
----- ------ - ----- ----------------
----------------
--------------------
- ----- ----- -
--------------
--------------------
-
--
------------
-- -------
------ - ---------- ------ ---- --
-使用自定义的 fetcher 钩子，可以在 React 组件中非常方便地对数据进行处理：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- ---------------
-------- ------------- -
----- - ----- ---------- ----- - - ------------------------------------------------
-- ------- -
------ ---------------------------
-
-- ----------- -
------ ----------------------
-
------ -
----
-------------- -- -
--- ------------------------------
---
-----
--
-总结
在 React SPA 应用中，fetch API 是一种非常方便的数据获取 API，可以帮助我们快速获取数据。在本文中，我们介绍了在 React 组件中使用 fetch API 的两种方式：使用 react-fetch-api 组件和 React Hooks 中实现自定义 fetcher 钩子。你可以根据自己的实际应用场景来选择不同的方式，感受其中的便利。同时，也需要注意各种异常情况的处理，保持代码的健壮性和可靠性。
以上内容就是本篇文章的全部内容，希望可以帮助到正在学习 React 的同学们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e017a6f6b2d6eab3b332cf