简介
React Fetch Hook 是一个方便的 React 适配器。它允许使用 React Context 在应用程序任何地方进行异步调用。同时，它比其他类似的库更快、更灵活。
在这篇教程中，我们将介绍如何使用 React Fetch Hook 来进行异步数据获取，并展示它与 React 的集成过程。
安装和导入
React Fetch Hook 可以通过 npm 安装：
npm install react-fetch-hook
之后，你可以在你的项目中导入它：
import useFetch from 'react-fetch-hook';
基本使用
使用 React Fetch Hook 能够非常轻松地获取异步数据。只需要简单的传递一个 API 地址，并在 JSX 中显示数据。
下面是一个基本的使用教程：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------------
------ ------- -------- ----- -
----- - ---------- ---- - - -------------------------------------------------------
------ -
-----
---------- -- ----------------------
----- --
------------- -- -
---- --------------
---------------------
------------------
------
---
------
--
-这段代码会在元素渲染时自动触发数据的获取和显示。在 useFetch() 方法的参数中，你需要传递你想要获取数据的 API 地址。它将返回两个值，第一是 isLoading，代表数据正在加载。第二是 data，代表所请求的数据本身。
在组件中，我们使用了一些条件性渲染来保证数据加载完成后才进行渲染操作。
处理错误
任何一个良好的应用程序都必须能够正常处理错误。同样，React Fetch Hook 也为我们提供了异常处理的机制。
下面的代码展示了在获取数据时如何处理错误：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------------
------ ------- -------- ----- -
----- - ---------- ------ ---- - - -------------------------------------------------------------
------ -
-----
---------- -- ----------------------
------ -- ----------- ----------------------
----- --
------------- -- -
---- --------------
---------------------
------------------
------
---
------
--
-使用 error 变量来表示错误，如果在获取数据时错误发生，它将保存错误信息并在渲染时渲染相应错误信息。
传递数据
如果你的应用程序需要向 API 发送数据，你可以使用 fetch 配合 useFetch，将 POST / PUT 数据传递到服务器。
下面的代码演示了如何通过按钮点击来上传数据：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- -------------------
------ ------- -------- ----- -
----- ------- --------- - -------------
----- ------ -------- - -------------
----- - ---------- ------ ----- ------- - - ------------------------------------------------------ -
------- -------
-------- - --------------- ------------------ --
----- ----------------
------ ------
----- -----
---
---
----- ------------ - - -- -
-------------------
----------
--
------ -
-----
---------- -- ----------------------
------ -- ----------- ----------------------
----- -- -
-----
---------------------
------------------
------
--
----- ------------------------
------ ----------- ------------------- ------------- ----------- -- ------------------------- --
--------- ------------------ ------------ ----------- -- ------------------------ --
------- -----------------------------
-------
------
--
-在这个例子中，我们定义了一个状态来保存 title 和 body。我们通过 refetch 方法来触发重新获取数据，这样可以更新 API 中的数据。
在 useFetch() 方法的第二个参数对象中，我们传递了请求类型、请求头和请求体，它们是可选的。
总结
在本教程中，我们介绍了 React Fetch Hook 的基础知识。我们学习了如何使用它的基本流程，以及如何处理异常和传递数据。
React Fetch Hook 能够让异步数据获取变得更加简单，快速，方便。它可以与 React 很好地集成，让开发者能够更加注重业务代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f337765dbf7be33b2566de8