前言
在前端项目中，经常需要从服务器获取数据。常规的做法是使用 Ajax 或库如 Axios、jQuery 等发送 HTTP 请求，然后通过回调或 Promise 处理响应。但这种方式的缺点很明显：代码难以维护，易出错，而且不容易与 React 的生命周期和状态管理结合使用。
@mikelspohn/react-fetch 是一个便捷的 React 组件，它提供了一个简单的界面来发送 HTTP 请求和对响应进行处理。它遵循了 React 的原则，将请求和响应处理作为组件的状态，使你可以轻松地在组件中使用它，而不必在 JavaScript 中编写大量的 Ajax 代码。
安装
你可以通过 npm 安装 @mikelspohn/react-fetch：
npm install @mikelspohn/react-fetch
同时，你需要在自己的项目中引入 React 和 React-DOM。
用法
使用 @mikelspohn/react-fetch 是很简单的，只需要将它作为组件使用即可：
-- -------------------- ---- -------
------ - ----- - ---- --------------------------
-------- ------------------ -
------ -
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- -
------ ----------------------
-
-- ------- -
------ ----------- --------------
-
-- ------- -
------ -----
-
------ ----------------------------------
--
--------
--
-这个例子向 /api/mydata 发送了 GET 请求，并在请求完成后对响应进行了处理。Fetch 组件通过子组件渲染的方式返回了响应的状态。渲染函数接收一个包含响应数据、加载状态和错误信息的对象，可以根据这些状态来呈现组件中的 UI。
在这个例子中，当请求还没完成时，会返回一个文字“Loading...”，当请求出错时，会返回一个文字“Error: ${错误信息}”，当请求完成时，会返回一个呈现了请求的 JSON 数据的 div。
发送请求类型
使用 Fetch 组件时，可以指定请求类型，例如 GET、POST、PUT、DELETE 等。可以通过设置 method 属性来指定请求类型。
<Fetch url="/api/mydata" method="POST">
{/* ... */}
</Fetch>此外，你还可以设置 headers、credentials、body 等选项，从而更精确地控制你的请求。有关这些选项的更多信息，请参阅 MDN Web Docs。
-- -------------------- ---- ------- ------ ----------------- ------------- ---------- -------------- ------- -------- -- ------------------------- ---------------------- ------- --------- ------- -------- --- - --- --- --- --------
在 URL 中包含查询参数
你可以将查询参数添加到 URL 中，以更精确地控制请求的行为。可以通过设置 params 属性来指定查询参数。
<Fetch url="/api/mydata" params={{ q: 'searchquery' }}>
{/* ... */}
</Fetch>此外，还可以使用模板字符串来将查询参数添加到 URL 中。
<Fetch url={`/api/mydata?q=${searchquery}`}>
{/* ... */}
</Fetch>处理响应
在 @mikelspohn/react-fetch 中，可以使用 then、catch 和 finally 链式调用请求。Fetch 组件会在组件状态中存储响应和处理它的 Promise，因此你可以使用 Promise 链式调用形式来连接多个处理函数。
-- -------------------- ---- -------
------ ------------------
--- ---- -- -- -
-----
---------------- -- -
---- --------------
-----------
-------
----------- -- -
------------------------------- - ------- -------- --
-------- -- -
--------------- ----- -------------------------- -- ---- --- -------- ---
---
--
-
------
---------
------
---
------
--
--------在这个例子中，响应被存储在组件状态中，因此可以在点击按钮时删除相应的元素，并更新组件状态中的数据。此外，还可以使用 .then() 和 .catch() 方法来处理返回的 Promise。如果请求成功，会调用 .then() 方法，否则会调用 .catch() 方法。
结论
在本文中，我们学习了如何使用 @mikelspohn/react-fetch 包来发送和处理 HTTP 请求。它遵循了 React 的原则，提供了一个简单的方式来发送 HTTP 请求，并且使用清晰的界面来呈现数据。使用 @mikelspohn/react-fetch 可以大大简化前端代码，并在 React 中进行状态管理，从而提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e2447b6