解决axios失败重试插件axios-retry和错误消息弹窗重复触发的问题

前言

一直很头疼axios的失败重试插件axios-retry会重复调用axios自定义的响应错误拦截器，而我们常常会在这个拦截器中编写一个用于弹出错误消息的弹窗，这就导致了一个问题：

如果我们失败会重试3次，那么全部都失败的话就会触发4次响应错误拦截器，然后就会导致触发4次错误消息的弹窗，非常蛋疼。

为此常常需要考虑怎么避免重复触发的问题，常见的一些做法比如通过自定义的拦截器接受的error对象上的config属性，添加一个计数器来处理，如果计数器大于等于3的话就可以触发消息弹窗。

本来axios-retry插件本身就会在config上注入一个计数的属性和总次数，但是也没法用，实际测试中发现，被触发的响应错误拦截器是在重试3次完后再连续触发的，它不是重试一次触发一次，贼头疼，没法直接用来做判断条件。

所以只能自己通过axios-retry的retryCondition方法，每次重试前控制一个自定义的计数属性，然后再去响应错误拦截器中拿去，再判断，从而避免消息弹窗重复触发。

这种方法以前也弄过，做起来非常复杂，而且不易维护，不了解的人从代码中看到了一堆很奇怪的逻辑。

最近重新封装了一个axios，找到了一个非常简易且好维护的方式。

有时候也不能说它触发4次是有问题的，因为确实发起了请求，理论上讲触发错误拦截器也不是不行，特别在后端发起请求需要记录log日志时，这又变得非常有用，只能说环境不同，对应的问题反倒是最优解。

教程

旧代码

javascript
复制代码
import axios from "axios";
import axiosRetry from "axios-retry";
import { ElNotification } from "element-plus";

const instance = axios.create();

// 先激活插件
axiosRetry(instance);

// 再添加拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
});

instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么

  //错误消息弹窗
  ElNotification({
    type: "error",
    title: "请求失败",
    message: "错误消息"
  });

  return Promise.reject(error);
});

当请求发生5xx的状态错误时，就会触发4次消息弹窗。