vue axios二次封装

安装axios
npm install axios 

http.js文件

import axios from 'axios'
import _storage from '../utils/storage' //封装storage的文件

const request = axios.create({
  timeout: 2000,
})

request.interceptors.request.use(
  config => {
    let reqUrls = {
      development: 'http://172.16.16.125:19020',
      test: 'http://172.16.0.151:8085/supervise',
      production: 'http://114.217.149.253:18020'
    }
    config.baseURL = reqUrls[process.env.NODE_ENV];
    config.headers = {
      'Content-Type': `application/json`,
      'X-Requested-With': `XMLHttpRequest`,
      'Access-Control-Allow-Origin': `*`,
    };
    config.headers.Authorization = _storage.getUserToken() || 'wg_sbwMuzUPBgI2vT1YeGA';
    return config;
  },
  err => {
    return Promise.reject(err);
  }
)
request.interceptors.response.use(
  response => response, (error) => {
    if (error && error.response) {
      // 1.公共错误处理
      // 2.根据响应码具体处理
      switch (error.response.status) {
        case 400:
          error.message = error.response.data.message || `错误请求`;
          break;
        case 401:
          error.message = error.response.data.message || `未授权，请重新登录`;
          break;
        case 403:
          error.message = error.response.data.message || `拒绝访问`;
          break;
        case 404:
          error.message = error.response.data.message || `请求错误,未找到该资源`;
          break;
        case 405:
          error.message = error.response.data.message || `请求方法未允许`;
          break;
        case 408:
          error.message = error.response.data.message || `请求超时`;
          break;
        case 500:
          error.message = error.response.data.message || `服务器端出错`;
          break;
        case 501:
          error.message = error.response.data.message || `网络未实现`;
          break;
        case 502:
          error.message = error.response.data.message || `网络错误`;
          break;
        case 503:
          error.message = error.response.data.message || `服务不可用`;
          break;
        case 504:
          error.message = error.response.data.message || `网络超时`;
          break;
        case 505:
          error.message = error.response.data.message || `http版本不支持该请求`;
          break;
        default:
          error.message = error.response.data.message || `连接错误${error.response.status}`;
      }
    } else {
      //message.warning(`连接服务器失败`);
    }
    //message.warning(`${error.message}`);
    return Promise.resolve(error.response);
  }
)


export default request;

storage.js

//这里需要安装good-storage插件
import Storage from 'good-storage';

const currentMenuKey = 'CURRENT_MENU'; // 高亮菜单
const userTokenKey = 'USER_TOKEN'; // 用户token
const userInfoKey = 'USER_INFO'; // 用户信息
const userTypeKey = 'USER_TYPE'; //用户类型
const permissionKey = 'PERMISSION';
const hideMenuKey = 'HIDEMENUKEY'
const menuKey = 'MENUKEY'
const districtCodeKey = 'DISTRICT_CODE'
const areaOptionsKey = 'AREA_OPTIONS'
export default {
  // 清除全部缓存数据
  clear: () => {
    Storage.clear()
  },

  // 存储当前激活菜单
  setCurrentMenu: menu => {
    Storage.set(currentMenuKey, menu)
  },
  // 获取当前激活菜单
  getCurrentMenu: () => Storage.get(currentMenuKey),

  // 存储用户 token
  setUserToken: token => {
    Storage.set(userTokenKey, token)
  },
  // 获取用户 token
  getUserToken: () => Storage.get(userTokenKey),
  // 删除用户 token
  removeUserToken: () => Storage.remove(userTokenKey),

  // 存储用户信息
  setUserInfo: info => {
    Storage.set(userInfoKey, info)
  },
  // 获取用户信息
  getUserInfo: () => Storage.get(userInfoKey),

  // 存储用户类型
  setUserType: type => {
    Storage.set(userTypeKey, type)
  },
  // 获取用户类型
  getUserType: () => Storage.get(userTypeKey),

  // 按钮权限
  setPermission: permission => {
    Storage.set(permissionKey, permission)
  },
  getPermission: () => {
    return Storage.get(permissionKey)
  },

  // 设置layout key
  setHideMenu: val => {
    Storage.session.set(hideMenuKey, val)
  },
  getHideMenu: () => {
    return Storage.session.get(hideMenuKey)
  },

  // 设置menu
  setRouteMenu: val => {
    Storage.session.set(menuKey, val)
  },
  getRouteMenu: () => {
    return Storage.session.get(menuKey)
  },
  // 存储url获取的districtCode
  setDistrictCode: info => {
    Storage.set(districtCodeKey, info)
  },
  // 获取url获取的districtCode
  getDistrictCode: () => Storage.get(districtCodeKey),

  // 存储token验证登录获取的省市区全部数据
  setAreaOptions: info => {
    Storage.set(areaOptionsKey, info)
  },
  // 获取token验证登录获取的省市区全部数据
  getAreaOptions: () => Storage.get(areaOptionsKey),

}