快捷導(dǎo)航

基于Vue + Axios實現(xiàn)全局Loading自動顯示關(guān)閉效果

更新時間：2024年03月14日 08:43:34 作者：笨鳥更要先飛

在vue項目中,我們通常會使用Axios來與后臺進行數(shù)據(jù)交互,而當(dāng)我們發(fā)起請求時,常常需要在頁面上顯示一個加載框（Loading）,然后等數(shù)據(jù)返回后自動將其隱藏,本文介紹了基于Vue + Axios實現(xiàn)全局Loading自動顯示關(guān)閉效果,需要的朋友可以參考下

前言

在vue項目中，我們通常會使用Axios來與后臺進行數(shù)據(jù)交互。而當(dāng)我們發(fā)起請求時，常常需要在頁面上顯示一個加載框（Loading），然后等數(shù)據(jù)返回后自動將其隱藏。要實現(xiàn)這個功能，我們可以在每次請求前手動顯示個加載框，等收到數(shù)據(jù)后又將其隱藏。但如果每個請求要都這么做，就有點麻煩。，但眾所周知，程序猿是一種不喜歡麻煩的生物，那么我們要怎么樣讓這個步驟變得不再那么繁瑣呢。

下面通過一個demo演示如何封裝一個帶loading效果的Axios組件，它能夠?qū)φ埱蠛晚憫?yīng)進行攔截從而實現(xiàn) loading的自動顯示與隱藏，并且在請求失敗時自動彈出消息提示框顯示錯誤信息。

demo

原理說明

通過 axios 提供的請求攔截和響應(yīng)攔截的接口，控制 loading 的顯示或者隱藏。同時在請求失敗時還會自動彈出消息提示框顯示錯誤信息。
loading效果采用 Element UI 中提供的 Loading組件來實現(xiàn)。而錯誤消息提示框則用的是 Element UI 中的 Message 組件來實現(xiàn)。
內(nèi)部有個計數(shù)器，確保同一時刻如果有多個請求的話，不會同時出現(xiàn)多個 loading，而是只有 1 個。并且在所有請求結(jié)束后才會隱藏 loading。
使用了debounce防抖。因為有時會碰到在一次請求完畢后又立刻又發(fā)起一個新的請求的情況。這種情況會造成連續(xù)loading兩次，并且中間有一次的閃爍。通過防抖避免閃爍的情況。
默認(rèn)所有請求都會自動有loading效果。如果某個請求不需要loading效果，可以在請求頭中 showLoading設(shè)置為false
默認(rèn)的 loading 效果是覆蓋在body上。如果某個請求是需要在某個指定元素上顯示 loading 效果，可以將請求 header 中 loadingTarget 設(shè)置為該元素的選擇符。

代碼實現(xiàn)

http.js

import axios from 'axios';
import { Message,Loading } from 'element-ui';
import _ from 'lodash';
  
const http = axios.create({
    baseURL:process.env.BASE_URL, //設(shè)置請求的base url
    timeout:40000 //超時時長
});
  
//loading
let loading;
  
//當(dāng)前正在請求的數(shù)量
let LoadingRequestCount = 0;
  
//顯示loading
function showLoading(target) {
  if (LoadingRequestCount === 0 && !loading) {
    loading = Loading.service({
      lock: true,
      text: "加載中",
      background: 'rgba(255, 255, 255)',
      target: target || "body"
    });
  }
  LoadingRequestCount++;
}
  
//隱藏loading
function hideLoading() {
  LoadingRequestCount--;
  LoadingRequestCount = Math.max(LoadingRequestCount, 0); //防止小于0的情況發(fā)生
  if (LoadingRequestCount === 0) {
    //關(guān)閉loading
    toHideLoading();
  }
}
  
//防抖
var toHideLoading = _.debounce(()=>{
      loading.close();
      loading = null;
    }, 100);
  
//添加請求攔截器
http.interceptors.request.use(config => {
  //判斷當(dāng)前請求是否設(shè)置了不顯示Loading
  if(config.headers.showLoading !== false){
    showLoading(config.headers.loadingTarget);
  }
  return config;
}, err => {
  //判斷當(dāng)前請求是否設(shè)置了不顯示Loading
  if(config.headers.showLoading !== false){
    hideLoading();
  }
  Message.error('請求失敗!');
  //拋出錯誤
  return Promise.resolve(err);
});
  
//響應(yīng)攔截器
http.interceptors.response.use(
    response => {
      //判斷當(dāng)前請求是否設(shè)置了不顯示Loading（不顯示自然無需隱藏）
      if(response.config.headers.showLoading !== false){
        hideLoading();
      }
      
      return response;
    },
    error => {
      //判斷當(dāng)前請求是否設(shè)置了不顯示Loading（不顯示自然無需隱藏）
      if(error.config.headers.showLoading !== false){
        hideLoading();
      }
      
      if(error.response && error.response.data && error.response.data.message) {
        var jsonObj = JSON.parse(error.response.data.message);
        Message.error(jsonObj.message);
      }else{
        Message.error(error.message);
      }
      return Promise.reject(error);
    }
);
  
export default http;

結(jié)語

到此這篇關(guān)于基于Vue + Axios實現(xiàn)全局Loading自動顯示關(guān)閉效果的文章就介紹到這了,更多相關(guān)Vue+Axios Loading自動顯示關(guān)閉內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: