Vue配置响应拦截器与请求拦截器

为什么要做相应的配置呢？

原因在于前端调用后端接口时，每个接口都会返回一个状态码，并且不同的状态码提示着不同的信息。前端因为要调用很多后端接口，调用一次就要做出相应的状态码判断，这样就要造成编写重复的代码，导致代码冗余，也浪费了开发时间。而配置好拦截器便可以轻松的解决这个问题。

//配置相应拦截器
import  axios from 'axios'
import {Message} from "element-ui";


//请求拦截器
axios.interceptors.request.use((config) => {
//如果存在token，请求携带token
  if(window.sessionStorage.getItem('tokenStr')){
    config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
  }
  return config ;
}, (error) => {
  Message.error({ message: error });
})
//响应拦截器
axios.interceptors.response.use(success=>{
  //判断业务逻辑错误
  if(success.status&&status==200){
    if(success.data.code==500||success.data.code==401||success.data.code==403){
      Message.error({message:success.data.message})
      return;
    }
    if(success.data.message){
      Message.success({message:success.data.message})
    }
  }
  return success.data;
},
  error => {
  if(error.response.code==504||error.response.code==404){
    Message.error({message:'服务器被吃了~~~'})
  }
  else if(error.response.code==403){
    Message.error({message:'权限不足'})
  }
  else if(error.response.code==401){
    Message.error({message:'尚未登录，请登录'})
  }
  else{
    if(error.response.data.message){
      Message.error({message:error.response.data.message})
    }
    else{
      Message.error({message:'未知错误'})
    }
  }
  return;
  })

let base='';
//传送json格式的post请求
export const postRequest=(requesturl,params)=>{
  return axios({
    method:'post',
    //url:'${base}${url}',
    url:requesturl,
    data:params
  })
}

//put
export const putRequest = (url, params) => {
  return axios({
    method: 'put',
    url: url,
    data: params
  })
};

//get
export const getRequest = (url, params) => {
  return axios({
    method: 'get',
    url: url,
    data: params
  })
};

//del
export const deleteRequest = (url, params) => {
  return axios({
    method: 'delete',
    url: url,
    data: params
  })
};