npm 包 rest-kb 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要使用 REST API 与后端进行数据交互。但是，使用原生的 fetch 或 XMLHttpRequest请求接口会让我们的代码变得冗长难读，很难维护。为了让前端工程师更方便地进行 API 调用与处理，有一个很方便的 npm 包 -- rest-kb，它提供了一系列的 API 调用方法和拦截器，简化了前端开发流程。

rest-kb 的基本使用

安装

首先，我们需要在项目中安装 rest-kb，使用以下命令即可：

npm i rest-kb

初始化

接下来我们需要创建一个 rest-kb 实例，来进行 API 调用。在使用前，我们需要导入 rest-kb 的 createAPI 方法，来创建 API 实例：

import { createAPI } from 'rest-kb';

const api = createAPI({
  baseURL: 'https://xxx.xxx.com/api',
  headers: {
    authorization: localStorage.getItem('token'),
  },
});

在 createAPI 方法中，我们需要传入一个包含 API 基本配置信息的对象，其中最重要的配置是 baseURL，它表示 API 的基础地址。我们还可以在 headers 这个对象里面添加一些公共请求头，这样在每次请求时都会自动添加这些请求头，不需要每次手动添加。

使用 API

假设我们需要调用一个获取用户信息的 API，我们只需要在 api 实例上调用相应的方法，传入 API 地址，即可完成请求。rest-kb 中提供了五种默认方法，对应了 HTTP 协议中的五种请求方法：

api.get(url, config)
api.post(url, data, config)
api.put(url, data, config)
api.patch(url, data, config)
api.delete(url, config)

其中，url 表示相对于基础地址的 API 路径，config 则是包含请求数据、请求头等配置信息的对象。

下面是一个获取用户信息的示例：

async function getUserInfo(userId) {
  const { data } = await api.get(`/user/${userId}`);
  return data;
}

rest-kb 的深入使用

除了基本的 API 调用以外，rest-kb 中还提供了丰富的功能和拦截器，用来方便我们更好地处理常见的 API 请求和响应逻辑。

请求拦截器

rest-kb 允许我们在发送请求之前对请求进行拦截和修改，比如添加一些动态的请求头、请求参数和签名等。

我们可以像这样给 api 实例添加请求拦截器：

// 添加请求拦截器
api.interceptors.request.use((config) => {
  // 往请求头里加入token
  const { token } = store.state;
  config.headers.Authorization = token;
  
  return config;
});

在这里，我们使用了 request.use 方法添加了一个请求拦截器，拦截器接收一个 config 对象，可以在这里添加一些额外的请求配置。然后，我们修改了请求头，添加了一个 JWT Token。

响应拦截器

rest-kb 还提供了响应拦截器，用于在响应被 then 或 catch 处理之前进行拦截和修改。

例如，我们可以使用响应拦截器来对常见的 HTTP 错误进行统一处理：

-- -------------------- ---- -------
------------------------------
  ---------- -- -
    ------ ---------
  --
  ------- -- -
    -- --------------- -- --------------------- --- ---- -
      -- ---------
      ----------------------
    - ---- -
      -- -----------
      ---------------------
    -
    ------ ----------------------
  -
--

在这里，我们使用了 response.use 方法添加了一个响应拦截器，拦截器接收两个函数作为参数，第一个函数处理正确的响应结果，第二个函数则处理错误的响应结果。我们在这里对 HTTP 状态码为 401 的情况进行了特殊处理，以便用户在未登录的情况下能够自动跳转到登录页。

自定义 API 方法

如果我们需要在项目中使用许多相似的 API，那么我们可以使用自定义的 API 方法来按照一定的规范封装这些 API。

例如，我们可以按照资源类型把 API 分组，定义如下：

-- -------------------- ---- -------
----- ------- - -
  ----- ----------- -
    ----- - ---- - - ----- ------------------
    ------ -----
  --

  ----- -------------- -
    ----- - ---- - - ----- ------------------ --------
    ------ -----
  --

  ----- ---------- -
    ----- - ---- - - ----- ---------------------------
    ------ -----
  --
--

----- ---------- - -
  ----- ----------- -
    ----- - ---- - - ----- ---------------------
    ------ -----
  --

  ----- -------------- -
    ----- - ---- - - ----- --------------------- --------
    ------ -----
  --

  ----- ---------- -
    ----- - ---- - - ----- ------------------------------
    ------ -----
  --
--

在这里，我们定义了两个 API 分组， userAPI 中封装了用户资源相关的 API，articleAPI 则封装了文章资源相关的 API。封装完后，我们就可以按照如下方式轻松使用 API：

const users = await userAPI.fetchlist();
const newArticle = await articleAPI.create(articleObject);
await userAPI.delete(userId);

rest-kb 的总结和指导意义

rest-kb 是一个非常优秀的 npm 包，它极大地简化了前端开发者的工作，提高了前端开发的效率，让我们的代码更加清晰简洁。同时，rest-kb 的功能还非常丰富，可以满足大多数 API 调用需求。通过学习这个示例，我们可以更好地理解和掌握如何使用 rest-kb，在我们的实际开发中发挥它的优势，提高我们的工作效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600566c181e8991b448e31ba