欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VUE axios 加载中提示封装

程序员文章站 2022-07-10 16:29:28
...
import axios from 'axios'
// 引入axios以及element ui中的loading和message组件
import { MessageBox,Indicator } from 'mint-ui';
// 超时时间
axios.defaults.timeout = 5000
// http请求拦截器
var loadinginstace
axios.interceptors.request.use(config => {
    if(config.url.indexOf("?")!=-1){
      config.url = config.url + "&_v=" + genVersion();
    }else{
      config.url = config.url + "?_v=" + genVersion();
    }
  console.log(config.url);
  Indicator.open({
    //text: '加载中,请稍后...',
spinnerType: 'fading-circle'
});
  return config
}, error => {
  MessageBox.alert('数据加载超时,请检查您的网络或稍后重试!').then(action => {
    Indicator.close();
  });
  return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
Indicator.close();
  return data
}, error => {
  MessageBox.alert('数据加载失败!').then(action => {
    Indicator.close();
  });
  return Promise.reject(error)
})

export default axios;