axios请求超时自动重新请求

本文介绍了一种在接口请求超时或获取数据失败时自动重试的配置方法,通过设置axios拦截器实现请求重试功能,确保数据获取的可靠性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

有时候因项目需求,要在接口请求超时或者获取数据失败时,重新请求1次,或者更多次。具体的配置步骤和方法如下:

因为是要在请求超时或者获取数据失败时,进行重新请求设置,那么我们肯定是要在请求返回拦截器里面设置,

import axios from "axios";

const Axios = axios.create({ 
	// 下面两个属性,用来设置,请求失败或者超时,自动重新请求的次数和间隙时间
	retry: 2, // 请求次数
	retryInterval: 1000 // 求期间隙
    ......
});
//请求前拦截
Axios.interceptors.request.use(config => {
		return config
	},
	function(error) {
		return Promise.reject(error)
	}
);
//请求后返回数据拦截
Axios.interceptors.response.use(res => {
       return res
    },
    function axiosRetryInterceptor(res) {
        var config = res.config;
        //如果配置不存在或重试属性未设置,抛出promise错误
        if (!config || !config.retry) return Promise.reject(res);
        //设置一个变量记录重新请求的次数
        config.retryCount = config.retryCount || 0;
        // 检查重新请求的次数是否超过我们设定的请求次数
        if (config.retryCount >= config.retry) {
            return Promise.reject(res);
        }
        //重新请求的次数自增
        config.retryCount += 1;
        // 创建新的Promise来处理重新请求的间隙
        var back = new Promise(function(resolve) {
            console.log("接口"+config.url+"请求超时,重新请求")
            setTimeout(function() {
                resolve();
            }, config.retryInterval|| 1);
        });
        //返回axios的实体,重试请求
        return back.then(function() {
            return Axios(config);
        });
    }
);
export default Axios

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值