在基于 React 开发前端应用时，网络请求是经常需要用到的功能。而一个好的网络请求库可以帮助我们更高效地完成请求。@shopify/react-network 是一个基于 React 的网络请求库，提供了可组合、可定制、可测试的 API 接口，使得开发者可以快速、灵活地完成网络请求。
接下来，我们将介绍如何使用 @shopify/react-network 进行网络请求，并提供相关示例代码和学习指导。
安装
首先，我们需要通过 npm 安装 @shopify/react-network：
npm install @shopify/react-network
使用
创建请求
使用 @shopify/react-network，我们可以通过 createRequest 方法来创建一个请求。该方法接受一个对象作为参数，可以指定请求的 URL、HTTP 方法、请求头、请求体等：
-- -------------------- ---- -------
------ --------------- ---- -------------------------
----- ------- - ---------------
---- -------------
------- ------
-------- -
---------------- ------- ------
--
----- -
------- -------
-
---在这个例子中，我们创建了一个 GET 方法的请求，请求 URL 为 /api/users，请求头中包含了 Authorization 值为 Bearer token 的信息，请求体中包含了 type 值为 admin 的信息。
除此之外，我们还可以设置请求参数，如下所示：
-- -------------------- ---- -------
------ --------------- ---- -------------------------
----- ------- - ---------------
---- -------------
------- ------
------ -
------- -------
-------- -----
-
---在这个例子中，我们创建了一个 GET 方法的请求，请求 URL 为 /api/users，请求参数中包含了 sort 值为 name 的信息和 order 值为 asc 的信息。
定义请求函数
在上一步中，我们创建了一个请求对象，接下来，我们需要将其发送到服务器上。使用 @shopify/react-network，我们可以通过 createRequestFunction 方法来定义请求函数。该方法接受一个请求对象作为参数，并返回一个函数，该函数可以发送请求并返回 Promise 对象。
-- -------------------- ---- -------
------ --------------- ---------------------- ---- -------------------------
----- ------- - ---------------
---- -------------
------- ------
------ -
------- -------
-------- -----
-
---
----- ---------- - -------------------------------在这个例子中，我们通过 createRequestFunction 方法定义了一个名为 fetchUsers 的请求函数，它将发送我们在前面创建的请求对象，并返回一个 Promise 对象，该 Promise 对象将在请求完成时完成。
发送请求
现在，我们已经定义了一个请求函数，接下来，我们可以在 React 组件中使用这个请求函数来发送请求了。在组件中发送请求，我们需要使用 useRequest hook，它可以返回请求执行的状态、请求函数和响应结果。
-- -------------------- ---- -------
------ ------------ ---- -------------------------
-------- ------- -
----- --------- ------ ----- -------- - -----------------------
-- --------- -
------ ----------------------
-
-- ------- -
------ ----------- --------------
-
------ -
----
-------------- -- -
------ --- -------------------------------
---
-----
--
-在这个例子中，我们首先使用 useRequest hook 创建了一个请求状态，其中 loading 表示请求状态是否在加载，error 表示请求状态是否出错，data 表示请求状态的数据，request 表示请求函数。当 loading 为 true 时，我们显示 Loading...，当 error 为 true 时，我们将错误信息渲染到页面上。当请求成功完成后，我们将 data 渲染到 ul 列表上。
总结
在本文中，我们介绍了如何使用 @shopify/react-network 进行网络请求，并提供了相关示例代码和学习指导。使用 @shopify/react-network，开发者可以快速、灵活地完成网络请求，并可以根据自己的需求进行定制和测试，使得网络请求变得更加易于维护和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3cefeedbf7be33b25670dc