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;
 

3.其他相关

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

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

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

 npm install axios axios-retry

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

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

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

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

这里我们设置了重试次数为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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 3 + TypeScript 使用 Axios 进行网络请求的步骤如下: 1. 安装 Axios 库:在项目中安装 Axios 库,可以使用命令 `npm install axios --save` 或者 `yarn add axios`。 2. 创建 TypeScript 类型:定义 Axios 返回数据的类型,例如: ```typescript interface ResponseData { code: number; message: string; data: any; } ``` 3. 创建 Axios 实例:在 Vue 组件中创建 Axios 实例,例如: ```typescript import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; import { ResponseData } from './types'; class ApiService { private readonly axiosInstance: AxiosInstance; constructor() { this.axiosInstance = axios.create({ baseURL: 'https://example.com/api', }); } async get<T>(url: string, config?: AxiosRequestConfig): Promise<T> { const response: AxiosResponse<ResponseData<T>> = await this.axiosInstance.get<ResponseData<T>>(url, config); return response.data.data; } async post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> { const response: AxiosResponse<ResponseData<T>> = await this.axiosInstance.post<ResponseData<T>>(url, data, config); return response.data.data; } } export default new ApiService(); ``` 4. 使用 Axios 实例:在 Vue 组件中使用 Axios 实例进行网络请求,例如: ```typescript import { defineComponent, ref } from 'vue'; import ApiService from './apiService'; import { User } from './types'; export default defineComponent({ setup() { const users = ref<User[]>([]); const fetchUsers = async () => { users.value = await ApiService.get<User[]>('/users'); }; return { users, fetchUsers, }; }, }); ``` 相关问题: 1. 什么是 TypeScript? 2. 什么是 Axios? 3. 如何在 Vue 中使用 Axios 发送网络请求? 4. 如何处理 Axios 返回的数据?
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值