自定义axios配置多个ip

这几天项目遇到一个情况：一个vue项目除了对接的后端的接口，还需要去使用统一登录平台的登录以及权限等接口，分别部署在不同服务器中；本来还一种处理方法就是后端做一次接口转发，这样我们就不需要另外配置ip了，但是由于开发任务较紧急不能额外占据更多资源，就意味着要前端自己处理(其实也非常简单)

主要思路还是创建两个axios实例，这样就能配置两个baseURL。。。。以此类推N+1都行，当然肯定也不能直接 const service = axios.create({}) const service2 = axios.create({})等等。。。

直接上代码

import axios from 'axios'
import { message } from 'com/resetMessage'
// import store from '@/store' 
let localIp = '192.168.66.11'
//port为自定义的端口号，host为自定义ip类似于localIp
export const baseUrl = (port, host) => {
  if (!port) port = '9527' //默认主要使用的是9527
  let hostname = ''
  if (host) { // 不传host就默认获取前端部署服务的ip，一般与后端地址一致
    hostname = host
    localIp = host
  } else {
    hostname = window.location.hostname
  }
  let origin = 'http://' + hostname + ':' + port
  // 主要省了配置开发环境ip(公司项目环境决定，一般面向小区或者政府-可能多个小区使用不同ip：都是泪)
  let url = 
    process.env.NODE_ENV === 'development'
      ? 'http://' + localIp + ':' + port
      : origin
  return url
}

//将axios封装到一个可配置的函数中createService
const createService = baseURL => {
  const service = axios.create({
    baseURL,
    timeout: 5000 // request timeout
  })

  service.interceptors.request.use(
    config => {
    //此处添加请求头 自定义一些字段，但是类似于汉字需要使用encodeURIComponent()进行转码
      config.headers['Content-Type'] = 'application/json;charset=UTF-8'
      config.headers['Authorization'] =
        window.localStorage.getItem('Authorization') || ''
      config.headers['realName'] =
        encodeURIComponent(window.localStorage.getItem('realName')) || ''
      return config
    },
    error => {
      Promise.reject(error)
    }
  )
  service.interceptors.response.use(
    response => {
      const res = response.data
      //下面的是个人项目与后端的约定，根据需求调整
      if (res.code && res.code !== 200) {
        message({
          message: res.message || res.error || '请求失败',
          type: 'error',
          duration: 1000
        })
        //这里请求失败我就直接message提示，前端调用接口时候不需要再次if(成功){}else{失败}判断
        //界面使用时候接口失败还会直接反馈前端一个false,直接if(data)即可，失败不需要关注处理
        Promise.reject(false)
      } else {
      //token失效情况
        if (res.code === '99998') {
          window.localStorage.clear()
        }
        //其他即为成功直接返回成功数据
        return res
      }
    },
    error => {
      console.log(error)
      message({
        message: error,
        type: 'error' || '网络错误',
        duration: 1000,
        onClose: () => {
          Promise.reject(false)
        }
      })
    }
  )
  return service
}
// 默认主要使用ip
const request = createService(baseUrl())
// 统一登录平台使用
const fetch = createService(baseUrl('2001', '192.168.x.xx'))
export { request, fetch }

使用方式参考上一篇文章第四条 http请求统一配置
如下:

import {request,fetch} from 'comJs/api'
import * as userUrl from '@/api/constant/user'
export const login = data => {
  return request({ url: userUrl.login, data, method: 'post' })
}
export const vaildLogin = data => {
  return request({ url: userUrl.vaildLogin, data, method: 'post' })
}
//这里request可以看成baseURL1   fetch为baseURL2    以此类推。。。。随意定制即可