如果你也看腻了技术博客上各种封装的axios，始终站在axios之下封装，这篇文章可能会让你眼前一亮

背景

起因是我在做一个基于vben的后台管理系统，这是一个功能非常全面的管理系统

但二开难免会对此基础上进行修修改改，这就需要对整个项目进行全面的理解

但我看到请求封装部分的时候

说实话 我是很不想看的 但也不能说是看不懂 但我需要大改记住他某一块逻辑到底是想做什么事情 才能串联起来整个封装逻辑

这还涉及了一些ts相关的，对于一些基础不好的同学，快也就一个小时就看完了 慢可能半天就过去了

vben的axios封装涉及了 取消重复请求，请求重试

我就想能不能用一种高内聚低耦合的方式解决这种 在不用深入了解其内部实现的情况下仍然可以通过配置的方式 实现某项功能

import { Cancel, module, initconfig, Axios} from 'xxxx'

// 伪代码
@module({
   interceptor: [Cancel] // 配置取消重复请求的插件,实现取消重复请求的功能
})
@initconfig({
  baseURL:''
})
new Axios()

从伪代码来看，对比vben的配置 更加易懂 且 更好迁移 不必在下一个项目中copy上一个项目的请求配置

把功能插件化

插件功能化有很多好处

• 容易维护：当一个功能出现问题时，能够以更小颗粒度的更新。解决维护成本，降低修改后对其他功能的影响
• 便于开发： 当一个产品开发出来经手多人后，插件化会降低团队和个人的沟通成本和协作势必提高软件产品的质量
• 产品功能的填充： 任何软件都是需要维护的，为了保障产品的运营周期，需要不断的将新功能注入到现有的软件体系，插件化的系统架构为扩展新功能提供了更好的方便性

memo28/service 应运而生

为什么是memo28/service？

• 插件化的配置拦截器
• 前\后置拦截器(在请求的执行前和请求的执行后 执行)
• 自带请求日志(基于拦截器实现)，
• 自带前\后置拦截器日志
• 自带错误请求兜底(基于前\后置拦截器实现)，
• 自带版本切换控制(基于拦截器实现)
• 取消请求助手
• typescript支持
• 插件上传npm更好的复用

logs

简单的看看请求日志是什么样子的

简单说明一下 triggerInterceptorImpl(前后置拦截器) :beforeTrigger(前置) :插件名

看看他是如何配置的？

import { ServiceUtils } from '@memo28/utils'
const serviceUtils = new ServiceUtils()
      .modules({
        interceptorModule: [],
      })
      .initializeConfiguration({
        baseURL: '<http://localhost:100/base>',
        debugger: true,
      })
      .instantiation()
      .getAxios()

serviceUtils<string>({
  url: ''
})
// 就是这么简单

请求兜底

请求难免会有报错的时候，这时候我们不能让错误的返回值继续传递下去，否则可能会导致页面崩溃的其他无法预料的结果

这时在接口层面兜底就会比在接口调时兜底 覆盖反馈更广

import { ServiceUtils } from '@memo28/utils'
const serviceUtils = new ServiceUtils()
      .initializeConfiguration({
        baseURL: '<http://localhost:100/base>',
        debugger: true,
      })
      .instantiation()
      .getAxios()

const result = await serviceUtils<string>({
  url: '/asfasfas', // 一个不存在的接口
  pocketValue: '/v1/hello',
})

console.log(result) // /v1/hello 兜住了我的伙计！

他能帮你处理因为接口层面导致的不确定情况！

感兴趣的话可以留下你的start吗？更多功能点击(版本切换,取消请求)