快捷導(dǎo)航

Vue3使用axios請(qǐng)求攔截器和vuex設(shè)置全局loading方式

更新時(shí)間：2025年12月17日 09:03:50 作者：莉是我的yo

本文介紹了如何在Vue.js項(xiàng)目中實(shí)現(xiàn)全局loading加載動(dòng)畫(huà),并通過(guò)axios攔截器控制loading的顯示與隱藏

在開(kāi)發(fā)中使用loading加載動(dòng)畫(huà)是常見(jiàn)的功能。頁(yè)面加載需要時(shí)間，網(wǎng)絡(luò)不好時(shí)也需要時(shí)間，加載的過(guò)程中頁(yè)面就會(huì)出現(xiàn)白屏的狀況，如果沒(méi)有使用loading來(lái)和用戶進(jìn)行交互，用戶并不知道應(yīng)用到底是出現(xiàn)什么問(wèn)題，就會(huì)十分的影響用戶體驗(yàn)。廢話不多說(shuō)，直接開(kāi)始。

App.vue

既然是全局loading，那就讓它在全局范圍內(nèi)都生效，我們?cè)诟M件內(nèi)設(shè)置加載動(dòng)畫(huà)（可以設(shè)置css動(dòng)畫(huà)，js動(dòng)畫(huà)，Vue動(dòng)畫(huà)，我這里為了省事，直接使用的gif動(dòng)圖）。設(shè)置完調(diào)整一下css，讓它出現(xiàn)在頁(yè)面正中央。

我們通過(guò)“flage”的值，來(lái)控制loading的顯示與隱藏，因?yàn)槭褂眠^(guò)程中會(huì)經(jīng)常觸發(fā)，所以使用v-show合適些。要做到每一次請(qǐng)求都能觸發(fā)，就要監(jiān)聽(tīng)“flage”的值，通過(guò)“compued”獲取vuex內(nèi)flage的值（使用計(jì)算屬性，因?yàn)樗芯彺妫偻ㄟ^(guò)“watch”監(jiān)聽(tīng)值的變化，實(shí)時(shí)給flage重新賦值。如何讓每次請(qǐng)求和響應(yīng)都改變flage的值，繼續(xù)往下看。

<template>
  <div>
    <div class="box" v-show="flage">
      <img src="./assets/loading.gif" alt="">
    </div>
    <router-view />
  </div>
</template>
<script>
import store from './store/index'
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    let flage = ref(false)
    return {
      flage,
    }
  },
  computed: {
    newData() {
      return store.state.loading
    }
  },
  watch: {
    newData(newVal) {
      this.flage = newVal

    }
  }
}

</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: rgba(243, 243, 243, 0.3);
  position: absolute;
  z-index: 9999
}

img {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 30%;
}
</style>

封裝axios攔截器

axios攔截器包括請(qǐng)求攔截和響應(yīng)攔截，對(duì)每一次的請(qǐng)求和響應(yīng)都會(huì)做出處理，那我們就可以在這里通過(guò)vuex來(lái)改變“flage”的值，發(fā)請(qǐng)求時(shí)值為“true”，響應(yīng)時(shí)值為“false”。

import axios from "axios";
import store from '../store'
// 創(chuàng)建axios實(shí)例
const service = axios.create({
  baseURL: "/api",
  timeout: 10000,
});


// 請(qǐng)求攔截器
service.interceptors.request.use(
  (config) => {
    store.commit('setLoading',true)
    return config;
  },
  (error) => {
    // 對(duì)請(qǐng)求錯(cuò)誤做些什么
    return Promise.reject(error);
  }
);

// 響應(yīng)攔截器
service.interceptors.response.use(
  (response) => {
    // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
    store.commit('setLoading',false)    let res = response.data;
    return res;
  },
  (error) => {
    // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么：統(tǒng)一進(jìn)行響應(yīng)錯(cuò)誤的處理
    console.dir(error);
    return Promise.reject(error);
  }
);

export const request = service;

vuex

vuex中state的值是不能直接修改的，簡(jiǎn)單來(lái)說(shuō)state是允許異步操作的，這樣的話就會(huì)出現(xiàn)多個(gè)地方異步調(diào)用時(shí)，有的還沒(méi)執(zhí)行完而state里面的值就被修改了，這樣程序就會(huì)報(bào)錯(cuò)。mutations的作用就是阻止異步調(diào)用。需要異步調(diào)用時(shí)要通過(guò)actions里面的方法去調(diào)用mutations里面的方法。扯多了，繼續(xù)看我們的代碼。

import { createStore } from 'vuex'

export default createStore({
  state: {
    loading: false,
  },
  getters: {},
  mutations: {
    setLoading(state, flage){
      state.loading = flage
    }
  },
  actions: {},
  modules: {},
  plugins: []
})