axios 请求失败后自动重新请求（axios-retry）

1.安装axios-retry

在这之前也需要安装axios

npm install axios --save
npm install axios-retry

2.引入模块

在untils文件夹中创建request.js文件，引入axios和axios-retry模块

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

3.创建axios实例

const service = axios.create({

  baseURL: "/api/v1.0",//配置接口地址

  timeout: 20*1000,//请求超时时间，单位毫秒（这里配置的20秒）

})

4.配置axios-retry

axiosRetry(service, {//传入axios实例
  retries: 3,              // 设置自动发送请求次数
  retryDelay: (retryCount) => {
    return retryCount * 1500;      // 重复请求延迟（毫秒）
  },
  shouldResetTimeout: true,       //  重置超时时间
  retryCondition: (error) => {
    //true为打开自动发送请求，false为关闭自动发送请求
    if (error.message.includes('timeout') || error.message.includes("status code")) {
      return true;
    } else {
      return false;
    };
  }
});

5.配置axios请求方式

这里用到了qs，需要引入，qs是内部模块，不需要安装

import qs from "qs";
const http = {
  get(url, params) {
    const config = {
      method: 'get',
      url: url
    }
    if (params) config.params = params;
    return service(config);
  },
  post(url, params) {
    const config = {
      method: 'post',
      url: url
    }
    if (params) config.data = qs.stringify(params)
    return service(config)
  }
}

导出，方便请求接口的时候使用

export default http;

6.其他配置

request.js中还可以配置请求拦截器以及响应拦截器

7.引入使用

现在request.js已经配置好了，只需要引入文件就可以使用

我们在src下再创建一个文件夹，api，用来存放请求接口函数，里面可以按照接口类型分成多个文件

现在我们封装一个登录的请求接口，首先引入之前配置好的request.js

import  http  from "@/untils/request"
export function login(params) {
    return http.get(`/login`，params); 
}

我们再在登录页面login.vue中引入使用

import * as API_User from "@/api/user";  //也可以按需引入import {login} from "@/api/user";
export default {
  data() {
    return {
      username: "",
      password: "",
      verificationcode："",
    };
  },
  methods: {
    submit(){
        const {username,  password,verificationcode}=this;//要用到的变量解构出来
        API_User.login({ username,  password,verificationcode }).then((res) => {
             console.log(res);//返回的数据
        });
    }
  },
}

现在我们请求接口只需要调用api中的一个函数就可以实现了，同时如果请求失败也会进行多久重新请求，大功告成