vuex+axios+element-ui如何實(shí)現(xiàn)頁(yè)面請(qǐng)求loading操作示例

小編給大家分享一下vuex+axios+element-ui如何實(shí)現(xiàn)頁(yè)面請(qǐng)求loading操作示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司專(zhuān)注于卓資企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),電子商務(wù)商城網(wǎng)站建設(shè)。卓資網(wǎng)站建設(shè)公司,為卓資等地區(qū)提供建站服務(wù)。全流程按需制作網(wǎng)站，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

前言

我們?cè)谄匠?xiě)項(xiàng)目的時(shí)候，發(fā)請(qǐng)求的時(shí)候肯定會(huì)習(xí)慣用一個(gè) loading 遮罩層來(lái)防止用戶在沒(méi)拿到數(shù)據(jù)之前誤操作

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

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

因?yàn)樽钕韧瓿傻恼?qǐng)求會(huì)把所有請(qǐng)求的 loading 都給關(guān)閉

舉個(gè)例子，第一個(gè)請(qǐng)求的響應(yīng)時(shí)間為 3s ，第二個(gè)請(qǐng)求的響應(yīng)時(shí)間為 1s ，兩個(gè)同時(shí)請(qǐng)求的時(shí)候，loading 會(huì)開(kāi)始

但是當(dāng) 1s 后第二個(gè)請(qǐng)求完成后，會(huì)直接關(guān)閉 loading，但是此時(shí)第一個(gè)請(qǐng)求還沒(méi)完成，所有這樣肯定是不行的

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

一、用到的東西

1. element-ui 的 loading

2. vuex 的狀態(tài)管理

3. axios 的請(qǐng)求攔截和響應(yīng)攔截

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

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

store.js 代碼（用來(lái)管理 vuex）

import Vue from "vue";
import Vuex from "vuex";
import { Loading } from "element-ui";
Vue.use(Vuex);
const state = {
 //請(qǐng)求計(jì)數(shù)
 apiCount: 0,
 //loading實(shí)例
 loadingInstance: null,
};
const mutations = {
 /* 打開(kāi)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();
 },
 /* 更新請(qǐng)求線程池 */
 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;

好了，這樣就做到了請(qǐng)求的時(shí)候自動(dòng)打開(kāi) loading，所有的請(qǐng)求結(jié)束才會(huì)關(guān)閉 loading 了，無(wú)論同時(shí)多少個(gè)請(qǐng)求都可以

以上是“vuex+axios+element-ui如何實(shí)現(xiàn)頁(yè)面請(qǐng)求loading操作示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)題目：vuex+axios+element-ui如何實(shí)現(xiàn)頁(yè)面請(qǐng)求loading操作示例
分享網(wǎng)址：http://www.muchs.cn/article48/jpjiep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、、電子商務(wù)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)