nckjxy/axios-ex

axios-ex是一款采用typescript开发的axios扩展，集成了接口并发控制（可取消请求）、请求失败自动重试、最大请求数量限制等功能

axios-ex

企业级项目axios集成方案

完整文档请查阅： API 完整文档

安装

axios-ex自带了最新版的 axios，可以不用安装axios包

# 使用npm
$ npm install axios-ex --save

# 使用yarn
$ yarn add axios-ex

使用

常规用法

// {app_root}/src/plugins/axios.js
import { getCookie, setCookie } from 'js-cool'
import axiosExtend from 'axios-ex'

/**
 * 设置请求头
 *
 * @param {object} instance AxiosInstance
 */
function setHeaders(instance) {
    instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
}
/**
 * 请求拦截器
 *
 * @param {object} config AxiosRequestConfig
 * @param {object} options 请求参数AxiosExtendRequestOptions
 * @returns AxiosRequestConfig
 */
function onRequest(config, options = {}) {
    // some codes
    return config
}
/**
 * 请求错误时执行
 *
 * @param {object} err Error
 */
function onRequestError(err) {
    // handler request error
}
/**
 * 响应拦截器
 *
 * @param {object} res AxiosResponse<any>
 * @param {object} options 请求参数AxiosExtendRequestOptions
 * @returns Promise<unknown>
 */
function onResponse(res, options = {}) {
    if (res.data.success) return res.data
    return Promise.reject(res.data)
}
/**
 * 响应错误时执行
 *
 * @param {object} err Error
 */
function onResponseError(err) {
    // handler response error
}
/**
 * 请求错误或响应错误都执行
 *
 * @param {object} err Error
 */
function onError(err) {
    // handler request & response error
}
/**
 * 请求取消
 *
 * @param {object} err Error
 */
function onCancel(err) {
    console.error(err.message)
}

// 实例化
const axiosEx = new axiosExtend({
    maxConnections: 30, // 最大同时请求数，默认：0=不限制
    unique: true, // 是否取消前面的相似请求，默认：false
    retries: 0, // 重试次数，默认：0=不重试
    orderly: false, // 是否有序返回，默认：true
    setHeaders, // 设置请求头的方法
    onRequest, // 请求拦截器
    onRequestError, // 请求错误时执行
    onResponse, // 响应拦截器
    onResponseError, // 响应错误时执行
    onError, // 请求错误或响应错误都执行
    onCancel // 请求取消时的回调
})

export default options => {
    // 这里设置 unique 和 orderly 优先级高于实例化时候的配置
    options.unique = options.unique ?? false
    options.orderly = options.orderly ?? false
    // 这里的unique优先级更高
    return axiosEx.create(options)
}

定义失败重试的延时方法

1. 自定义重试延迟的时长

   // 实例化的时候配置
   const axiosEx = new axiosExtend({
       // ...
       retryDelay: retryCount => {
           return retryCount * 1000
       }
       // ...
   })

2. 或者使用axios-ex内置的方法，exponentialDelay 随机递增 0%-50%

   import axiosExtend, { exponentialDelay } from 'axios-ex'
   // 实例化的时候配置
   const axiosEx = new axiosExtend({
       // ...
       retryDelay: exponentialDelay
       // ...
   })

在 vue2.x 里面使用

有时候我们需要在onRequest或onResponse里面使用this（vue 实例），可以这样写

import axiosExtend from 'axios-ex'

let axiosEx = null
// 请求拦截器
function onRequest(config, options = {}) {
    // this => vueInstance
    return config
}
// 响应拦截器
function onResponse(res, options = {}) {
    // 隐藏loading动画
    if (this instanceof Vue) {
        this.$loader.hide()
    }
    if (res.data.success) return res.data
    return Promise.reject(res.data)
}

export default options => {
    // 只需要初始化一次
    if (!axiosEx)
        axiosEx = new axiosExtend({
            onRequest: onRequest.bind(this),
            onResponse: onResponse.bind(this)
            //...
        })

    // 显示loading动画
    if (this instanceof Vue) {
        this.$loader.show()
    }
    return axiosEx.create(options)
}

问题和支持

Please open an issue here.

License

MIT