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"]) }, }