TS（TypeScript）和axios实现VUE请求重试

1.使用场景

Vue和Axios的错误处理与数据请求重试机制

在Web开发中，数据请求和错误处理是必不可少的一部分。Vue是一套用于构建用户界面的JavaScript框架，而Axios是一个基于Promise的、支持浏览器和Node.js的HTTP客户端库。本文将介绍如何在Vue中使用Axios进行数据请求，并实现错误处理和数据请求重试的功能。

我也是因为有个服务接口不稳定，有时候需要重发请求来解决数据的加载问题，所以在项目请求工具中添加了请求重试的配置。

2.带代码实现

以下是我的配置，省略部分业务配置

import axios, { AxiosRequestConfig } from "axios";
import { ElMessage } from "element-plus";
const https = require('https');
interface AxiosRequestConfigExtended extends AxiosRequestConfig {
  retryTimes: number
  retryDelay: number
}
//这里因为原本调用的https路径，有些解析配置
const serves = axios.create({
  baseURL: 'https://127.0.0.1:9001',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' },
  //https
  httpsAgent: new https.Agent({
    rejectUnauthorized: false
  }),
  retryTimes: 3, // 重试次数
  retryDelay: 1000 // 重试间隔 
} as AxiosRequestConfigExtended);

let tokenCookie = null;

// 设置请求发送之前的拦截器
serves.interceptors.request.use(
  (config) => {
    // 设置发送之前数据需要做什么处理
 
    return config;
  },
  (err) => Promise.reject(err)
);

// 设置请求接受拦截器
serves.interceptors.response.use(
  (res) => {
 
    // 设置接受数据之后，做什么处理
    if (res.data.code === 50000) {
      ElMessage.error(res.data.data);
    }
    return res.data;
  },
  (err) => {
    const config = err.config;
// 判断请求异常信息中是否含有超时timeout字符串
if (err.message.includes("timeout")) {
  console.log("错误回调", err);
  ElMessage.error("网络超时");
}
if (err.message.includes("Network Error")) {
  console.log("错误回调", err);
  ElMessage.error("服务端未启动，或网络连接错误");
}

if (!config || !config.retryTimes) {
  return Promise.reject(err);
}
const { __retryCount = 0, retryTimes = 0, retryDelay = 1000 } = config;
// 在请求对象上设置重试次数 
config.__retryCount = __retryCount;
// 判断是否超过了重试次数 
if (__retryCount >= retryTimes) {
  return Promise.reject(err);
}
// 增加重试次数 
config.__retryCount++;

// 延时处理 
const delay = new Promise(resolve => {
  setTimeout(resolve, retryDelay);
});
// 重新发起请求 
return delay.then(function () {
  return serves(config);
});

  }
);

export interface BaseDataStruct<T> {
  data: T;
}

const requestPlus = <D = any, T = any>(
  params: AxiosRequestConfig<T>
): Promise<BaseDataStruct<D>> => {
  return serves(params);
};

// 将serves抛出去
export default requestPlus;
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

3.其他相关

axios-retry是一个基于axios的插件，能够在请求超时或者失败时自动重试请求，从而提高请求的稳定性。

它是一个轻量级的插件，只有不到20行的代码，而且可以很方便地通过npm安装和使用。

1、首先需要安装axios和axios-retry：

 npm install axios axios-retry
1

2、在代码中导入axios和axios-retry：

import axios from 'axios';
import axiosRetry from 'axios-retry';
1
2

3、将axiosRetry作为axios的一个拦截器，并设置重试次数和重试条件：

axiosRetry(axios, {
  retries: 3,
  retryCondition: (error) => {
    return error.code === 'ECONNABORTED' || !error.response;
  }
})
1
2
3
4
5
6

这里我们设置了重试次数为3次，当请求超时或者没有响应时，都会触发重试。

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3,
  retryCondition: (error) => {
    return error.code === 'ECONNABORTED' || !error.response;
  }
});

axios.get('/user')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));
1
2
3
4
5
6
7
8
9
10
11
12
13