在前端开发中，我们往往需要使用到 RESTful API 来请求后端的数据。为了更方便地调用这些 API，我们可以使用一个名为 resting-react 的 npm 包。在这篇文章中，我们将会介绍怎样使用这个包来请求后端数据并在 React 应用程序中使用。
安装
我们可以使用 npm 来安装这个包：
npm install resting-react --save
使用
安装完成后，我们可以通过 importing 的方式来使用 resting-react 包。下面的例子将展示怎样使用这个包在 React 组件中获取并展示数据。
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
------ -------- - ------------- ----------- ------- - ---- ----------------
------ ------- -------- ----- -
----- ------ -------- - -------------
------------ -- -
------------------------------------ -- -
--------------
---
-- ----
------ -
-----
------ ----------------
----
---------------- -- -
--- ------------------------------
---
-----
------
--
-上面的代码首先导入了 React 常用的 hook：useEffect 和 useState。然后，使用 onBeforeSend，onResponse 和 onError 三个方法来对请求进行拦截。这里我们只是简单地使用了 Restful.get 方法来请求数据。
认证
在使用 RESTful API 时，经常需要在请求的头信息中携带 Token 等认证信息。在 resting-react 中，我们可以添加一个全局的拦截器来设置这些头信息。下面是一个例子：
import Restful from 'resting-react';
Restful.setGlobalHeader('Authorization', `Bearer ${{your_access_token}}`);请求和错误拦截
还可以通过 onBeforeSend、onResponse 和 onError 来拦截请求和错误。例如，可以在请求之前添加一个 loading 效果，以便提醒用户正在加载数据。
-- -------------------- ---- ------- ------------------------------ -- - -- -- ------- -- --- ----------------------------- -------- -- - -- -- ------- -- --- ----------------------- -------- -- - -- ---- ---
在 onError 方法中，我们可以使用 throw new RestingError('Error message') 来抛出错误消息。
总结
在本文中，我们介绍了如何使用 resting-react 包来请求并展示后端数据。我们还看到了怎样在请求之前添加拦截器，并在请求和错误发生时进行拦截。这些技术都可以帮助我们更好地使用 RESTful API 和 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005531981e8991b448d071e