快捷導(dǎo)航

vuex+axios+element-ui實(shí)現(xiàn)頁面請求loading操作示例

更新時間：2020年02月02日 10:09:06 作者：不想寫代碼的碼農(nóng)

這篇文章主要介紹了vuex+axios+element-ui實(shí)現(xiàn)頁面請求loading操作,結(jié)合實(shí)例形式分析了vuex+axios+element-ui實(shí)現(xiàn)頁面請求過程中l(wèi)oading遮罩層相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下

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

前言

我們在平常寫項(xiàng)目的時候，發(fā)請求的時候肯定會習(xí)慣用一個 loading 遮罩層來防止用戶在沒拿到數(shù)據(jù)之前誤操作

如果是頁面同時只發(fā)送一個請求，那么無論是在組件中或者是在 axios 插件中進(jìn)行請求和響應(yīng)攔截都可以做到

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

因?yàn)樽钕韧瓿傻恼埱髸阉姓埱蟮?loading 都給關(guān)閉

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

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

今天就用這篇文章來介紹下我在項(xiàng)目中是怎么應(yīng)對這種情況的

一、用到的東西

element-ui 的 loading
vuex 的狀態(tài)管理
axios 的請求攔截和響應(yīng)攔截

二、實(shí)現(xiàn)

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

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

import Vue from "vue";
import Vuex from "vuex";
import { Loading } from "element-ui";
Vue.use(Vuex);
const state = {
 //請求計(jì)數(shù)
 apiCount: 0,
 //loading實(shí)例
 loadingInstance: null,
};
const mutations = {
 /* 打開Loading */
 startLoading(state, msg) {
  state.loadingInstance = Loading.service({
   lock: true,
   text: msg ? msg : "加載中...",
   background: "rgba(0, 0, 0, 0.7)"
  });
 },
 /* 關(guān)閉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;

好了，這樣就做到了請求的時候自動打開 loading，所有的請求結(jié)束才會關(guān)閉 loading 了，無論同時多少個請求都可以

希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: