vue3+vant+axios失败重连+取消重复请求取消请求

提取重复请求

//utils/failedReconnection.js
export const failedReconnection=(error,axios)=> {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  let config = error.config;
  // 如果配置不存在或未设置重试选项，则拒绝
  // && 如果前面是false，后面的逻辑就不执行，前面逻辑是true的话就往后执行，只有&& 前面和后面的逻辑都是对的，才能继续。
  // || 如果前面逻辑是false的话就走后面，如果前面的逻辑是true的话，就不执行后半部分的代码了。
  if (!config || !config.retry) return Promise.reject(error);
  // 设置变量以跟踪重试次数
  config.__retryCount = config.__retryCount || 0;
  // 判断是否超过总重试次数
  if (config.__retryCount >= config.retry) {
    // 返回错误并退出自动重试
    return Promise.reject(error);
  // 增加重试次数
  config.__retryCount += 1;
  console.log(config, "config ffff", config.url);
  //打印当前重试次数
  console.log(config.url + " 自动重试第" + config.__retryCount + "次");
  // 创建新的Promise
  var backoff = new Promise(function (resolve) {
    setTimeout(function () {
      resolve();
    }, config.retryDelay || 1000);
  // 返回重试请求
  return backoff.then(function () {
    return axios(config);
在utils/require.js中进行修改




    

import axios from "axios";
import { showToast } from "vant";
import { failedReconnection } from "./failedReconnection";
const https = axios.create({
  baseURL: "http://47.93.101.203/api/",
  timeout: 1000,
// 重试次数，共请求2次
https.defaults.retry = 2;
// 请求的间隙
https.defaults.retryDelay = 1000;
// 添加请求拦截器
https.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    let token =
      (JSON.parse(localStorage.getItem("userInfo")) &&
        JSON.parse(localStorage.getItem("userInfo")).token) ||
    if (token != "") {
      config.headers["Authori-zation"] = "Bearer " + token;
    return config;
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
// 添加响应拦截器
https.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    if (response.data.status == 410000) {
      //登录过期跳转登录页
      showToast("登录过期请登录");
      setTimeout(() => {
        location.href = "/login";
      }, 500);
    return response.data;
  function (error) {
    // 对响应错误做点什么
   return failedReconnection(error, https);
阻止重复请求，取消请求
//修改utils/request.js
import axios from "axios";
import { showToast } from "vant";
import { failedReconnection } from "./failedReconnection";
const https = axios.create({
  baseURL: "http://47.93.101.203/api/",
  timeout: 1000,
//请求列表
 let reqList = [];
// 重试次数，共请求2次
https.defaults.retry = 2;
// 请求的间隙
https.defaults.retryDelay = 1000;
// 添加请求拦截器
https.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    let token =
      (JSON.parse(localStorage.getItem("userInfo")) &&
        JSON.parse(localStorage.getItem("userInfo")).token) ||
    if (token != "") {
      config.headers["Authori-zation"] = "Bearer " + token;
    config.cancelToken = new axios.CancelToken(function (c) {
      cancel = c;
     stopRepeatRequest(reqList, config.url, cancel, `${config.url} 请求被中断`)
    return config;
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
// 添加响应拦截器
https.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    if (response.data.status == 410000) {
      //登录过期跳转登录页
      showToast("登录过期请登录");
      setTimeout(() => {
        location.href = "/login";
      }, 500);
    return response.data;
  function (error) {
    // 对响应错误做点什么
     // 增加延迟，相同请求不得在短时间内重复发送
    setTimeout(() => {
      allowRequest(reqList, error.config.url);
    }, 2000);
   return failedReconnection(error, https);
 * 阻止重复请求
 * @param {array} reqList - 请求缓存列表
 * @param {string} url - 当前请求地址
 * @param {function} cancel - 请求中断函数
 * @param {string} errorMessage - 请求中断时需要显示的错误信息
 const stopRepeatRequest = function (reqList, url, cancel, errorMessage) {
  const errorMsg = errorMessage || "";
  for (let i = 0; i < reqList.length; i++) {
    if (reqList[i] === url) {
      cancel(errorMsg);
      return;
  reqList.push(url);
 * 允许某个请求可以继续进行
 * @param {array} reqList 全部请求列表
 * @param {string} url 请求地址
 const allowRequest = function (reqList, url) {
  for (let i = 0; i < reqList.length; i++) {
    if (reqList[i] === url) {
      reqList.splice(i, 1);
      break;
export default https;
提取 取消重复请求方法
//utils/stopRepeatRequest.js
export let reqList = [];
 * 阻止重复请求
 * @param {array} reqList - 请求缓存列表
 * @param {string} url - 当前请求地址
 * @param {function} cancel - 请求中断函数
 * @param {string} errorMessage - 请求中断时需要显示的错误信息
export const stopRepeatRequest = function (reqList, url, cancel, errorMessage) {
  const errorMsg = errorMessage || "";
  for (let i = 0; i < reqList.length; i++) {
    if (reqList[i] === url) {
      cancel(errorMsg);
      return;
  reqList.push(url);
 * 允许某个请求可以继续进行
 * @param {array} reqList 全部请求列表
 * @param {string} url 请求地址
export const allowRequest = function (reqList, url) {
  for (let i = 0; i < reqList.length; i++) {
    if (reqList[i] === url) {
      reqList.splice(i, 1);
      break;
修改utils/require.js
import axios from "axios";
import { showToast } from "vant";
import { failedReconnection } from "./failedReconnection";
import { reqList, stopRepeatRequest, allowRequest,} from "./stopRepeatRequest.js";
const https = axios.create({
  baseURL: "http://47.93.101.203/api/",
  timeout: 1000,
//请求列表
// 重试次数，共请求2次
https.defaults.retry = 2;
// 请求的间隙
https.defaults.retryDelay = 1000;
// 添加请求拦截器
https.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    let token =
      (JSON.parse(localStorage.getItem("userInfo")) &&
        JSON.parse(localStorage.getItem("userInfo")).token) ||
    if (token != "") {
      config.headers["Authori-zation"] = "Bearer " + token;
    config.cancelToken = new axios.CancelToken(function (c) {
      cancel = c;
     stopRepeatRequest(reqList, config.url, cancel, `${config.url} 请求被中断`)
    return config;
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
// 添加响应拦截器
https.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    if (response.data.status == 410000) {
      //登录过期跳转登录页
      showToast("登录过期请登录");
      setTimeout(() => {
        location.href = "/login";
      }, 500);
    return response.data;
  function (error) {
    // 对响应错误做点什么
     // 增加延迟，相同请求不得在短时间内重复发送
    setTimeout(() => {
      allowRequest(reqList, error.config.url);
    }, 2000);
   return failedReconnection(error, https);
提取拦截器
//utils/interceptors.js
import { failedReconnection } from "./failedReconnection";
import {
  reqList,
  stopRepeatRequest,
  allowRequest,
} from "./stopRepeatRequest.js";
import request from "./request.js";
let { instance, axios } = request;
let time = 1000;
// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    console.log(config.retryDelay, "config.retryDelay");
    if (config.retryDelay < time) {
      config.retryDelay = time + 500;
    // 在发送请求之前做些什么
    let cancel;
    // 设置cancelToken对象
    config.cancelToken = new axios.CancelToken(function (c) {
      cancel = c;
    // 阻止重复请求。当上个请求未完成时，相同的请求不会进行
    stopRepeatRequest(reqList, config.url, cancel, `${config.url} 请求被中断`);
    return config;
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    setTimeout(() => {
      allowRequest(reqList, response.config.url);
    }, time);
    let { data } = response;
    return data;
  function (error) {
    if (axios.isCancel(error)) {
      return Promise.reject(error.message);
    // 增加延迟，相同请求不得在短时间内重复发送
    setTimeout(() => {
      allowRequest(reqList, error.config.url);
    }, time);
    return failedReconnection(error, instance);
export default instance;
修改utils/require.js
import axios from "axios";
let baseURL = import.meta.env.VITE_BSEL_URL;
const instance = axios.create({
  baseURL,
// 重试次数，共请求2次
instance.defaults.retry = 2;
// 请求的间隙
instance.defaults.retryDelay = 1000;
export default { instance, axios };
复制代码
  分类：




    
 前端
 
  
   相关推荐
   
      
     koa的基本配置和连接数据库
 koa需要安装那些插件，koa的基本配置，koa怎么连接数据库，怎么去优化请求的数据，连接数据库需要那些插件
  1120
 




    
 
      
     vue2中如何使用Echarts
 vue中如何使用Echarts，使用Echarts需要安装什么插件，vue中怎么改变Echarts中的数据
  1030
 
 
      
     koa的post请求,分页接口,token验证,登录注册，图片验证码
 koa的post请求，get请求，token验证，图片验证码，登录注册接口，登录存token,请求接口必须有token
  727
 
 
      
     Vue的生命周期和父子，兄弟组件传值
 vue的生命周期 父子，兄弟之间传值，vue生命周期的应用场景，vue父子传值和兄弟传值的注意事项。
  472
 
 
      
     创建Vue项目和Vue的基本配置
 Vue项目的创建 创建项目的区别 vue文件的作用创建项目的三种方式 查看node版本 修改启动命令
  225
 
 
      
     vue中的轮播图，购物车
 vue轮播图,通过vuex写vue购物车，全选，单选，删除，总数量，总价格，小计，刷新页面不变，全选
  214
 




    
 
        ChatGPT
        Visual Studio Code
      
     我在 vscode 插件里接入了 ChatGPT，解决了代码变量命名的难题
 前一段时间在做一些财务相关的需求时，变量的命名成了一个难题，一个列表十几二十个字段，而且大部分是那种看着中文都不知道是什么意思的抽象名词。
  482
 
 
        山水有轻音
        Vue.js
      
     vue+Microapp实现微前端
 本文实现的是vite+vue3+Microapp为主应用，vue2+element为子应用的微前端 一、创建项目 1. 创建vite+vue3+Microapp主应用： 2. 创建vue2+eleme
  360
 
 
        iwhao
        Node.js
      
     还在为管理node版本发愁吗？快来用用nvm 吧！
 NVM（Node Version Manager）是一个用于管理 Node.js 版本的工具。它允许在同一台计算机上安装和切换多个 Node.js 版本...
  409
 
 
        Gopal
      
     前端面试系列初章——HTML & CSS 篇
 前阵子总结了一下前端面试相关的知识，有八股文，有算法。分享给大家！大家也可以关注一下专栏，后面会陆续发表相关文章！
  1236
 
 
        纯爱掌门人
      
 10小时前
 
      
     从零开始，打造一款属于自己的JavaScript编程语言




    
 自定义编程语言的提供具有巨大的价值和创造力。通过掌握 JavaScript 的基础知识，并遵循构建编程语言的步骤，可以创建一个吸引人的、自用的和实用的 JavaScript 编程语言......
  631
 
 
      
 11小时前
 
        Vue.js
      
     最佳实践，Vue渲染富文本如何隔离样式【金石计划4.0】
 大家好！今天带来的是一份渲染富文本的最佳实践（Vue3版）。 可能有些人会说：不就是渲染富文本吗，直接v-html不就行了吗。 v-html是可以渲染，但是v-html无法做到样式隔离，它渲染的内容可
  541
 
 
        JavaScript
        Electron
      
     Electron+Vite快速构建Vue3桌面应用
 随之Vite的不断地受欢迎，大家应该都在使用了，最近公司需要开发一个桌面的视频播放器，这就涉及到了Electron,它可以帮助我们快速的开发一个桌面级别的应用
  739
 
 
        windyrain
        React.js
      
     2023 了，不会还要做官网吧！
 我正在参加「掘金·启航计划」 随着 AIGC 的兴起，移动互联网仿佛一瞬间也不香了，吃到红利的头部应用还在稳坐泰山，后起者在各种 xx 已死的声浪中，不知所措，信心尽失。流量的走势左右了太多人的思绪，
  7747
 
 
        CoderHing
      
 11小时前
 
        React.js
      
     React | 初尝禁果之React
 “我正在参加「掘金·启航计划」” 一、React的介绍和特点 React的介绍 React是什么? React: 用于构建用户界面的JavaScript库; React的特点 - 声明式编程 声明式编
  574
 




    
 
        EricLee
      
 12小时前
 
      
     聊聊自己进入大厂前，创业公司的经历，我学到了什么？
 工作第一年：误打误撞加入创业公司。在来到字节之前，经历了校招被毁约，来到了创业公司，在创业公司工作了一年，作息是大小周，早 9 晚 9 ，对我来说这是一段比较记忆深刻的经历，教会了我很多互联网行
  370
 
 
        老李code
      
 10小时前
 
        Flutter
        Android
      
     Flutter中如何获取Text截断后的字符串
 当Text文本设置maxLins属性将文本强制截断之后，Text的承载字符串是截断前？还是截断后的呢？我们该如何获取截断后的字符串呢？ 答案是：截断前,截断字符串
  198
 
 
      
 14小时前
 
      
     毕业在即，要准备的东西好多，找不到方向怎么办？
 最近找一些准毕业生聊了聊，想听听当下大家都有哪些就业困扰，聊完发现即便已经过了十年，我当年遇到的问题依然还是完完整整的落在了他们的头上，相差无几，仿佛一个轮回
  574
 
 
      
 12小时前
 
        JavaScript
      
     第五章 JavaScript进阶
 第五章 JavaScript进阶包含： 值类型与引用类型，原型链与继承，This关键字，闭包，执行上下文
  562
 
 
      
 13小时前
 
        Node.js
        SQLite
      
     CMS系统开发-我想开发一个CMS
 这是CMS系统开发的第一篇文章，我想开发一个CMS。 市面上优秀的内容管理系统有很多，大多数都是基于PHP+MySQL开发的，他们功能很强大，适用场景也很广。而我想开发一个比较小型的CMS，它拥有CM
  648
 
 
          
 
 
  
 
 友情链接：
 
        javaee的发展与前景
        mysql 查找表行数
提取重复请求

阻止重复请求，取消请求

提取 取消重复请求方法

提取拦截器

提取取消重复请求方法
