axios处理请求超时重新请求

添加响应拦截器

axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
    var config = err.config;
    // If config does not exist or the retry option is not set, reject
    if(!config || !config.retry) return Promise.reject(err);
    
    // Set the variable for keeping track of the retry count
    config.__retryCount = config.__retryCount || 0;
    
    // Check if we've maxed out the total number of retries
    if(config.__retryCount >= config.retry) {
        // Reject with the error
        return Promise.reject(err);
    }
    
    // Increase the retry count
    config.__retryCount += 1;
    
    // Create new promise to handle exponential backoff
    var backoff = new Promise(function(resolve) {
        setTimeout(function() {
            resolve();
        }, config.retryDelay || 1);
    });
    
    // Return the promise in which recalls axios to retry the request
    return backoff.then(function() {
        return axios(config);
    });
});

使用方式:在参数中添加两个字段retry次数,retryDelay间隔时长

axios.get('/some/endpoint', { retry: 5, retryDelay: 1000 })
    .then(function(res) {
        console.log('success', res.data);
    })
    .catch(function(err) {
        console.log('failed', err);
    });

axios相关文档:
看云axios使用说明:https://www.kancloud.cn/yunye/axios/234845
axios,github问题164: https://github.com/axios/axios/issues/164
拦截器的应用实例:https://www.jianshu.com/p/ff8541e0976a

Axios是一个流行的基于JavaScript的HTTP客户端库,用于向服务器发送HTTP请求。当我们使用Axios发送请求时,有时可能会遇到请求超时的情况,这可能是由于网络不稳定或服务器处理时间过长引起的。 在Axios中,我们可以通过设置超时时间来处理请求超时的问题。超时时间表示发送请求后,等待服务器响应的最大时间。如果在超时时间内没有收到响应,则会中断当前请求,并执行重新请求。 以下是实现Axios请求超时重新请求的一般步骤: 1. 首先,在Axios的配置中设置一个合适的超时时间,可以根据实际情况酌情调整。例如,设置超时时间为5秒: ``` axios.defaults.timeout = 5000; ``` 2. 在发送请求前,使用Axios的拦截器对请求进行拦截,以便在请求超时时执行重新请求的操作。拦截器是一种在请求或响应被处理前拦截它们的过程,我们可以在其中做一些自定义的操作。 3. 在请求拦截器中,使用Promise.race方法来实现请求超时的判断。Promise.race方法接受一个由Promise组成的数组,返回最先解决或拒绝的Promise的结果。我们可以同时监听响应和超时Promise,当其中一个先响应时,取消另一个非必要的操作。 4. 当请求超时时,取消当前请求,并通过重新调用Axios发送请求重新尝试。 下面是一个使用Axios处理请求超时重新请求的示例代码: ```javascript axios.interceptors.request.use( config => { const timeoutPromise = new Promise((resolve, reject) => { setTimeout(() => { reject(new Error('请求超时')); }, 5000); }); return Promise.race([timeoutPromise, config]); }, error => { return Promise.reject(error); } ); axios.get('https://example.com/api') .then(response => { // 处理响应数据 }) .catch(error => { if (error.message === '请求超时') { // 重新发送请求 axios.get('https://example.com/api') .then(response => { // 处理响应数据 }) .catch(error => { // 处理重新请求失败情况 }); } else { // 处理其他错误情况 } }); ``` 通过以上步骤和示例代码,我们可以实现在Axios处理请求超时重新发送请求的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值