在vue中axios请求超时的操作(重新请求)
用在接口请求超时,或者主动设置时间在超时后的操作我在网上看了下都长一个样,算是给自己记个笔记吧,我是用的是iview-admin找到axios.js配置文件class HttpRequest {...// 请求次数,请求的间隙instance.defaults.retry = 1instance.defaults.retryDelay = 3000// 响应拦截instance.intercept
·
用在接口请求超时,或者主动设置时间在超时后的操作
我在网上看了下都长一个样,算是给自己记个笔记吧,我是用的是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条内容
所有评论(0)