vuex+axios+element-ui實(shí)現(xiàn)頁(yè)面請(qǐng)求loading操作示例
本文實(shí)例講述了vuex+axios+element-ui實(shí)現(xiàn)頁(yè)面請(qǐng)求loading操作。分享給大家供大家參考,具體如下:
前言
我們?cè)谄匠?xiě)項(xiàng)目的時(shí)候,發(fā)請(qǐng)求的時(shí)候肯定會(huì)習(xí)慣用一個(gè) loading 遮罩層來(lái)防止用戶(hù)在沒(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ì)這種情況的
一、用到的東西
- element-ui 的 loading
- vuex 的狀態(tài)管理
- 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)求都可以
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
element-ui自定義表格如何給input雙向綁定數(shù)據(jù)
這篇文章主要介紹了element-ui自定義表格如何給input雙向綁定數(shù)據(jù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue學(xué)習(xí)筆記之Vue中css動(dòng)畫(huà)原理簡(jiǎn)單示例
這篇文章主要介紹了vue學(xué)習(xí)筆記之Vue中css動(dòng)畫(huà)原理,結(jié)合簡(jiǎn)單實(shí)例形式分析了Vue中css樣式變換動(dòng)畫(huà)效果實(shí)現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下2020-02-02Vue3中動(dòng)態(tài)修改樣式與級(jí)聯(lián)樣式優(yōu)先順序圖文詳解
在項(xiàng)目中,我們時(shí)常會(huì)遇到動(dòng)態(tài)的去綁定操作切換不同的CSS樣式,下面這篇文章主要給大家介紹了關(guān)于Vue3中動(dòng)態(tài)修改樣式與級(jí)聯(lián)樣式優(yōu)先順序的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04Vue.js的動(dòng)態(tài)組件模板的實(shí)現(xiàn)
這篇文章主要介紹了Vue.js的動(dòng)態(tài)組件模板的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件示例詳解
這篇文章主要為大家介紹了vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Vue SSR 即時(shí)編譯技術(shù)的實(shí)現(xiàn)
這篇文章主要介紹了Vue SSR 即時(shí)編譯技術(shù)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置
這篇文章主要介紹了Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04Vue express鑒權(quán)零基礎(chǔ)入門(mén)
這篇文章主要介紹了詳解express鑒權(quán),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02