封装axios，避免loading闪烁，vue3，vant

最新推荐文章于 2024-08-05 15:02:59 发布

弱鸡如我

最新推荐文章于 2024-08-05 15:02:59 发布

阅读量899

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_37152533/article/details/128930712

版权

文章介绍了在Vue应用中，如何利用axios的拦截器结合vant的loading组件，以及防抖函数来优化请求显示。通过统计loading请求次数和使用函数防抖，确保loading不会频繁闪烁，并在所有相关请求完成后才关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

连续多次请求，loading防止闪烁，避免loading连续关闭开启

方法：数量统计，函数防抖，二次判断

import axios, { type AxiosRequestConfig, type AxiosResponse } from 'axios';
import { nextTick } from 'vue';
import {
  showLoadingToast,
} from 'vant';

import { useDebounceFn } from '@vueuse/core';

let loadingReqCount = 0; // 统计loading个数
let loadingInstance: any; // 正在loading的实例

function showLoading() {
  if (loadingReqCount === 0 && !loadingInstance) {
    loadingInstance = showLoadingToast({
      message: '加载中...',
      forbidClick: true, // 不可点击关闭
      duration: 0, // 无限随间
    });
  }
  loadingReqCount++;
}

function closeLoading() {
  loadingReqCount--;
  loadingReqCount = Math.max(loadingReqCount, 0); // 保证大于等于0
  if (loadingReqCount === 0 || loadingInstance) {
    hideLoading();
  }
}

// 关闭loading防抖，延迟300ms执行，合并该时延内的间断请求。
const hideLoading = useDebounceFn(() => {
  // loadingReqCount 需要二次判断，因为后续接口调用会增加这个值，就不能直接关闭
  if (loadingReqCount === 0) {
    loadingInstance.close();
    loadingInstance = null;
  }
}, 300);

// 请求拦截器
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    showLoading();
    ****
  },
  error => {
    closeLoading();
    ****
  },
);

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    ****
    closeLoading();
    ****
  },
  error => {
   ****
    closeLoading();
    ****
  },
);

// 导出 axios 实例
export default service;