axios在vue中的实践模式

import axios from 'axios'
import { Message } from 'element-ui'
import router from '@/router'
import { removeToken, getToken } from '@/utils/myAuth.js'


var host;

switch (process.env.VUE_APP_Mode) {
  case "development": host = "http://testwxworkapi.try.com"; break;
  case "pre": host = "https://prewxworkapi.try.com"; break;
  case "dd": host = "http://testwxworkapi.try.com"; break;
  default: host = "https://wxworkapi.try.com";
}

const service = axios.create({
  baseURL: host, 
  timeout: 60000 
})

// request interceptor
service.interceptors.request.use(
  config => {
    var token = getToken()
    if (token) {
      config.headers['token'] = token
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    const res = response.data
    //     0	操作成功
    // -1	服务器异常
    // 71001	未登录
    // 71002	登录状态已过期
    // 71003  非法
    if (res.code === -1) {
      Message({
        message: res.message,
        type: 'warning'
      });
    }
    if (res.code === 71002) {
      Message({
        message: '登录已过期，即将跳转重登页面',
        type: 'warning',
        duration: 3 * 1000
      });
    }
    if (res.code === 71002 || res.code === 71001 || res.code === 71003) {
      removeToken()
      router.push('/login')
    }
    return res
  },
  error => {
    console.log('err' + error)
    return Promise.reject(error || '请求错误')
  }
)
/**
 * 合并get与post提交
 * @param {} config
 */
function http(config) {
  if (config.data) {
    if (Object.keys(config.data).length > 0) {
      var key = config.method.toLowerCase() === 'get' ? 'params' : 'data'
      config[key] = config.data
    }
  }
  return service(config)
}
export default http
export { host }

• 每个页面单独export

• 使用时 import * as $api from '@/api/invite';

• $api.inviteQR(..){...}

• 这样做的好处是 若是传统方式import { inviteQR } from '@/api/invite' 引入若未使用会报错，这样写只要有一个地方用 就不用再劳烦调试过程中来回注释