在vue中axios请求超时的操作(重新请求)

1 篇文章 0 订阅

用在接口请求超时,或者主动设置时间在超时后的操作
我在网上看了下都长一个样,算是给自己记个笔记吧,我是用的是iview-admin
找到axios.js配置文件

class HttpRequest {
  	...
    // 请求次数,请求的间隙
    instance.defaults.retry = 1
    instance.defaults.retryDelay = 3000
    // 响应拦截
    instance.interceptors.response.use(res => {
      ...
    }, err => {
      ...
      var config = err.config
      // 如果配置不存在或未设置重试选项,则返回错误信息
      if (!config || !config.retry) return Promise.reject(err.response.data)

      // 设置变量即跟踪重试次数
      config.__retryCount = config.__retryCount || 0

      // 检查我们是否已经超过了总重试次数
      if (config.__retryCount >= config.retry) {
        // 返回错误信息
        return Promise.reject(err.response.data)
      }

      // 重试次数加1
      config.__retryCount++
      
      // 创建延时器等待发送重试请求
      var backoff = new Promise((resolve) => {
        setTimeout(() => {
          resolve()
        }, config.retryDelay || 1)
      })

      // 返回调用AXIOS来重试请求
      return backoff.then(() => {
        return this.request(config)
      })
    })
  }
  request (options) {
  	// 因为有需要所以这里我设置了 20s 超时
    const instance = axios.create({ timeout: 1000 * 20 })
    ...
    return instance(options)
  }

也可以单独设置 api.js

export const getOrgData = () => {
  return axios.request({
    url: 'url',
    method: 'get',
    timeout: 1000 * 20
  })
}
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值