快捷導航

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

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

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

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

App.vue

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

我們通過“flage”的值，來控制loading的顯示與隱藏，因為使用過程中會經(jīng)常觸發(fā)，所以使用v-show合適些。要做到每一次請求都能觸發(fā)，就要監(jiān)聽“flage”的值，通過“compued”獲取vuex內(nèi)flage的值（使用計算屬性，因為它有緩存），再通過“watch”監(jiān)聽值的變化，實時給flage重新賦值。如何讓每次請求和響應(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攔截器包括請求攔截和響應(yīng)攔截，對每一次的請求和響應(yīng)都會做出處理，那我們就可以在這里通過vuex來改變“flage”的值，發(fā)請求時值為“true”，響應(yīng)時值為“false”。

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


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

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

export const request = service;

vuex

vuex中state的值是不能直接修改的，簡單來說state是允許異步操作的，這樣的話就會出現(xiàn)多個地方異步調(diào)用時，有的還沒執(zhí)行完而state里面的值就被修改了，這樣程序就會報錯。mutations的作用就是阻止異步調(diào)用。需要異步調(diào)用時要通過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: []
})