页面同时发生多个请求，在 axios中对 loading进行统一处理（Vue+Element-ui）

最新推荐文章于 2024-07-11 13:45:52 发布

Alice_hhu

最新推荐文章于 2024-07-11 13:45:52 发布

阅读量1.7k

点赞数 1

分类专栏：前端 Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_40615155/article/details/120704462

版权

Vue 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

前端

9 篇文章 2 订阅

订阅专栏

本文探讨了一种全局loading策略，通过Element UI 的 Loading 服务管理和并发请求控制，以减少请求过多导致的页面卡顿，优化了用户的交互体验。通过设置请求和响应拦截器，确保在所有请求结束前显示并隐藏loading。

摘要由CSDN通过智能技术生成

全局 loading，在页面所有请求结束之前，loading会一直存在，粗暴地禁止了用户在所有请求结束之前有别的请求操作，如果请求过多，或者其中部分请求的响应速度慢，会影响页面的交互体验

import axios from 'axios';
import { Message, MessageBox, Loading } from 'element-ui';

/* element 服务 loading */
let loading; // 定义loading变量
function startLoading() { // 使用Element loading-start 方法
  loading = Loading.service({
    lock: true,
    text: '',
    // background: 'rgba(255, 255, 255, 0)', // 不加背景，避免与路由入场动画叠加会闪烁
  });
}
function endLoading() { // 使用Element loading-close 方法
  loading.close();
}

// showFullScreenLoading() tryHideFullScreenLoading() 将同一时刻的请求合并
// 声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1
let needLoadingRequestCount = 0;
export function showFullScreenLoading() {
  if (needLoadingRequestCount === 0) {
    startLoading();
  }
  needLoadingRequestCount += 1;
}
// 调用 tryHideFullScreenLoading()方法，needLoadingRequestCount-1。needLoadingRequestCount为 0时，结束 loading
export function tryHideFullScreenLoading() {
  if (needLoadingRequestCount <= 0) return;
  needLoadingRequestCount -= 1;
  if (needLoadingRequestCount === 0) {
    endLoading();
  }
}

// 请求拦截器
function setRequestInterceptor(http = axios) {
  // http request 拦截器
  http.interceptors.request.use(
    (config) => {
	  const $config = config;
	  ...
	  // request拦截器中调用 showFullScreenLoading()
	  showFullScreenLoading();
	  return $config;
	},
    (error) => Promise.reject(error),
  );
}

// 响应拦截器
function setResponseInterceptor(http = axios) {
  // http response 拦截器
  http.interceptors.response.use(
    (response) => {
      // response拦截器中调用 tryHideFullScreenLoading()
      tryHideFullScreenLoading();
      return responseInterceptor(response);
    },
    (error) => {
      // 如果接口调用报错，走不到 response中，需要在error中关闭loading
      // 所以还是统一在回调中关闭 loading，而不仅仅在 response对应的拦截函数中
      tryHideFullScreenLoading();
      return Promise.reject(error);
    },
  );
}