前提:在项目有封装好的api接口请求地址的基础上,我需要向另一个api发送请求,不想把url直接写成固定的网址.想写成url:this.$http.getUrl('/123')这种
解决方法:
我的是vue2创建的项目,项目目录是这种
1.在static文件夹下的config文件夹下的index.js先配置一下url
这里写了两种:
第一种:适用于请求的url固定不变的状况
// 举例
window.SITE_CONFIG['address'] = '192.168.x.xx'
window.SITE_CONFIG['port'] = 8000
第二种:适用于请求的url端口号不同的状况
注意:我在网址后面加了:冒号,因为是用来拼接不同的端口号
// 举例
window.SITE_CONFIG['pythonAddress'] = 'http://192.168.x.xxx:'
window.SITE_CONFIG['pythonPort'] = [8001, 5000, 6001]
2.在src目录下的utils文件夹下找到之前建立的httpRequest.js,就是你配置baseUrl的文件里对请求地址做一下处理,这里只展示了第二种情况
这里传入了两个参数port和actionName,port是端口号,actionName是url后面的'/save'这种
/**
* python请求地址处理
* @param {*} actionName action方法名称
*/
http.python = (port,actionName) => {
// 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.pythonAddress+port+'/') + actionName
}
3.在请求中把固定的url替换成封装后的
首先在data中定义变量接收我们之前写好的端口号数组
data(){
return{
pythonPort:window.SITE_CONFIG.pythonPort;// pythonPort:[8001, 5000, 6001]
}
}
然后修改请求中的url
this.$http({
url: this.$http.python(this.pythonPort[1],'askanswer'),
//其实url最后就是 http://196.168.x.xxx/askanswer
method: "get",
params:......
})
不过有个小问题,好像在打包以后url不太对,就只能保证开发环境下正常使用
唉,继续想办法ing o(╥﹏╥)o