封装axios加载动画Loding——vuex+axios拦截器

封装axios加载动画Loding——vuex+axios拦截器

前言：我们在axios发送请求时候，会存在请求等待时长，我们一般会加一个动画，如果很多个时候一个一个的加动画代码看起来很臃肿很冗余，我们写起来也很麻烦，所以为了更好的写代码，把动画封装在axios中请求前打开动画，请求后关闭动画就实现了Loding加载的效果
下面通过样例演示如何封装一个带 loading 效果的 Axios 组件，它能够对请求和响应进行拦截从而实现 loading 的自动显示与隐藏，

两种方法搭配
(1) vue+element
(2) vue+vuex+自己封装的动画组件
此文章讲第二种方法

一、创建一个vue组件名字为Loading（动画组件，按照自己喜好来）

<template>
    <div ref="loader" class="loaderfather" v-show="isShowLoader">
        <div class="loader">Loading...</div>
    </div>
</template>
<script>
    export default {
        name: "Loader",
        data() {
            return {};
        },
        props: {
            isShowLoader: {
                type: Boolean,
                default () {
                    false;
                },
            },
        },
        methods: {},
    };
</script>

<style>
    .loaderfather {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 20000;
    }

    .loader {
        margin: auto;
        font-size: 20px;
        width: 0.5em;
        height: 0.5em;
        border-radius: 50%;
        text-indent: 9999em;
        animation: load-effect 1s infinite linear;
    }

    @keyframes load-effect {
        0% {
            box-shadow:
                /* 0:左移3em -3em:下移2em 0:模糊距离0，即纯色 .2em:外扩.2em  #504f4e:白色 */

                0 -3em 0 0.2em #504f4e,
                /*上*/
                2em -2em 0 0 #504f4e,
                /*右上*/
                3em 0 0 -0.5em #504f4e,
                /*右*/
                2em 2em 0 -0.5em #504f4e,
                /*右下*/
                0 3em 0 -0.5em #504f4e,
                /*下*/
                -2em 2em 0 -0.5em #504f4e,
                /*左下*/
                -3em 0 0 -0.5em #504f4e,
                /*左*/
                -2em -2em 0 0 #504f4e;
            /*左上*/
        }

        12.5% {
            box-shadow: 0 -3em 0 0 #504f4e, 2em -2em 0 0.2em #504f4e, 3em 0 0 0 #504f4e,
                2em 2em 0 -0.5em #504f4e, 0 3em 0 -0.5em #504f4e,
                -2em 2em 0 -0.5em #504f4e, -3em 0 0 -0.5em #504f4e,
                -2em -2em 0 -0.5em #504f4e;
        }

        37.5% {
            box-shadow: 0 -3em 0 -0.5em #504f4e, 2em -2em 0 -0.5em #504f4e,
                3em 0 0 0 #504f4e, 2em 2em 0 0.2em #504f4e, 0 3em 0 0 #504f4e,
                -2em 2em 0 -0.5em #504f4e, -3em 0 0 -0.5em #504f4e,
                -2em -2em 0 -0.5em #504f4e;
        }

        50% {
            box-shadow: 0 -3em 0 -0.5em #504f4e, 2em -2em 0 -0.5em #504f4e,
                3em 0 0 -0.5em #504f4e, 2em 2em 0 0 #504f4e, 0 3em 0 0.2em #504f4e,
                -2em 2em 0 0 #504f4e, -3em 0 0 -0.5em #504f4e, -2em -2em 0 -0.5em #504f4e;
        }

        62.5% {
            box-shadow: 0 -3em 0 -0.5em #504f4e, 2em -2em 0 -0.5em #504f4e,
                3em 0 0 -0.5em #504f4e, 2em 2em 0 -0.5em #504f4e, 0 3em 0 0 #504f4e,
                -2em 2em 0 0.2em #504f4e, -3em 0 0 0 #504f4e, -2em -2em 0 -0.5em #504f4e;
        }

        75% {
            box-shadow: 0 -3em 0 -0.5em #504f4e, 2em -2em 0 -0.5em #504f4e,
                3em 0 0 -0.5em #504f4e, 2em 2em 0 -0.5em #504f4e, 0 3em 0 -0.5em #504f4e,
                -2em 2em 0 0 #504f4e, -3em 0 0 0.2em #504f4e, -2em -2em 0 0 #504f4e;
        }

        87.5% {
            box-shadow: 0 -3em 0 0 #504f4e, 2em -2em 0 -0.5em #504f4e,
                3em 0 0 -0.5em #504f4e, 2em 2em 0 -0.5em #504f4e, 0 3em 0 -0.5em #504f4e,
                -2em 2em 0 0 #504f4e, -3em 0 0 0 #504f4e, -2em -2em 0 0.2em #504f4e;
        }

        100% {
            box-shadow: 0 -3em 0 0.2em #504f4e, 2em -2em 0 0 #504f4e,
                3em 0 0 -0.5em #504f4e, 2em 2em 0 -0.5em #504f4e, 0 3em 0 -0.5em #504f4e,
                -2em 2em 0 -0.5em #504f4e, -3em 0 0 -0.5em #504f4e, -2em -2em 0 0 #504f4e;
        }
    }
