vue之element-ui设置全局弹出框

这样的需求,在主要功能完成后,需要进行交互效果的完善,需要给请求api的时候添加一个加载中的一个弹出框。但是每个页面每个页面过的话,会很费时间和精力,这里我们可以采用element-ui中的服务式弹出框设置
如下:
封装的api.js文件:
import axios from 'axios'
import {Message,Loading} from 'element-ui'
import router from '../router'
 
//  请求拦截
axios.interceptors.request.use(config=> {
  Loading.service({text:"Loading..."});
  return config;
}, err=> {
  Message.error({message: '请求超时!'});
  return Promise.resolve(err);
})
//  响应拦截
axios.interceptors.response.use(res=> {
  Loading.service().close();
    if (res.data.code == 200) {
      return res.data.result;
    } else if (res.data.code == 401) {
      router.push('/login')
      return Promise.reject(res);
    }
    return Promise.reject(res);
  }, err=> {
  Loading.service().close();
  if (err.response.status == 504||err.response.status == 404) {
      Message.error({message: '服务器被吃了⊙﹏⊙∥'});
    } else if (err.response.status == 403) {
      Message.error({message: '权限不足,请联系管理员!'});
    } else {
      Message.error({message: '未知错误'});
    }
    return Promise.reject(err);
})
 
let base = '';
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      loadingInstance.close();
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}
export const getRequest = (url,data='') => {
  return axios({
    method: 'get',
    params: data,
    url: `${base}${url}`
  });
} 

 

posted @ 2018-10-15 17:55  狗尾草的博客  阅读(15615)  评论(0编辑  收藏  举报