vue项目封装多个api接口

前提:在项目有封装好的api接口请求地址的基础上,我需要向另一个api发送请求,不想把url直接写成固定的网址.想写成url:this.$http.getUrl('/123')这种解决方法:我的是vue2创建的项目,项目目录是这种1.在static文件夹下的config文件夹下的index.js先配置一下url这里写了两种:第一种:适用于请求的url固定不变的状况// 举例window.SITE_

怎么吃不饱捏

2177人浏览 · 2022-04-20 12:23:14

怎么吃不饱捏 · 2022-04-20 12:23:14 发布

前提:在项目有封装好的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