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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

over警告~

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值