如何调用多个不同的ip接口
灵感来源:
- 项目的登录登出权限是调A的ip下面的接口,其他的功能调的接口是B的ip下面的接口
思路:
- 其实就是多写几个request.js文件罢了,或者在一个文件里面多写几个响应拦截和请求拦截.
上代码:
第一个文件
request.js
import axios from 'axios' import Vue from 'vue' if(process.env.NODE_ENV == "development"){//开发环境 axios.defaults.baseURL = 'http://xxxxxx/air/'; }else if(process.env.NODE_ENV == "production"){ axios.defaults.baseURL = '/air/api'; // 生产环境 } const service = axios.create({ timeout: 20000, }) // 请求拦截 service.interceptors.request.use( config => { return config; }, error => { // 请求错误处理....... } ) // 响应拦截 service.interceptors.response.use( response =>{ //响应结果处理....... }, error => { // 请求错误处理....... } ) export default service
第二个文件
requestSec.js
import axios from 'axios' import Vue from 'vue' if(process.env.NODE_ENV == "development"){//开发环境 axios.defaults.baseURL = 'http://xxxxxx/air/'; }else if(process.env.NODE_ENV == "production"){ axios.defaults.baseURL = '/air/api'; // 生产环境 } const sec = axios.create({ timeout: 20000, }) // 请求拦截 sec.interceptors.request.use( config => { return config; }, error => { // 请求错误处理....... } ) // 响应拦截 sec.interceptors.response.use( response =>{ //响应结果处理....... }, error => { // 请求错误处理....... } ) export default sec
哎?你会发现这两个文件不是一样的吗,对,就是一样的,只不过是声明了两个请求拦截和响应拦截罢了.你也可以放到一个文件里面.都一样.
第三个文件
封装的接口文件
import axios from './request' import sec from './requestSec' // 登录 export function login(data) { return sec({ method:'post', url:'system/login', data, }) } // 分页查询所有管辖区域 export function queryWithPageAll(params) { return axios({ method:'get', url:'area/queryAll', params }) }
到这里就可以看出不一样了,如果要调用request里面ip下面的接口就return axios 如果要调用requestSec里面ip下面的接口就return sec
其他就是正常的了,哪个页面调用就正常调用就可以了.
设置自动配置不同环境接口
1.再根目录新建一个文件夹configenv
在文件夹下新建baseServerConfig.js
module.exports = { // 本地环境设置 测试接口的地址 "localhost:8010": { mallUrl: 'http://202.108.22.5:8000', storeHouseUrl: 'http://202.108.22.103:8080', }, // 本地IP环境设置 测试接口的地址 "10.12.5.46:8010": { mallUrl: 'http://202.108.22.5:8000', storeHouseUrl: 'http://202.108.22.103:8080', }, // 测试环境设置 测试接口的地址 "22.81.24.60:8080": { mallUrl: 'http://202.108.22.5:8000', storeHouseUrl: 'http://202.108.22.103:8080', }, // UAT环境设置 UAT接口地址 "uat.baidu.com": { mallUrl: 'http://uat.baidu.com', storeHouseUrl: 'http://uat-init.baidu.com' }, //生产环境设置 生产接口地址 "www.baidu.com": { mallUrl: 'http://www.baidu.com', storeHouseUrl: 'http://init.baidu.com' } }
2.在main.js 入口文件中
引入baseServerConfig,用变量接收当前的环境 对应的接口地址,把这个变量放入Vue的原型的属性上
import baseServer from '../configenv/baseServerConfig' const mallUrl= baseServer[location.host].mallUrl const storeHouseUrl= baseServer[location.host].storeHouseUrl Vue.prototype.mallUrl= mallUrl;//商城地址 Vue.prototype.storeHouseUrl= storeHouseUrl;//仓库地址
3.在实际Vue页面中,接口实际调用
this.$http.get(this.mallUrl+"/api/a/b/c").then(resp =>{ // 写逻辑 }) this.$http.get(this.storeHouseUrl+"/api/abc/b/c").then(resp =>{ // 写逻辑 })
小结:这样就实现了当前环境 与 不同环境接口相互绑定,避免人员重复的切换接口环境。
从而实现了npm run build 一个包既可以放在测试环境、UAT环境和生产环境
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。