新建文件

src目录下新建api文件夹并新建http.js

• 导入axios和qs

import axios from ‘axios‘;
import qs from ‘qs‘；

• 根据环境变量区分接口的默认地址

switch (process.env.NODE_ENV) {
  case "production":
    axios.defaults.baseURL = "http://api.wangjie.com";
    break;
  case "test":
    axios.defaults.baseURL = "http://api.test.com";
    break;
  default:
    axios.defaults.baseURL = "http://localhost:8080"
}

• 设置超时时间和跨域是否允许携带凭证

axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;

• 设置请求传递数据的格式

axios.defaults.headers[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘;
axios.defaults.transformRequest = data => qs.stringify(data);

• 设置请求拦截器

axios.interceptors.request.use(config => {
  // 携带token
  let token = localStorage.getItem(‘token‘);
  token && (config.headers.Authorization = token)
  return config
}, error => {
  return Promise(reject(error))
});

• 设置响应拦截器

axios.interceptors.response.use(response => {
  return response.data;
}, error => {
  let { response } = error;
  if (response) {
    switch (response.status) {
      case 401: // 权限不足，未登录状态
        break;
      case 403: // 服务器拒绝执行 token/session过期
        break;
      case 404: // 找不到页面
        break;
    }
  } else {
    if (!window.navigator.onLine) {
      // 断网处理
      return;
    } else {
      return Promise.reject(error);
    }
  }
})

• 导出配置
  export default axios;

Axios的二次封装