在前端开发中，我们经常需要与 API 接口进行交互，获取数据并在网页中展示。为了方便开发，我们可以使用一些工具或者库来简化 API 请求的过程。今天，我们来介绍一个 npm 包：generic-rest-apis。
generic-rest-apis 是一个通用的 RESTful API 客户端，可以方便地处理多种 API 返回数据格式（如 JSON、XML、CSV 等），支持多种请求方式（如 GET、POST、PUT、DELETE 等），并且可以通过拦截器实现对请求和响应进行拦截。下面我们来学习如何使用 generic-rest-apis。
安装和基础使用
首先，我们需要安装 generic-rest-apis。在控制台中输入以下命令：
npm install generic-rest-apis --save
安装完成后，我们可以在项目中引入该库：
import ApiClient from 'generic-rest-apis';
然后，我们可以创建一个 ApiClient 实例并配置基础信息（如 API 地址、请求头等）：
const client = new ApiClient({
baseURL: 'https://api.example.com',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer token'
}
});现在，我们就可以使用 client 来发送 API 请求了。例如，我们想要获取用户列表的 API 接口：
client.get('/users').then((response) => {
console.log(response.data);
}).catch((error) => {
console.error(error);
});这里，我们使用了 client 的 get 方法来发送 get 请求，并使用 Promise 对象来获取服务器返回的数据。当然，我们也可以使用其他请求方法，如 post、put、delete 等。
拦截器
generic-rest-apis 还提供了拦截器机制，可以让我们在请求和响应过程中进行一些操作，例如添加请求头、更改响应数据等等。我们可以在创建 ApiClient 实例时配置拦截器，并按顺序执行它们。
下面是一个添加 Authorization 请求头的拦截器示例：
-- -------------------- ---- -------
----- --------------- - -
-------- -------- -- -
---------------------------- - ------- -------
------ -------
-
--
----- ------ - --- -----------
-------- --------------------------
-------- -
--------------- ------------------
--
------------- -----------------
---在这个例子中，我们创建了一个名为 authInterceptor 的拦截器对象，该对象包含一个 request 方法。在这个方法中，我们将 Authorization 请求头添加到了请求中。
我们可以创建多个拦截器，并按顺序执行它们。例如，我们想要在响应数据中缩小数组，我们可以添加一个名为 reduceArrayInterceptor 的拦截器：
-- -------------------- ---- -------
----- ---------------------- - -
--------- ---------- -- -
-- ------------------------------ -
------------- - ---------------------- ---
-
------ ---------
-
--
----- ------ - --- -----------
-------- --------------------------
-------- -
--------------- -------------------
---------------- ------- ------
--
------------- ----------------- -----------------------
---在这个例子中，我们创建了一个名为 reduceArrayInterceptor 的拦截器对象，该对象包含一个 response 方法。在这个方法中，我们检查响应数据是否数组，如果是，我们就将其缩小为数据中的前五个元素。
示例代码
下面是一个完整的使用 generic-rest-apis 的代码示例：
-- -------------------- ---- -------
------ --------- ---- --------------------
----- --------------- - -
-------- -------- -- -
---------------------------- - ------- -------
------ -------
-
--
----- ---------------------- - -
--------- ---------- -- -
-- ------------------------------ -
------------- - ---------------------- ---
-
------ ---------
-
--
----- ------ - --- -----------
-------- --------------------------
-------- -
--------------- ------------------
--
------------- ----------------- -----------------------
---
-- -- --- --
------------------------------------ -- -
---------------------------
---------------- -- -
---------------------
---
-- -- ---- --
--------------------- -
----- -------
---- --
------------------ -- -
---------------------------
---------------- -- -
---------------------
---在这个示例中，我们创建了两个拦截器对象，一个用于添加请求头，另一个用于缩小响应数据。然后，我们使用 client 实例分别发送了 get 和 post 请求，并在控制台中打印了数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c2c81e8991b448d9caa