</style>

二、创建一个store.js文件引入vuex

import {createStore} from 'vuex'

// Create a new store instance.
const store = createStore({
    getters: {},
    state: {
        loadingShow: true,
    },
    mutations: {
        showLoading(state) {
            state.loadingShow = true
        },
        hideLoading(state) {
            state.loadingShow = false
        }
    },
    actions: {},
})
export default store

之前我们经常看到vuex运行是下边代码

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    skin: 'HH',
    loadingShow: true,
  },
  mutations: {
    changeSkin (state, str) {
      state.skin = str
    },
    showLoading (state) {
      state.loadingShow = true
    },
    hideLoading (state) {
      state.loadingShow = false
    }
  },
  actions: {

  }
})

为什么我们不这么干，因为我们用的是vue3.0版本，所以我们创建import {createApp} from 'vue’
得到的是一个函数，然后参数为根组件APP时候创建出来的，而我们如果直接**import Vue from
‘vue’，**得到的是undefined
那么vuex此时应该选择哪个版本？
4.0
为什么？
如果选择3.几版本那么我们引用是 import Vuex from ‘vuex’ 但是有一个问题，此时需要Vue.use(vuex),这个时候的Vue已经是一个实例了，但是我们vue3中，是引入的一个构造函数createApp
所以要采用vuex4.0版本，然后直接 import {createStore} from 'vuex’
如果你的vue版本是2那么第二种没毛病，如果vue版本是3则第一种
（当然这也是个人观点，如有建议请留言及时更正）

三、创建一个http.js文件，引入axios然后封装

import axios from 'axios'
import store from '../../store'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么

  // 调用store showLoading方法
  store.commit('showLoading')
  console.log('loading...')
  return config;
}, function (error) {
  // 对请求错误做些什么
  store.commit('hideLoading')
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么

  // 调用store hideLoading方法
  store.commit('hideLoading')
  console.log('end...')
  return response;
}, function (error) {
  // 对响应错误做点什么
  store.commit('hideLoading')
  return Promise.reject(error);
});

四、在的main.js中引入vue和根组件

import {createApp} from 'vue'
import App from './App.vue'
import axioshttp from './http'//引用http封装的axios组件
import store from "./store"

var app = createApp(App)
app.use(store)//绑在app上
app.config.globalProperties.$axios = axioshttp ;
app.config.globalProperties.$app = app;
app.mount('#app')

提示：
import {createApp} from 'vue’是vue3.0版本内容
createApp方法可以返回一个提供应用上下文的应用实例，应用实例挂载的整个组件树共享同一个上下文，vue3中的createApp方法进行实例创建，和vue2的区别自己看

import axioshttp from ‘./http’//引用http封装的axios组件
app.config.globalProperties.$axios = axioshttp ;

此时我们把Loading组件引用到根组件下即可

<Loading :isShowLoader="this.$store.state.loadingShow"></Loading>

this.$store.state.loadingShow就是我们vuex定义的全局的状态管理变量

中间是圆圈打转转，截图有点快，不完整，凑合看吧，可以把动画复制下来看一下！

下一篇文章讲一下简单的element+vue简单的封装———— # take root_80