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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

第二个文件
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

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
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

到这里就可以看出不一样了,如果要调用request里面ip下面的接口就return axios 如果要调用requestSec里面ip下面的接口就return sec
其他就是正常的了,哪个页面调用就正常调用就可以了.
📢ok.到此为止,朋友们我们下篇文章再见~
📢如果此篇博文对您有帮助，还请动动小手点赞 👍 收藏 ⭐留言 📝呐~，谢谢 ~ ~