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

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

http://192.168.2.1:900

而有一个登录接口，后台请求地址是

http://192.168.2.2:900

这种情况下怎么办呢？

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

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

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

答案是：一定能！

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

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

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

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

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

 说干就干。

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

 

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

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

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

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

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