React、Vue项目中如何调用多个不同的后台请求地址

简介: React、Vue项目中如何调用多个不同的后台请求地址

在一般项目中这个问题不会出现,但是在二般项目中还是会出现类似问题,就比如:医院项目中,表单接口是:

http://192.168.2.1:900
而有一个登录接口,后台请求地址是

http://192.168.2.2:900
这种情况下怎么办呢?

虽然有的伙伴说,老师,你说的这个问题一般在我这里碰不到的,毕竟我们就一个服务器。

话虽没错。线上一个服务器,那如果说这是在内网环境下部署呢,就比如医院项目中,有三个服务器,一个资源上传,一个普通接口(包含认证),一个表单数据记录。

当三个不同地址的接口放在一起的时候,我们的vue项目还能解决吗?

答案是:一定能!

首先,我们先来拆解它的需求,也就是说我们一个网页项目需要同时使用三个不同地址的需求。

一般来说我们项目只能配置一个请求地址,那是没错的。但是我们同样也可以处理当前这个请求地址走一个配置文件,而我们三个不同的请求地址统一指向这个配置文件即可。类似于下方:
image.png

不知道各位伙伴看的懂不。

大概意思就是,在我们前端项目中新建一个配置文件,在这个配置文件中设置接口请求地址。

然后将这个配置文件引入到我们的项目中,并在每次打开时候进行获取,然后加载。在项目每次发起请求的时候,根据当前业务传入不同的参数,分别获取不同的请求接口即可。

说干就干。

  1. 我们在项目的工具目录下创建一个接口配置文件,config.js。并声明三个不同地址的接口。

image.png
image.png

  1. 我们在根目录创建一个方法文件,util.js。用来判断当前接口的地址

image.png

上述代码中axios,是我二次封装的axios,axios的部分代码如下,它接收传递进来的url 做为项目的请求地址。
image.png

  1. 我们在接口维护处判断当前使用哪个接口。如下方我们默认就是BS这个地址,所以我们可以不传

    image.png

如果这个接口走的是IOT的话,我们则如下

image.png

这样的话,我们成功实现了当前项目支持多个不同请求地址的办法。其实原理很简单,就是我需要哪个接口引入哪个接口进来就行。如果还有疑问,可以欢迎留言。

目录
相关文章
|
2月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
166 2
|
1月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
25天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
18天前
|
JavaScript 前端开发 测试技术
React和Vue的性能对比如何?
需要注意的是,性能不仅仅取决于框架本身,还与开发者的代码质量、架构设计以及项目的优化程度等密切相关。因此,在评估性能时,应该综合考虑多个因素,而不是仅仅局限于框架之间的比较。
80 1
|
24天前
|
JavaScript 前端开发 算法
React 框架和 Vue 框架的区别是什么?
React框架和Vue框架都是目前非常流行的前端JavaScript框架,它们在很多方面存在区别
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
1月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
2月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
21 7
|
1月前
|
JavaScript 前端开发 算法
在性能上,React和Vue有什么区别
【10月更文挑战第23天】在性能上,React和Vue有什么区别
18 1
|
1月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。