当前位置：首页 > VUE

vue axios实现loading

2026-01-18 14:31:53VUE

Vue 中使用 Axios 实现 Loading 效果

在 Vue 项目中，可以通过 Axios 拦截器全局管理请求的 Loading 状态，结合 UI 组件（如 Element UI、Ant Design Vue 等）实现加载提示。

安装 Axios 和 UI 组件库

npm install axios
npm install element-ui  # 以 Element UI 为例

创建全局 Loading 控制逻辑

在 src/utils/request.js 中配置 Axios 拦截器：

import axios from 'axios';
import { Loading } from 'element-ui';

let loadingInstance = null;

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 10000
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    loadingInstance = Loading.service({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    return config;
  },
  error => {
    loadingInstance.close();
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    loadingInstance.close();
    return response.data;
  },
  error => {
    loadingInstance.close();
    return Promise.reject(error);
  }
);

export default service;

在组件中使用封装后的 Axios

import request from '@/utils/request';

export default {
  methods: {
    fetchData() {
      request.get('/api/data').then(res => {
        console.log(res);
      }).catch(err => {
        console.error(err);
      });
    }
  }
}

自定义 Loading 组件（可选）

如果不依赖 UI 库，可通过 Vue 状态管理实现：

vue axios实现loading

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    loading: false
  },
  mutations: {
    SET_LOADING(state, status) {
      state.loading = status;
    }
  }
});

// request.js
import store from './store';

service.interceptors.request.use(config => {
  store.commit('SET_LOADING', true);
  return config;
});

service.interceptors.response.use(
  response => {
    store.commit('SET_LOADING', false);
    return response;
  },
  error => {
    store.commit('SET_LOADING', false);
    return Promise.reject(error);
  }
);

模板中绑定 Loading 状态

<template>
  <div>
    <div v-if="$store.state.loading" class="custom-loading">
      数据加载中...
    </div>
    <button @click="fetchData">获取数据</button>
  </div>
</template>

样式优化

.custom-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  z-index: 9999;
}

通过以上方法可以实现全局请求的 Loading 效果，根据项目需求选择适合的方案即可。拦截器方式能统一管理所有请求的加载状态，避免重复代码。