Vue实现loading加载动画

Vue实现loading加载动画

1.在main.js里引入axios

import axios from "@/http/index.js"

2. 在vuex中设置状态

state: {
	   		 isLoading: false
	  	},

3.配置拦截器

import axios from 'axios'
import store from '@/store'//vuex的路径
var instance =axios.create({
    baseURL:'',
    timeout:5000
})
instance.interceptors.request.use((config)=>{
    //在这里面写请求之前做的事情
        // const token = sessionStorage.getItem('ji')
        // if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
        //     config.headers.authorization = token  //请求头加上token
        // }
        store.state.isLoading=true//loading加载动画
        return config
},error=>{
    return Promise.reject(error)
})


instance.interceptors.response.use(response => {
    if(response.status === 200) {
      store.state.isLoading=false//loading加载动画
      return Promise.resolve(response)
    }
  }, error => {
    return Promise.reject(error)
  })
export default instance

4.在app.vue中引入

<!-- template中 -->
<Loading v-if="isLoading" />

import { mapState } from "vuex";
export default {
	computed: {//加载数据过程loading
	    ...mapState(["isLoading"])
	},
}