Axios は、Vue でのアニメーションの読み込みのグローバル カプセル化を要求します

 サービスとして呼び出される全画面読み込みはシングルトンです。前の全画面読み込みが閉じる前に全画面読み込みが再度呼び出された場合、新しい読み込みインスタンスは作成されませんが、既存の全画面読み込みのインスタンスは作成されます。返されるため、グローバルにカプセル化します。 Counting メソッドを使用して、読み込みを閉じるかどうかを決定します。

また、ローカルの現実の読み込みアニメーションは Loading.service ターゲットで構成できることにも注意してください。これは、読み込みアニメーションの全画面表示を必要としない実際のプロジェクトに適しています。

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_Xiao Chu の Getting Rich Today のブログで読み込みを制御する方法 - CSDN ブログを参照してください。