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

[cwz346852114]

创建多个 axios 实例肯定是最愚蠢的解决方案 。 大佬们是怎么解决这个问题的

[learningman]

RTFM

[66beta]

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

[cwz346852114]

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

[akaxiaok339]

baseURL 和 URL 还不够用吗

[qiayue]

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

[cwz346852114]

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

[cwz346852114]

@akaxiaok339 不够用

[zhlssg]

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

[66beta]

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

[H15018327040]

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

[treblex]

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

[yungo8]

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

[cwz346852114]

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

[cwz346852114]

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

[jiangshanmeta]

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

[y4ZIZrCL74b9MYl6]

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

[Shook]

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

[H15018327040]

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

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

[cwz346852114]

@H15018327040 这个是一个解决方案

[cwz346852114]

@jiangshanmeta 小公司没运维

[cwz346852114]

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

[cwz346852114]

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

[GzhiYi]

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

[treblex]

@cwz346852114 

做好分组导出就行

[woodie1994]

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

[codder]

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

[H15018327040]

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

[cwz346852114]

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

[H15018327040]

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

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

[Shook]

// 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;
});

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

[Vegetable]

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

[lliu3]

baseUrl 通过 store 动态获取