美文网首页Vue
axios统一配置&请求错误时自动重试

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

作者: 卖血上网丶 | 来源:发表于2019-02-22 16:25 被阅读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'
    

    相关文章

      网友评论

        本文标题:axios统一配置&请求错误时自动重试

        本文链接:https://www.haomeiwen.com/subject/gebeyqtx.html