axios二次封装

axios二次封装

import axios from 'axios';
import qs form 'qs'; //qs为转换格式

一般的axios请求:
  // get请求
  axios.get(url, {
    params: {

    }
  }).then(res => {

  }).catch(error => {

  });
// post请求
axios.post(url, {
    xxx: 'xxx',
    xxx: 'xxx'
  })
  .then((res) => {

  })
  .catch((error) => {

  });

封装axios
// 1.按照不同的环境配置服务器地址
switch (process.env.NODE_ENV) {
  //生产环境
  case "production":
    axios.defaults.baseURL= "http://127.0.0.0.0:8080"
    //测试环境
  case "test":
    axios.defaults.baseURL= "http://127.0.0.0.0:8080"
    //开发环境
  default:
    axios.defaults.baseURL= "http://127.0.0.0.0:8080"
};
//注意process.env.NODE_ENV这个环境变量在package.json中配置，见下图

//2.设置超时时间和跨域是否允许携带凭证
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;

//3.设置请求传递数据格式(看服务器需要什么格式)
//一般post请求需要的格式类似xxx = xxx & xxx = xxx(x-www-form-urlencoded格式)
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = data => qs.stringify(data) //data为请求的数据

//4.设置请求拦截器(客户发送请求->请求拦截器->服务器)
//TOKEN校验(JWT):接受服务器返回的token,存储到vuex或者本地存储，每次请求，我们应该把TOKEN带上
axios.interceptors.request.use(config => {
  let token = localStorage.getItem('token')
  token && (config.headers.Authorization = token)
  return config
}, error => {
  return Promise.reject(error)
});

//5.响应拦截器(服务器返回信息->响应拦截器->客户端获取到数据)
axios.defaults.validateStatus = status => {
  //自定义响应成功的HTTP状态码(默认是2开头的状态码成功，其余失败)
  return /^(2|3)\d{2}$/.test(status)
};
axios.interceptors.response.use(response => {
  return response.data;
}, error => {
  let {
    response
  } = error;
  if (response) {
    //服务器至少返回结果了
    switch (response.status) {
      //此处处理不同状态码的情况
      case 401: //当前请求需要用户验证(一般是未登陆)
        break;
      case 403: //服务器已经理解请求，但是拒绝执行(一般是TOKEN过期)
        localStorage.removeItem('token')
        break;
      case 404: //请求失败，请求所希望的资源未在服务器上发现
        break;
    }
    return Promise.reject(error.response)
  } else {
    //服务器啥也没返回
    if (!window.navigator.onLine) {
      //断网处理：可以跳转到断网页面
      return;
    }
    return Promise.reject(error);
  }
});

export default axios;

package.json的配置

来源：CSDN

作者：Tian_____

链接：https://blog.csdn.net/Tian_____/article/details/103920409