封装axios并使用拦截器加载loading动画

封装axios并使用拦截器加载loading动画

首先封装loading动画，现制作一个简易的loading动画（后期会优化）

<template>
  <div v-if="loadingShow" class="loading">
    loading
  </div>
</template>
<script>
import {InitMixins} from '../lib/mixins/init.js'
export default {
  name: 'Loading',
  mixins: [InitMixins],
}
</script>
<style lang="less" scoped>
.loading{
  padding: 20px 50px;
  position: absolute;
  top: 45%;
  left: 45%;
  transform: translate(-50%, -50%);
  z-index: 8;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50px;
}
</style>

可以看得到，我在其中引入了一个mixins，这个等下在说。我们在app.vue中引入组件loading。
然后通过vuex全局管理loading状态。 store.js

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: {

  }
})

可以看到有关loading，我给了一个state 数据，和两个方法，一个显示showLoading ，一个隐藏hideLoading ，这个时候因为基本上所有的页面，都会进行请求，所以，我用到mixins，将方法封装在里面如下：

export const InitMixins = {
  data() {
    return {
      loading: true
    }
  },
  inject: ['reload'], // 切换品牌ID的时候, 页面重新加载
  methods: {
    showLoading: function() {
      this.$store.commit('showLoading')
    },
    hideLoading: function() {
      this.$store.commit('hideLoading')
    }
  },
  computed: {
    brandId: function() {
      return this.$store.state.skin
    },
    loadingShow: function() {
      return this.$store.state.loadingShow
    }
  },
}

这里我将数据源loadingShow放在了每个页面的computed属性中，可能和有些同学不一样，当然很多方法都可以。同时封装了两个方法，方便页面调用，现在我们在页面中只要引入了mixins就能调用这两个方法，进行loading加载的显示隐藏。

 this.showLoading()
 setTimeout(()=>{
    let data = [
    1,2,3,4,5
    ]    
    this.hideLoading()
  }, 3000)

这里模拟一个请求，可以实现加载动画。
当然这样有点不好，就是每次调用接口都要写两次显示和隐藏的方法，经过研究我封装了一下axios，在axios拦截器中进行loading加载的实现。
server.js

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) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

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

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

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function fetch(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    })
    .then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}

在拦截器中实现loading，最后在main.js中引入server.js，在任意页面调用

this.$fetch(url)
      .then((response) => {
        console.log(response)
    })

当然所有的请求都可以依照get请求封装，大同小异。
这样我们就实现了简单的axios封装和 loading的加载，对其中的参数封装暂时因为没有实际羡慕，先搁置，以后按需求添加，同时有些状态的管理，一样可以在这进行，在后期我会陆续添加上去。
可以star一下，谢谢。
项目地址