vue中axios请求全局封装loading动画

 以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例，所以我们全局封装的时候采用计数的方式确定是否关闭loading.

还需要注意的是Loading.service target里面可以配置局部现实加载动画，适应于实际项目中不需要全屏显示加载动画

import axios from "axios";
import { Message } from 'element-ui';
import { Loading } from "element-ui";
import ipConfig from "./ip-config";
let requestCount = 0
let loadingInstance = null
function logout() {
     localStorage.setItem("token2", undefined);
     localStorage.setItem("loginTime2", Date.now());
     localStorage.setItem("userName2", "");
     window.location.href = "/";
}
const service = axios.create({
     baseURl: ipConfig.baseIp,
     timeout: 30 * 1000,//设置6分钟
});
//请求拦截器
service.interceptors.request.use(config => {
     //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
     if (requestCount == 0) {
          loadingInstance = Loading.service({
               lock: true,
               target: document.querySelector('.base-popup-content'),
               text: "",
               background: "rgba(0,0,0,0.8)",
          });
     }
     // 每次请求计数+1
     requestCount += 1;
     config.headers = {
          'Content-Type': 'application/json;blob' //配置请求头
     }
     const token = localStorage.getItem('token2')
     if (token) {
          config.headers['Authorization'] = 'Bearer ' + token
     }
     return config
}, error => {
     requestCount -= 1;
     // 当加载实例存在且计数小于等于0的时候把加载效果关闭
     if (requestCount <= 0 && loadingInstance) {
          requestCount = 0;
          loadingInstance.close();
     }
     Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(response => {
     // 当请求返回的时候计数-1
     requestCount -= 1;
     // 当加载实例存在且计数小于等于0的时候把加载效果关闭
     if (requestCount <= 0 && loadingInstance) {
          requestCount = 0;
          loadingInstance.close();
     }
     const code = response.data.code || 200;
     if (code === 401) {
          Message.error('无效的会话，或者会话已过期，请重新登录。')
          logout()
     } else if (code !== 200) {
     } else {
          return response.data.data ? response.data.data : response.data
     }

}, error => {
     /***** 接收到异常响应的处理开始 *****/
     // 当响应出现异常的时候计数-1
     requestCount -= 1;
     // 当加载实例存在且计数小于等于0的时候把加载效果关闭
     if (requestCount <= 0 && loadingInstance) {
          requestCount = 0;
          loadingInstance.close();
     }
     if (error && error.response) {
          // 1.公共错误处理
          // 2.根据响应码具体处理
          switch (error.response.status) {
               case 400:
                    error.message = '错误请求'
                    break;
               case 401:
                    error.message = '未授权，请重新登录'
                    logout()
                    break;
               case 403:
                    error.message = '拒绝访问'
                    break;
               case 404:
                    error.message = '请求错误,未找到该资源'
                    // window.location.href = "/NotFound"
                    break;
               case 405:
                    error.message = '请求方法未允许'
                    break;
               case 408:
                    error.message = '请求超时'
                    break;
               case 500:
                    error.message = '服务器端出错'
                    break;
               case 501:
                    error.message = '网络未实现'
                    break;
               case 502:
                    error.message = '网络错误'
                    break;
               case 503:
                    error.message = '服务不可用'
                    break;
               case 504:
                    error.message = '网络超时'
                    break;
               case 505:
                    error.message = 'http版本不支持该请求'
                    break;
               default:
                    error.message = `连接错误${error.response.status}`
          }
     } else {
          // 超时处理
          if (JSON.stringify(error).includes('timeout')) {
               Message.error('服务器响应超时')
          }
          error.message = '服务器响应超时'
     }
     /***** 处理结束 *****/
     //如果不需要错误处理，以上的处理过程都可省略
     return Promise.resolve(error.response)
})
export default service 

更详细的方法可以参照如何在 Axios 中去控制 Loading_小储今天暴富了的博客-CSDN博客