本文實例講述了vuex+axios+element-ui實現頁面請求loading操作。分享給大家供大家參考，具體如下：

前言

我們在平常寫項目的時候，發請求的時候肯定會習慣用一個 loading 遮罩層來防止用戶在沒拿到數據之前誤操作

如果是頁面同時只發送一個請求，那么無論是在組件中或者是在 axios 插件中進行請求和響應攔截都可以做到

但是，當一個頁面同時要發送多個請求的時候，這么做顯然就不行了

因為最先完成的請求會把所有請求的 loading 都給關閉

舉個例子，第一個請求的響應時間為 3s ，第二個請求的響應時間為 1s ，兩個同時請求的時候，loading 會開始

但是當 1s 后第二個請求完成后，會直接關閉 loading，但是此時第一個請求還沒完成，所有這樣肯定是不行的

今天就用這篇文章來介紹下我在項目中是怎么應對這種情況的

一、用到的東西

element-ui 的 loading vuex 的狀態管理 axios 的請求攔截和響應攔截

二、實現

其實這個思路很簡單，就是通過 vuex 來管理請求的個數，假如用 apiCount 這個變量來代表請求的個數，每次請求的時候打開 loading 并且 apiCount  加一，每次響應完成或者失敗的時候都讓 apiCount 減一，并且檢測 apiCount 變量的值，當為 apiCount=0 的時候，就關閉 loading 就可以了，代碼如下：

store.js 代碼（用來管理 vuex）

import Vue from "vue";import Vuex from "vuex";import { Loading } from "element-ui";Vue.use(Vuex);const state = { //請求計數 apiCount: 0, //loading實例 loadingInstance: null,};const mutations = { /* 打開Loading */ startLoading(state, msg) {  state.loadingInstance = Loading.service({   lock: true,   text: msg ? msg : "加載中...",   background: "rgba(0, 0, 0, 0.7)"  }); }, /* 關閉loading */ closeLoading(state) {  state.loadingInstance.close(); }, /* 更新請求線程池 */ updateApiCount(state, handle) {  if (handle == "add") {   state.apiCount++;   this.commit("startLoading");  } else {   state.apiCount--;   if (state.apiCount <= 0) {    this.commit("closeLoading");   }  } }};const store = new Vuex.Store({ state, mutations});export default store;

request.js 代碼（封裝 axios 的文件）

import axios from "axios";import { Message } from "element-ui";import store from "../store/index";import router from "../router/index";const service = axios.create({ baseURL: process.env.VUE_APP_BASE_URL, timeout: 0});service.interceptors.request.use( config => {  store.commit("updateApiCount", "add");  return config; }, error => {  store.commit("updateApiCount", "sub");  Promise.reject(error); });service.interceptors.response.use( response => {  store.commit("updateApiCount", "sub");  return response.data; }, error => {  store.commit("updateApiCount", "sub");  return Promise.reject(error); });export default service;