Vue

axios统一配置&请求错误时自动重试

2019-02-22  本文已影响0人  卖血上网丶
import axios from 'axios'
import Qs from 'qs'

axios.default.retry = 60 // 重试次数
axios.default.retryDelay = 5000 // 重试延时,5秒重试一次
axios.default.shouldRetry = (error) => true // 重试条件,默认只要是错误都需要重试

axios.default.withCredentials = true // 表示跨域请求时是否需要使用凭证(cookie/session)
axios.default.baseURL = 'http://mywebsite.com'

const config = {
    // baseURL: 'http://mywebsite.com',
    // withCredentials: true,
    timeout: 10000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
    },
    transfromRequest: [function (data) {
        // 这里可以在发送请求之前对发请求数据做处理,比如from-data格式化等
        data = Qs.stringify(data, { arrayFormat: 'repeat' })
        return data
    }],
    responseType: 'json' // 返回数据类型
}
const AxiosInst = axios.create(config)

// axios.interceptors: axios拦截器
/*
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做某事
    return config
}, function (error) {
    // 请求错误时做某事
    return Promise.reject(error)
})
axios.interceptors.response.use(function (response) {
    // 对响应数据做某事
    return response.data
}, function (error) {
    // 返回错误时做某事
})
*/
// 返回错误时拦截,并尝试重试
AxiosInst.interceptors.response.use(undefined, function (err) {
    var config = err.config

    // 判断是否配置了重试
    if (!config || !config.retry) return Promise.reject(err)
    if (!config.shouldRetry || typeof config.shouldRetry !== 'function') return Promise.reject(err)

    // 判断是否满足重试条件
    if (!config.shouldRetry(err)) return Promise.reject(err)

    // 设置重试次数
    config.__retryCount = config.__retryCount || 0
    if (config.__retryCount >= config.retry) return Promise.reject(err)

    // 重试次数自增
    config.__retryCount += 1

    // 延时处理
    var backoff = new Promise(function (resolve) {
        setTimeout(function () {
            resolve()
        }, config.retryDelay || 1)
    })
    config.data = Qs.parse(config.data)
    // 重新发起axios请求
    return backoff.then(() => {
        return AxiosInst(config)
    })
})

// export { AxiosInst } // import { AxiosInst } from './axios'
export default AxiosInst // import AxiosInst from './axios'
上一篇下一篇

猜你喜欢

热点阅读