vue项目中如何调用多个不同的ip接口

目录 如何调用多个不同的ip接口 第一个文件 第二个文件 第三个文件 设置自动配置不同环境接口 1.再根目录新建一个文件夹configenv 2.在main.js 入口文件中 3.在实际Vue页面中，接口实际调用

如何调用多个不同的ip接口

灵感来源：

项目的登录登出权限是调A的ip下面的接口,其他的功能调的接口是B的ip下面的接口

思路：

其实就是多写几个request.js文件罢了，或者在一个文件里面多写几个响应拦截和请求拦截.

上代码：

第一个文件

request.js

import axios from 'axios'
import Vue from 'vue'
if(process.env.NODE_ENV == "development"){//开发环境
? axios.defaults.baseURL = 'http://xxxxxx/air/';
}else if(process.env.NODE_ENV == "production"){
? axios.defaults.baseURL = '/air/api'; // 生产环境
}
const service = axios.create({
? timeout: 20000,
})
// 请求拦截
service.interceptors.request.use(
? config => {
? ? return config;
? },
? error => {
? ? // 请求错误处理.......
? }
)
// 响应拦截
service.interceptors.response.use(
? response =>{
? ? //响应结果处理.......
? },
? error => {
?? ?// 请求错误处理.......
? }
)
export default service

第二个文件

requestSec.js

import axios from 'axios'
import Vue from 'vue'
if(process.env.NODE_ENV == "development"){//开发环境
? axios.defaults.baseURL = 'http://xxxxxx/air/';
}else if(process.env.NODE_ENV == "production"){
? axios.defaults.baseURL = '/air/api'; // 生产环境
}
const sec = axios.create({
? timeout: 20000,
})
// 请求拦截
sec.interceptors.request.use(
? config => {
? ? return config;
? },
? error => {
? ? // 请求错误处理.......
? }
)
// 响应拦截
sec.interceptors.response.use(
? response =>{
? ? //响应结果处理.......
? },
? error => {
?? ?// 请求错误处理.......
? }
)
export default sec

哎?你会发现这两个文件不是一样的吗,对,就是一样的,只不过是声明了两个请求拦截和响应拦截罢了.你也可以放到一个文件里面.都一样.

第三个文件

封装的接口文件

import axios from './request'
import sec from './requestSec'
// 登录
export function login(data) {
? return sec({
? ? method:'post',
? ? url:'system/login',
? ? data,
? })
}
// 分页查询所有管辖区域
export function queryWithPageAll(params) {
? return axios({
? ? method:'get',
? ? url:'area/queryAll',
? ? params
? })
}

到这里就可以看出不一样了，如果要调用request里面ip下面的接口就return axios 如果要调用requestSec里面ip下面的接口就return sec

其他就是正常的了，哪个页面调用就正常调用就可以了.

设置自动配置不同环境接口

1.再根目录新建一个文件夹configenv

在文件夹下新建baseServerConfig.js

module.exports = {
? // 本地环境设置 测试接口的地址
? "localhost:8010": {
? ? mallUrl: 'http://202.108.22.5:8000',
? ? storeHouseUrl: 'http://202.108.22.103:8080',
? },
? // 本地IP环境设置 测试接口的地址
? "10.12.5.46:8010": {
? ? mallUrl: 'http://202.108.22.5:8000',
? ? storeHouseUrl: 'http://202.108.22.103:8080',
? },
? // 测试环境设置 测试接口的地址
? "22.81.24.60:8080": {
? ? mallUrl: 'http://202.108.22.5:8000',
? ? storeHouseUrl: 'http://202.108.22.103:8080',
? },
? // UAT环境设置 UAT接口地址
? "uat.baidu.com": {
? ? mallUrl: 'http://uat.baidu.com',
? ? storeHouseUrl: 'http://uat-init.baidu.com'?
? },
? ? //生产环境设置 生产接口地址
? "www.baidu.com": {
? ? mallUrl: 'http://www.baidu.com',
? ? storeHouseUrl: 'http://init.baidu.com'?
? }
}

2.在main.js 入口文件中

引入baseServerConfig，用变量接收当前的环境 对应的接口地址，把这个变量放入Vue的原型的属性上

import baseServer from 'configenv/baseServerConfig'
const mallUrl= baseServer[location.host].mallUrl
const storeHouseUrl= baseServer[location.host].storeHouseUrl
Vue.prototype.mallUrl= mallUrl;//商城地址
Vue.prototype.storeHouseUrl= storeHouseUrl;//仓库地址

3.在实际Vue页面中，接口实际调用

this.$http.get(this.mallUrl+"/api/a/b/c").then(resp =>{
?? ?// 写逻辑
}）
this.$http.get(this.storeHouseUrl+"/api/abc/b/c").then(resp =>{
?? ?// 写逻辑
}）

小结 ：这样就实现了当前环境 与 不同环境接口相互绑定，避免人员重复的切换接口环境。

从而实现了npm run build 一个包既可以放在测试环境、UAT环境和生产环境 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于vue项目中如何调用多个不同的ip接口的详细内容...