vue 封装加载动画

全屏加载
这里使用 elementui 和 axios的拦截器
得到请求 ，就把 loading 给close 掉

什么也别说了，看下面的代码！！

import axios from 'axios'
import { Loading } from 'element-ui';
import {MessageBox} from "element-ui";

//https://blog.csdn.net/weixin_41753291/article/details/80619523
let loadingInstance = null;
axios.interceptors.request.use(req => {
  loadingInstance = Loading.service({fullscreen: true})
  return req
}, error => {
  return Promise.reject(error)
})

//配置 response 拦截器
axios.interceptors.response.use(resp => {
   loadingInstance.close();
    console.log(resp.data)
    return resp.data;
  }, error => {
   loadingInstance.close()
    MessageBox.alert("网络异常！")
    return new Promise.reject(error)
  }
)


axios.defaults.baseURL = 'http://localhost/';
export const request = {
  get(url, params) {
    // MessageBox.alert("网络或系统错误!", "提示");
    console.log("url --->" + url)

    return axios.get(url, {params})
  },
  post(url, json) {
    return axios.post(url, json)
  }
}
// 复制代码

下面的helloVue组件的设置

<template>
    <div>hello world</div>
</template>

<script>

// import axios from 'axios'
import {request} from 'network/request.js'

export default {

  name: 'HelloWorld',
  mounted () {


    console.log('初始化.....'+this.$route.query.a)
    let url = 'http://localhost:80/login'
    request.post(url,{user:123,password:123}).then(
      res => {
        console.log('发送了请求')
        console.log(res)
      }
    ).catch(err => {
      // this.$message.error("没有token")
      console.log('err' + err)
    })
  }
}
</script>

<style scoped>

</style>