axios 配置多个 url 是怎么实现的前端大佬看过来。

axios

大佬

url

实例

32 条回复 • 2021-03-24 17:04:36 +08:00

1

learningman

2021-03-24 10:27:15 +08:00 via Android

RTFM

2

66beta

2021-03-24 10:28:47 +08:00

看标题不知道你想要啥，多机房随机一个发送请求？

3

cwz346852114

OP

2021-03-24 10:33:17 +08:00

@66beta 动态配置 url 但是只创建一个 axios 实例

4

akaxiaok339

2021-03-24 10:35:39 +08:00

baseURL 和 URL 还不够用吗

5

qiayue

2021-03-24 10:35:43 +08:00

建议把你最原始需求说出来，现在你说的是你为了解决最原始需求想到的一个解决方案，但很可能这不是最优方案

6

cwz346852114

OP

2021-03-24 10:37:43 +08:00

@qiayue 后端之前一个项目拆成两个项目了然后域名不一致如果创建多个 axios 实例是能解决这个问题拓展开来这个方案就有点问题如果项目扩充请求多个 url 不可能一个 url 配置一个 axios 实例，所以如果一个 axios 能解决 n 个域名的问题

7

cwz346852114

OP

2021-03-24 10:37:57 +08:00

@akaxiaok339 不够用

8

zhlssg

2021-03-24 10:38:54 +08:00

如果是多个 baseUrl 的话，多实例，在后再原型对象上做拦截器处理就好了
不想多实例，那么就不要配置 baseUrl 属性，在每个请求里添加一个额外标识，然后用 transform，或者拦截器里，拿到标识后在各自添加前缀路径

9

66beta

2021-03-24 10:42:18 +08:00

1

axios 实例一般都是一个，你调用的时候给的 url 不一样，跟后端有几个域名无关

10

H15018327040

2021-03-24 10:43:07 +08:00

如何判断这个请求是要发往那个服务器的呢？

11

treblex

2021-03-24 10:44:06 +08:00

2 个实例没什么不好的，拦截器有通用的复用一下就行了

12

yeqizhang

2021-03-24 10:44:17 +08:00

我看我这边前端只用了一个， baseurl 然后拼接后端给的不一样的代理路径的..... 你搞几个不一样的 baseurl 来拼接不行吗？难不成是想解决跨域？

13

cwz346852114

OP

2021-03-24 10:58:00 +08:00

@yeqizhang 是这样的 url 是前面的域名路径比如我服务端 n 个项目部署在 n 个域名上那么要请求 n 个域名

14

cwz346852114

OP

2021-03-24 10:58:52 +08:00

@treblex 2 个实例是没问题但是多了呢？

15

jiangshanmeta

2021-03-24 11:00:54 +08:00

后端两个服务请求路径给不同前缀 /service1/api /service2/api 这样然后请求就请求本域召唤运维配转发顺便还能解决跨域

16

overflow99

2021-03-24 11:01:15 +08:00

不使用 baseURL 封装，每次调用都传入新的 url

17

Shook

2021-03-24 11:01:35 +08:00

1. 合并请求参数
2. 拦截器处理
3. proxy 处理

18

H15018327040

2021-03-24 11:02:31 +08:00

let baseUrl="http://192.168.1.89:8080"
export default {
login(param) {
return axiosInstance.post("/login",param,{
baseUrl:baseUrl
})
}
}

同一个域名的请求写在同一个 js 里面。

19

cwz346852114

OP

2021-03-24 11:04:26 +08:00

@H15018327040 这个是一个解决方案

20

cwz346852114

OP

2021-03-24 11:04:48 +08:00

@jiangshanmeta 小公司没运维

21

cwz346852114

OP

2021-03-24 11:06:02 +08:00

@H15018327040 如果 url 多了那你这个 js 文件也挺多的

22

cwz346852114

OP

2021-03-24 11:07:26 +08:00

@Shook proxy 代理服务端无法使用

23

GzhiYi

2021-03-24 11:16:17 +08:00

一个实例可以扩展多个不同的请求方法
const ins = axios.create({})
const requestOne = (url, params, config = {}) => {
return ins({
url: `${domain1}/url`
})
}
const requestTwo = (url, params, config = {}) => {
return ins({
url: `${domain2}/url`
})
}

24

treblex

2021-03-24 11:16:36 +08:00

@cwz346852114 ![]( https://tva1.sinaimg.cn/large/008eGmZEly1goutphue9vj31e40k0abf.jpg)

做好分组导出就行

25

woodie1994

2021-03-24 11:17:14 +08:00

baseUrl 可以覆盖的，像这样 return request({
url: 'x'x'x',
method: 'post',
data,
baseURL: 'https://xxx'
})

26

codder

2021-03-24 11:23:24 +08:00

你将 axios 封装成一个类，不同的接口就生成不同的实例并传入对应的 baseURl 就好了啊！

27

H15018327040

2021-03-24 11:27:53 +08:00

@cwz346852114 也可以组成一个文件，只是一个域名一个文件好做管理，这种多域名也不至于多到十几个吧，如果真有十几个，就得考虑业务是不是有问题了。

28

cwz346852114

OP

2021-03-24 11:32:00 +08:00

@H15018327040 前端做统一路径后端做接口分发这个方案比较好一点吧

29

H15018327040

2021-03-24 11:35:32 +08:00

前端：这个需求前端不好做，后端好做，

后端：这个需求后端不好做，前端好做，/狗头

30

Shook

2021-03-24 11:36:30 +08:00

// types.js
export const types = {
--baidu: 'https://www.baidu.com/',
--google: 'https://www.google.com/',
};

// solution 1:
import axios from 'axios';
import { types } from './types';
const useTypedHttp = (type, options) => axios.request({
--baseURL: types[type] ?? type,
--...options,
});

// solution 2:
import axios from 'axios';
import { types } from './types';
axios.interceptors.request.use(config => {
--const options = { { /* default option properties */ }, ...config.options };
--if (options.type && types[options.type]) {
----config.baseURL = types[options.type];
--}
--return config;
});

还可以自己写替换前缀啥的，方法好多的。

31

Vegetable

2021-03-24 11:40:18 +08:00

创建多个实例，对小公司来说可能是最好的解决方案。

32

lliu3

2021-03-24 17:04:36 +08:00

baseUrl 通过 store 动态获取