【vue】axios 拦截器统一管理加载动画

最新推荐文章于 2024-05-24 12:57:57 发布

顾鸟

最新推荐文章于 2024-05-24 12:57:57 发布

阅读量348

点赞数

分类专栏： vue 文章标签：动画 vue.js javascript

本文链接：https://blog.csdn.net/qq_40881695/article/details/120849112

版权

vue 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

本文档展示了如何在Vue项目中实现页面加载时的动画效果。通过创建一个loading.vue组件，并结合Vuex来控制动画的显示和隐藏，以及配置axios拦截器在请求开始和结束时切换动画状态。在App.vue中引入loading组件，实现全局的加载动画展示。

摘要由CSDN通过智能技术生成

转载：https://www.jianshu.com/p/35fd3b541c24

效果图

在这里插入图片描述

实现

编写动画效果

// src/components/loading.vue

<template>
  <div class="loading"></div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.loading {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.5);
  background-image: url(".././assets/loading.gif");
  background-repeat: no-repeat;
  background-position: center;
}
</style>

vuex 控制动画显示隐藏

// src/store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isShow: false
  },
  mutations: {},
  actions: {},
  modules: {}
});

配置 axios 拦截器

// src/api/request/js

import axios from "axios";
import router from "@/router";
import store from "../store";

axios.interceptors.request.use(function(config) {
  store.state.isShow = true;
  return config;
});

axios.interceptors.response.use(
  function(response) {
    store.state.isShow = false;
    return response;
  },
  function(error) {
    if (error) {
      window.localStorage.removeItem("username");
      router.push("/login");
    }
    return Promise.reject(error);
  }
);

export default axios;

app.vue 引入 loading.vue 组件

// App.vue

<template>
  <div id="app">
    <router-view />
    <loading v-if="this.$store.state.isShow" />
  </div>
</template>

<script>
import Loading from "./components/loading.vue";
export default {
  name: "App",
  components: { Loading }
};
</script>