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

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

目录
相关文章
|
16天前
|
JSON 数据可视化 数据库
vue3+threejs+koa可视化项目——实现登录注册(第三步)
vue3+threejs+koa可视化项目——实现登录注册(第三步)
40 5
|
16天前
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
67 3
|
2天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
16天前
|
JavaScript 数据可视化 算法
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
36 6
|
2天前
|
资源调度 JavaScript 前端开发
vue 项目运行过程中出现错误的问题解决
vue 项目运行过程中出现错误的问题解决
|
3天前
|
JavaScript
vue项目切换页面白屏的解决方案
vue项目切换页面白屏的解决方案
6 0
|
3天前
|
XML JavaScript 前端开发
Vue3 项目中怎么使用 jsx——易懂
Vue3 项目中怎么使用 jsx——易懂
6 0
|
4天前
|
缓存 JavaScript API
一些常见的Vue项目性能优化策略
Vue项目性能优化包括代码分割、懒加载以减少初次加载时间;利用计算属性和侦听器处理复杂逻辑;优化v-for,使用key属性;减少DOM操作;借助Vue Devtools分析性能;图片优化如使用WebP格式和懒加载;异步加载组件;精简第三方库和插件;考虑服务端渲染或预渲染;以及优化网络请求,如合并请求和利用缓存。实际应用中,需根据项目需求选择合适策略。
12 2
|
12天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
13天前
|
开发框架 缓存 前端开发