vuecli中写loding动画

这是我在发布的第一篇文章，写的不好请见谅

axios获取数据请求接口时会有延迟时间,所以需要给用户一个提示加一个loding动画...

首先在components下创建一个loding组件

在App组件导入loding组件并注册

App组件中写一个div给他一个id比如buffer,把loding组件写在buffer

如果没有注册就写到页面的话就会报下面的错并且视图会不显示该组件

然后在main.js入口文件写一个axios拦截器

// 拦截request,设置全局请求为ajax请求

Axios.interceptors.request.use((config) => {

  document.getElementById('buffer').style.display = 'block'

  return config

}, function (error) {

  // 对请求错误做些什么

  return Promise.reject(error)

})

// 添加响应拦截器

Axios.interceptors.response.use((response) => {

  document.getElementById('buffer').style.display = 'none'

  // 对响应数据做点什么

  return response

}, function (error) {

  // 对响应错误做点什么

  return Promise.reject(error)

})

然后在loding组件中写loding动画即可。。。