vue项目中如何调用多个不同的ip接口
作者:曾经的你d 时间:2024-04-10 10:32:37
如何调用多个不同的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环境和生产环境
来源:https://blog.csdn.net/m0_52539553/article/details/125990964
标签:vue,调用,ip,接口
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
mysql去重查询的三种方法小结
2024-01-21 14:52:22
![](https://img.aspxhome.com/file/2023/1/112631_0s.jpg)
python实现美团订单推送到测试环境,提供便利操作示例
2023-03-23 13:39:54
Javascript操作表单之间的数据传递
2007-10-25 12:58:00
css实现图片倒影效果
2007-11-05 18:29:00
![](https://img.aspxhome.com/file/UploadPic/200711/5/2007115184648157s.jpg)
python实现人脸检测的简单实例
2023-02-17 16:08:20
![](https://img.aspxhome.com/file/2023/8/71358_0s.jpg)
Python用二分法求平方根的案例
2021-09-27 10:05:01
python通配符之glob模块的使用详解
2021-07-16 23:13:18
JSP实现浏览器关闭cookies情况下的会话管理
2024-03-27 07:29:10
js实现屏蔽默认快捷键调用自定义事件示例
2023-09-05 09:28:31
jupyter notebook 调用环境中的Keras或者pytorch教程
2022-10-07 23:23:09
![](https://img.aspxhome.com/file/2023/5/92525_0s.jpg)
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2023-04-21 19:20:50
![](https://img.aspxhome.com/file/2023/1/109951_0s.gif)
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2024-06-05 09:22:11
使用python实现三维图可视化
2021-07-31 02:28:57
![](https://img.aspxhome.com/file/2023/8/64278_0s.png)
快速解决jupyter notebook启动需要密码的问题
2023-09-27 23:56:49
![](https://img.aspxhome.com/file/2023/9/97039_0s.jpg)
浅谈PL/SQL批处理语句:BULK COLLECT与FORALL对优化做出的贡献
2024-01-14 01:04:27
![](https://img.aspxhome.com/file/2023/5/64845_0s.png)
Python实现简单的四则运算计算器
2022-12-29 20:44:08
Python爬虫实现selenium处理iframe作用域问题
2021-05-23 03:09:42
![](https://img.aspxhome.com/file/2023/1/107291_0s.png)
Golang汇编之控制流深入分析讲解
2024-05-08 10:15:11
ASP.NET Core Web API 教程Project Configuration
2024-06-05 09:32:41
![](https://img.aspxhome.com/file/2023/0/122780_0s.png)
mysql建立自定义函数的问题
2024-01-19 06:26:52