亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2020年02月02日 10:09:06   作者:不想寫(xiě)代碼的碼農(nóng)  
這篇文章主要介紹了vuex+axios+element-ui實(shí)現(xiàn)頁(yè)面請(qǐng)求loading操作,結(jié)合實(shí)例形式分析了vuex+axios+element-ui實(shí)現(xiàn)頁(yè)面請(qǐng)求過(guò)程中l(wèi)oading遮罩層相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下

本文實(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ì)這種情況的

一、用到的東西

  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)求都可以

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

相關(guān)文章

  • element-ui自定義表格如何給input雙向綁定數(shù)據(jù)

    element-ui自定義表格如何給input雙向綁定數(shù)據(jù)

    這篇文章主要介紹了element-ui自定義表格如何給input雙向綁定數(shù)據(jù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue實(shí)現(xiàn)登錄功能

    vue實(shí)現(xiàn)登錄功能

    這篇文章主要介紹了vue實(shí)現(xiàn)登錄功能的步驟,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
    2020-12-12
  • vue學(xué)習(xí)筆記之Vue中css動(dòng)畫(huà)原理簡(jiǎn)單示例

    vue學(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-02
  • Vue3中動(dòng)態(tài)修改樣式與級(jí)聯(lián)樣式優(yōu)先順序圖文詳解

    Vue3中動(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-04
  • Vue.js的動(dòng)態(tài)組件模板的實(shí)現(xiàn)

    Vue.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-11
  • vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件示例詳解

    vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件示例詳解

    這篇文章主要為大家介紹了vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • Vue SSR 即時(shí)編譯技術(shù)的實(shí)現(xiàn)

    Vue 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-05
  • Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置

    Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置

    這篇文章主要介紹了Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-04-04
  • petite vue 基本使用指南示例小結(jié)

    petite vue 基本使用指南示例小結(jié)

    petite-vue 是為漸進(jìn)增強(qiáng)而優(yōu)化的另一種 Vue 發(fā)行版,它提供與標(biāo)準(zhǔn) Vue 相同的模板語(yǔ)法和反應(yīng)性心智模型,這篇文章主要介紹了petite vue 基本使用指南,需要的朋友可以參考下
    2024-07-07
  • Vue express鑒權(quán)零基礎(chǔ)入門(mén)

    Vue 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

最新評(píng)論