封装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
巴特西

封装axios在项目中使用

最新文章

热门文章
