vue单页面的数据请求添加loading效果

最新推荐文章于 2025-10-28 19:24:36 发布

原创最新推荐文章于 2025-10-28 19:24:36 发布 · 8.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue请求loading #vue添加loading #vue数据请求 #vue+loading

vue 专栏收录该内容

25 篇文章

订阅专栏

该博客介绍了如何在Vue单页面应用中实现数据请求时的loading效果。通过在app.vue引入loading组件，并结合store.js和request.js进行配置，利用axios的拦截器功能，无论请求在何处发起，都能统一管理加载状态。

1、在app.vue,先引入你的loading组件

app.vue

<template>
  <div id="app">
    <router-view/>
    <div class="load_cover" v-if="showLoading">
      <!-- <van-loading /> -->
      <van-loading color="red"/>
      <!-- <van-loading type="spinner" /> -->
      <!-- <van-loading type="spinner" color="white" /> -->
    </div>
  </div>
</template>

<script>
// 引入vuex的辅助方法
import { mapState } from 'vuex'
import Vue from 'vue'
// 引入loading插件，自己的也可以哦，直接在组件上判断显示隐藏即可
import { Loading } from 'vant'
Vue.use(Loading)
export default {
  // computed: mapState({
  //   showLoading: (state) => state.showLoading
  // })
  computed: {
    ...mapState([
      'showLoading'
    ])
  }
}
</script>

<style>
.van-loading__circular circle{
  stroke-width: 5px;
}
.van-loading{
  width: 40px;
  height: 40px;
  top: 40%;
  left: 50%;
  transform: translateX(-50%)
}
.load_cover{
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.5);
  z-index: 999;
  position: fixed;
  left: 0;
  top:0;
}
*{
  padding: 0;
  margin: 0;
}
html,body{
  width: 100%;
}
</style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    openId: '',
    code: '',
    showLoading: true
  },
  mutations: {
    updateLoading (state, showLoading) {
      state.showLoading = showLoading
    }
  }
})

request.js
这里我是把axios单独的抽出来了，如果你在main.js里，直接在main.js引入拦截器也是一样的

import store from '../store/store'
import axios from 'axios'

const service = axios.create({
  baseURL: 'http://666.6666666.666'
})

service.interceptors.request.use((config) => {
  store.commit('updateLoading', true)
  return config
}, (err) => {
  return Promise.reject(err)
})
service.interceptors.response.use((response) => {
  store.commit('updateLoading', false)
  if (response.status === 200) {
    return response.data
  } else {
    return {code: -2}
  }
}, (err) => {
  return Promise.reject(err)
})
export default service