简介
随着前端的发展，越来越多的前台开发任务需要使用后端的接口，因此对于前端来说，使用 API 请求在项目中变得越发普遍。此时，一个良好的 API 请求工具就显得非常重要，可以减少不必要的代码量，提高开发效率和代码维护性。本文将介绍一个常用的 npm 包 @omkartech/service-request，它提供了简单易用的 API 请求功能，支持 Promise，并支持拦截器、错误处理等功能。
安装
在项目中安装该 npm 包非常简单，只需要在项目文件夹内运行以下命令即可：
npm i @omkartech/service-request
使用方式
创建实例
在使用 @omkartech/service-request 之前，需要先通过实例来创建一个服务请求对象。我们可以通过以下方式创建：
-- -------------------- ---- -------
------ - --------------------- - ---- -----------------------------
----- --------------- - -----------------------
-------- --------------------------
-------- ------
-------- -
--------------- -------------------
--
---以上代码片段创建了一个服务请求实例，在后续的 API 请求中将使用该实例进行处理。createServiceInstance() 方法接受一个对象参数，其中 baseURL 代表基本的 API 请求地址，timeout 表示请求的超时时间，headers 表示请求所需的 header 信息等。
发送请求
我们将以 GET 请求示例来介绍一下发送 API 请求的方法：
serviceInstance.get('/users')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})在上述示例中，get() 方法表示发送 GET 请求，它接受一个参数（URL 地址）。在成功时，该方法返回成功的响应，并将响应数据打印在控制台上，出错时，输出相应的错误信息。该方法也支持 POST、PUT、PATCH、DELETE 等请求方式。
拦截器
在实际开发中，我们希望在请求发送之前或之后对请求进行一些处理操作。 @omkartech/service-request 提供了拦截器的功能，可以方便地实现这种需求。
以下代码段展示了在请求和响应被 then 或 catch 处理前的预处理方式:
-- -------------------- ---- -------
------ - --------------------- - ---- -----------------------------
----- --------------- - -----------------------
-------- --------------------------
-------- ------
-------- -
--------------- -------------------
--
---
-----------------------------------------
-------- -- -
------------------------ --------
------ -------
--
------- -- -
-------------------------- -------
------ ----------------------
-
--在上述代码片段中，我们定义了一个请求拦截器，也就是在请求发送前进行一些处理。具体来说，我们将打印请求的 config，然后返回该 config。同时，在请求失败时，捕获错误信息并返回 Promise.reject()。
以下代码展示了在响应被 then 或 catch 处理前的预处理的方式：
-- -------------------- ---- -------
------------------------------------------
---------- -- -
------------------------ ----------
------ ---------
--
------- -- -
------------------------- -------
------ ----------------------
-
--在上述代码片段中，我们定义了一个响应拦截器，也就是在请求成功时（状态码为 200 到 299 之间），对响应进行处理。具体来说就是打印 response 后再返回该 response。请求失败时，同样地捕获错误并返回 Promise.reject()。
错误处理
当接收到非 200 到 299 的状态码时，我们需要将其处理为一些优雅的方式展示在前台页面上，而非直接抛出错误信息。以下代码片段演示了如何进行错误处理：
-- -------------------- ---- -------
-----------------------------
-------------- -- -
--------------------------
--
------------ -- -
-- ---------------- -
---------------------------------
-----------------------------------
------------------------------------
- ---- -- --------------- -
---------------------------
- ---- -
-------------------- ---------------
-
---在上述代码中，我们通过 error.response 对响应的状态码进行了处理，如果状态码不在 200 到 299 之间，输出相应的错误信息。如果请求无法发送，则输出相关错误。如果其他错误，则直接输出错误本身。
结语
本篇文章简要介绍了 npm 包 @omkartech/service-request 的使用方法，包括如何创建实例、发送请求、使用拦截器、错误处理等。通过使用该 npm 包，我们可以更加方便快捷地处理前端的 API 请求等任务，提高前台开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583bb7