Axios一行核心代码搞定请求重试和取消重复请求的请求库

如果你也厌倦了在每一个项目中都重新配置一遍axios拦截器，那就接着往下看吧

此篇文章不会讲述功能的实现，目的是带来一种全新的axios拦截器配置方式

如果当你配置过复杂的axios ，你会理解其中的痛苦，如果再让你再另一个项目中配置同样功能的axios ，如果不复制黏贴，那么你会非常痛苦

重复性的劳动让你身心俱疲

又或者项目紧急，而你对axios又是一知半解，让你配置一个复杂的符合需求的装饰器，你一定会抓狂

如果你深有感触，接下来我一定会让你眼前一亮

import { customConfiguration, Module, InitializeContainer, interceptorsResponseSuccess, initializationAxios, instanceAlias } from '@zealforchange/proveaxios'
import { Cancel, HEADER_KEY } from '@zealforchange/proveaxios/cancel'
import { RetryAfterTimeout, retryAfterTimeoutOps } from '@zealforchange/proveaxios/retryAfterTimeout'
import { AxiosResponse } from 'axios'

@Module([Cancel, RetryAfterTimeout]) // 配置 取消重复请求 和 请求失败重试 插件
@initializationAxios({
  headers: {
    [HEADER_KEY]: HEADER_KEY, // Cancel 根据 此 header头判断是否取消重复请求
  },
  baseURL: '...',
  timeout: 2000,
})
class Core {
  @interceptorsResponseSuccess() // 响应拦截器
  static async res(res: AxiosResponse) {
    return res.data
  }
}

const h = new InitializeContainer().collect([Core])

// customConfiguration<retryAfterTimeoutOps<object>> 将 retryAfterTimeoutOps 类型与 axiosRequestConfig类型进行交叉
function httpHelper(conf: customConfiguration<retryAfterTimeoutOps<object>>) {
  return h.get(instanceAlias.firstInstance)(conf)
}

// 优秀的类型提示
httpHelper({
  // 失败重试前
  retryBeforeCb(conf) {
    return conf
  },
  // 失败重试后
  retryAfterCb(response) {},
  numberOfRetries: 2, // 失败重试次数
})

说说你的感受吧我的老伙计

最令我激动的是插件模式

他最让人觉得不可思议的是，他通过装饰器赋予了拦截器可插拔的能力，更灵活的配置，将繁琐的实现隐藏，让axios的拦截器不再变得臃肿

如果将取消重复请求和失败请求重试的逻辑单独写出来，那又要不知道浪费多少时间了

秉承着不重复造轮子的原则，你可以把可复用的逻辑上传npm包，需要时install下来注入到Module 装饰器中，大大解放了劳动力

前提是你需要稍微了解在该包的作用下如何生成一个插件，后续会单独出一期 userAuthorization(token续传插件) 插件是如何实现的

目前开箱即用的只有 Cancel 和 RetryAfterTimeout，userAuthorization 三个插件可供选择，也可持续关注该包的进展，会有更多更方便的插件涌现

感兴趣可持续关注，也不要吝啬你的star！

github.com/erqiu-sj/pr…