在前端开发中，我们经常会使用 npm 包来引入第三方的组件或库，以便我们快速、高效地完成项目。在这篇文章中，我们将介绍一个非常有用的 npm 包——@hyper-jobs/services，它可以帮助我们更好地管理前端工程中的数据请求。
什么是 @hyper-jobs/services
@hyper-jobs/services 是一个基于 Vue 和 Axios 的数据请求管理器，可以帮助我们更轻松地管理前端应用程序中的 API 调用，提供了统一的 API 接口，帮助我们从混乱的数据请求代码中解脱出来。@hyper-jobs/services 支持以下特性：
- 支持请求方法（GET、 POST、PUT、DELETE）；
- 支持请求拦截器，可以方便地添加请求拦截器，更改请求头部信息、添加 token 等；
- 支持响应拦截器，可以方便地添加响应拦截器，处理返回的数据，比如说从 data 字段把 response 解析出来，或者在遇到错误时进行全局通知等；
- 支持取消请求，方便地取消多余的请求；
- 支持多个域名请求；
- 支持自动处理 token 和 过期逻辑。
如何使用 @hyper-jobs/services
在使用 @hyper-jobs/services 之前，我们需要先安装它：
npm install @hyper-jobs/services --save-dev
1. 创建服务类 Service
在使用 @hyper-jobs/services 之前，我们需要创建一个 Service 类，并且在其中定义所有的接口方法。
-- -------------------- ---- -------
-- ---------------------
------ - ------- - ---- -----------------------
------ ------- ----- --------- ------- ------- -
------------- -
---------------------------------
-
------------- -
------ ----------------------
-
--------------------- -
------ ------------------------------------
-
---------------------- -
------ ---------------------- ---------
-
-在这里，我们先导入了 Service 类，然后继承它，创建了一个名为 MyService 的类，实现了三个接口方法：getProducts、getDetail、createProduct。这些方法都是 @hyper-jobs/services 封装了 Axios 后直接暴露出来的接口。
其中，我们在构造函数中传入了一个参数，它表示本 Service 类通用的 base url，这个 url 会被当做请求的 base url，所有后续的请求都会在其末尾。这样的话，我们在调用接口时，就不用每次都写完整的 url 了。
2. 使用 Service 类调用 API 接口
创建好 Service 类之后，我们就可以把它当做一个“专家”调用相应的 API 接口了，具体的调用代码如下：
-- -------------------- ---- -------
-- --------------------------
------ --------- ---- ---------------------------
------ ------- -
------ -
------ -
--------- ---
-
--
--------- -
----- --------- - --- ------------
-----------------------
---------------- -- -
-- ----
------------- - --------------
--
-------------- -- -
-- ----
---
--
-在这里，我们首先导入了之前创建的 Service 类，然后在需要用到它的组件中，实例化一个 Service 类，就可以调用 Service 类的方法了。比如，我们在 created() 钩子函数中，通过 myService.getProducts() 调用了前面定义的 MyService 类中的 getProducts 方法，该方法通过 GET 请求访问了 /products 的资源。如果请求成功，我们就把返回的数据存入该组件的数据属性中。
3. 添加请求拦截器
有时候我们需要给请求添加一些额外的信息，比如添加 token 等。在这种情况下，@hyper-jobs/services 提供了请求拦截器，方便我们在请求时向 header 中添加信息。
-- -------------------- ---- -------
-- ---------------------
------ - ------- - ---- -----------------------
------ ------- ----- --------- ------- ------- -
------------- -
---------------------------------
---------------------------------------------------- -- -
-- ------- ------------- --
----- --------- - ------------------------------
---------------------------- - ------- --------------
------ -------
---
-
------------- -
------ ----------------------
-
-在这里，我们在 Service 类的构造函数中，通过 axiosInstance.interceptors.request.use() 添加了请求拦截器。在这个拦截器中，我们拿到了请求的配置 config，在其中添加了 header 信息，比如 Authorization 字段，并用 localStorage 来获取 token。最终，通过 return 语句返回了更改后的 config 配置。
至此，我们通过添加请求拦截器，成功给 /products 的请求加上了 token 信息。
4. 添加响应拦截器
在我们开发应用程序的时候，经常会遇到一些通用的错误信息，比如未授权、404 等，此时我们可以在请求返回的时候判断返回的错误信息，并在响应拦截器中进行统一处理。
-- -------------------- ---- -------
-- ---------------------
------ - ------- - ---- -----------------------
------ ------- ----- --------- ------- ------- -
------------- -
---------------------------------
---------------------------------------------------- -- -
-- ------- ------------- --
----- --------- - ------------------------------
---------------------------- - ------- --------------
------ -------
---
---------------------------------------------
---------- -- -
-- ---------
-- ---------------- --- ---- -
-- ----
------ --------------------------
- ---- -
-- ----
------ -------------------------
-
--
------- -- -
-- -- --------------------- ---------
------ ----------------------- -
---- ----
-- ----- -------
------
---- ----
-- --------
------
--------
-- ----
-
------ ----------------------
-
--
-
------------- -
------ ----------------------
-
-在这里，我们在 Service 类的构造函数中，通过 axiosInstance.interceptors.response.use() 添加了响应拦截器。
在成功的情况下，我们可以直接返回 Promise.resolve(response)，在失败的情况下，我们就可以根据 error.response.status 的值进行判断，根据不同的状态码进行相应的全局通知，比如 token 过期、未登录、资源不存在等。
@hyper-jobs/services 提供了一个简单易用的某些方法, 例如，当请求返回401的响应时，它会自动尝试更新Token并再次尝试请求。
5. 取消请求
有时候，我们在发送 Ajax 请求后，如果用户立刻切换了请求页面，那么这时候就必须取消这个请求，否则可能会造成一些奇怪的问题。
-- -------------------- ---- -------
-- ---------------------
------ - ------- - ---- -----------------------
------ ------- ----- --------- ------- ------- -
------------- -
---------------------------------
----------- - ----------------------------------------
-
------------- -
------ --------------------- -
------------ ------------------
---
-
--------------- -
----------------------------- -------- -- --- --------
-
-在这里，我们在 Service 类的构造函数中，通过 this.source = this.axiosInstance.CancelToken.source() 来创建一个 CancelToken，在之后的请求中，通过 cancelToken: this.source.token 来添加该 CancelToken，这样就能够进入请求拦截器中判断当前请求是否应该被取消了。
特别的，我们可以通过调用 cancelRequest 对请求进行手动取消。
总结
通过使用 @hyper-jobs/services 这个 npm 包，我们可以让我们的前端请求代码更加易读和易管理，避免了频繁写重复的代码，使我们能够写出更好、更健壮的前端代码。
上面我们讲解了如何使用 @hyper-jobs/services、如何添加请求/响应拦截器、如何取消请求。如果你想深入了解详情，可以去 https://github.com/hyper-jobs/services 上看看官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-hyper-jobs-services