封裝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一下，謝謝。
項目地址