下面是一个示例代码,展示了如何使用Axios的响应拦截器来实现重试成功的功能:
import axios from 'axios';
const api = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
});
// 设置重试次数
const maxRetries = 3;
// 创建一个变量来存储重试次数
let retryCount = 0;
// 添加请求拦截器
api.interceptors.request.use(
(config) => {
// 在每次请求之前重置重试次数
retryCount = 0;
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 添加响应拦截器
api.interceptors.response.use(
(response) => {
return response;
},
(error) => {
// 检查是否需要重试
const { config, response } = error;
// 如果请求被取消,则不进行重试
if (axios.isCancel(error)) {
return Promise.reject(error);
}
// 如果超过最大重试次数,则直接返回错误
if (retryCount >= maxRetries) {
return Promise.reject(error);
}
// 如果响应状态码为5xx,则进行重试
if (response && response.status >= 500) {
retryCount++;
console.log(`Retrying request (${retryCount} of ${maxRetries})...`);
return api.request(config);
}
// 对于其他错误,直接返回错误
return Promise.reject(error);
}
);
// 示例请求
api.get('/posts/1')
.then((response) => {
// 处理成功响应
console.log(response.data);
})
.catch((error) => {
// 处理错误响应或重试超过最大次数的情况
console.error(error);
});
在上面的示例中,我们首先创建了一个名为api
的Axios实例。然后,我们定义了maxRetries
变量来指定最大重试次数,并创建了一个retryCount
变量来存储当前重试次数。
接下来,我们添加了一个请求拦截器,在每次请求之前重置retryCount
为0。
然后,我们添加了一个响应拦截器。在拦截器中,我们首先检查是否需要重试。如果请求被取消或已经超过最大重试次数,则直接返回错误。如果响应状态码为5xx,则增加retryCount
并进行重试。
最后,我们使用api.get
方法发起一个示例请求,并处理成功响应和错误响应或重试超过最大次数的情况。
请注意,这只是一个简单的示例,实际的重试策略可能需要更复杂的逻辑,比如指数退避(exponential backoff)等。