vue如何在axios获取数据前显示加载动画，获取后去掉动画？

Question

用mint-ui和axios做的vue项目，有好几个页面都有列表，需要在获取到数据前前显示加载动画，我想的是判断数据的length确定是否显示动画，但是页面有很多个，有没有什么比较好的做法？

Answer 1

axios 的拦截器可以试一下

//添加请求拦截器
axios.interceptors.request.use(config => {
  //在发送请求之前做某事，比如说 设置loading动画显示
  return config
}, error => {
  //请求错误时做些事
  return Promise.reject(error)
})

//添加响应拦截器
axios.interceptors.response.use(response => {
  //对响应数据做些事，比如说把loading动画关掉
  return response
}, error => {
  //请求错误时做些事
  return Promise.reject(error)
})