封装axios在项目中使用

import store from '@/store/index'
import { Loading,Message,MessageBox } from 'element-ui'
import router from '@/router/index'
import {auth} from '@/utlis/auth'
// 创建axios实例
const service = axios.create({
  baseURL: '/api', // api的base_url
  timeout: 5000 // 请求超时时间
})

let loading = null;
//调用api时开启加载动画
function startLoading() {
  loading = Loading.service({
    lock: true,
    text: '拼命加载中....',
    background: 'rgba(0,0,0,0.7)'
  })
}
//关闭加载动画
function endLoading() {
  loading.close();
}

// 设置 post、get默认 Content-Type
// service.defaults.headers.post['Content-Type'] = 'application/json'
// service.defaults.headers.get['Content-Type'] = 'application/json'

// request拦截器
service.interceptors.request.use(config => {
  //加载动画
  startLoading();
  // 如果当前已有token，则在请求头中加上
  if (auth.getAuthorization()) {
    //设置统一的请求头
    config.headers['Authorization'] = auth.getAuthorization()// 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
  }
  return config
}, error => {
  // Do something with request error
  Message({
    message: error,
    type: 'error'
  })
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  /**
  * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
  * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
  */
  response => {
    const res = response.data;
    if (response.status != 200) {
        Message({
          message: res.msg,
          type: 'error'
        });
      return Promise.reject('error');
    }
      //结束加载动画
      endLoading();
      //弹出消息框，并跳转到主页
      Message({
        message: res.msg,
        type: 'success'
      });
      return response;
  },
  error => {
    endLoading();
    const { status } = error.response;
    //根据status码来判断token是否过期，若过期则退出登录并返回登录页
    if(status === 500) {
      Message({
        message: '服务器未启动',
        type: 'error'
      })
    }
    else if(status == 401) {
      MessageBox.confirm('token已经失效请重新登录', '确定登出', {
        confirmButtonText: '重新登录',
        cancButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //删除存储对象中的Token和Vuex中的用户信息
        store.dispatch('setAuthorization',false).then(()=>{
          auth.removeAuthorization();
          store.commit('setUser',{});
          location.reload();
        });
        router.push('/login');
      })
    } else {
      Message({
        message: error.response.data.msg,
        type: 'error'
      })
    }
  })

export const request = service