V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
cwz346852114
V2EX  ›  问与答

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

  •  
  •   cwz346852114 · 2021-03-24 10:25:17 +08:00 · 3248 次点击
    这是一个创建于 1100 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    32 条回复    2021-03-24 17:04:36 +08:00
    learningman
        1
    learningman  
       2021-03-24 10:27:15 +08:00 via Android
    RTFM
    66beta
        2
    66beta  
       2021-03-24 10:28:47 +08:00
    看标题不知道你想要啥,多机房随机一个发送请求?
    cwz346852114
        3
    cwz346852114  
    OP
       2021-03-24 10:33:17 +08:00
    @66beta 动态配置 url 但是只创建一个 axios 实例
    akaxiaok339
        4
    akaxiaok339  
       2021-03-24 10:35:39 +08:00
    baseURL 和 URL 还不够用吗
    qiayue
        5
    qiayue  
       2021-03-24 10:35:43 +08:00
    建议把你最原始需求说出来,现在你说的是你为了解决最原始需求想到的一个解决方案,但很可能这不是最优方案
    cwz346852114
        6
    cwz346852114  
    OP
       2021-03-24 10:37:43 +08:00
    @qiayue 后端之前一个项目拆成两个项目了 然后域名不一致 如果创建多个 axios 实例是能解决这个问题 拓展开来这个方案就有点问题 如果项目扩充请求多个 url 不可能一个 url 配置一个 axios 实例,所以 如果一个 axios 能解决 n 个域名的问题
    cwz346852114
        7
    cwz346852114  
    OP
       2021-03-24 10:37:57 +08:00
    @akaxiaok339 不够用
    zhlssg
        8
    zhlssg  
       2021-03-24 10:38:54 +08:00
    如果是多个 baseUrl 的话,多实例,在后再原型对象上做拦截器处理就好了
    不想多实例,那么就不要配置 baseUrl 属性,在每个请求里添加一个额外标识,然后用 transform,或者拦截器里,拿到标识后在各自添加前缀路径
    66beta
        9
    66beta  
       2021-03-24 10:42:18 +08:00   ❤️ 1
    axios 实例一般都是一个,你调用的时候给的 url 不一样,跟后端有几个域名无关
    H15018327040
        10
    H15018327040  
       2021-03-24 10:43:07 +08:00
    如何判断这个请求是要发往那个服务器的呢?
    treblex
        11
    treblex  
       2021-03-24 10:44:06 +08:00
    2 个实例没什么不好的,拦截器有通用的复用一下就行了
    yeqizhang
        12
    yeqizhang  
       2021-03-24 10:44:17 +08:00
    我看我这边前端只用了一个, baseurl 然后拼接后端给的不一样的代理路径的..... 你搞几个不一样的 baseurl 来拼接不行吗? 难不成是想解决跨域?
    cwz346852114
        13
    cwz346852114  
    OP
       2021-03-24 10:58:00 +08:00
    @yeqizhang 是这样的 url 是前面的域名路径 比如我服务端 n 个项目部署在 n 个域名上 那么要请求 n 个域名
    cwz346852114
        14
    cwz346852114  
    OP
       2021-03-24 10:58:52 +08:00
    @treblex 2 个实例是没问题 但是多了呢?
    jiangshanmeta
        15
    jiangshanmeta  
       2021-03-24 11:00:54 +08:00
    后端两个服务 请求路径给不同前缀 /service1/api /service2/api 这样 然后请求就请求本域 召唤运维配转发 顺便还能解决跨域
    overflow99
        16
    overflow99  
       2021-03-24 11:01:15 +08:00
    不使用 baseURL 封装,每次调用都传入新的 url
    Shook
        17
    Shook  
       2021-03-24 11:01:35 +08:00
    1. 合并请求参数
    2. 拦截器处理
    3. proxy 处理
    H15018327040
        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 里面。
    cwz346852114
        19
    cwz346852114  
    OP
       2021-03-24 11:04:26 +08:00
    @H15018327040 这个是一个解决方案
    cwz346852114
        20
    cwz346852114  
    OP
       2021-03-24 11:04:48 +08:00
    @jiangshanmeta 小公司没运维
    cwz346852114
        21
    cwz346852114  
    OP
       2021-03-24 11:06:02 +08:00
    @H15018327040 如果 url 多了 那你这个 js 文件也挺多的
    cwz346852114
        22
    cwz346852114  
    OP
       2021-03-24 11:07:26 +08:00
    @Shook proxy 代理服务端无法使用
    GzhiYi
        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`
    })
    }
    treblex
        24
    treblex  
       2021-03-24 11:16:36 +08:00
    woodie1994
        25
    woodie1994  
       2021-03-24 11:17:14 +08:00
    baseUrl 可以覆盖的,像这样 return request({
    url: 'x'x'x',
    method: 'post',
    data,
    baseURL: 'https://xxx'
    })
    codder
        26
    codder  
       2021-03-24 11:23:24 +08:00
    你将 axios 封装成一个类,不同的接口就生成不同的实例并传入对应的 baseURl 就好了啊!
    H15018327040
        27
    H15018327040  
       2021-03-24 11:27:53 +08:00
    @cwz346852114 也可以组成一个文件,只是一个域名一个文件好做管理,这种多域名也不至于多到十几个吧,如果真有十几个,就得考虑业务是不是有问题了。
    cwz346852114
        28
    cwz346852114  
    OP
       2021-03-24 11:32:00 +08:00
    @H15018327040 前端做统一路径 后端做接口分发这个方案比较好一点吧
    H15018327040
        29
    H15018327040  
       2021-03-24 11:35:32 +08:00
    前端:这个需求前端不好做,后端好做,

    后端:这个需求后端不好做,前端好做,/狗头
    Shook
        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;
    });

    还可以自己写替换前缀啥的,方法好多的。
    Vegetable
        31
    Vegetable  
       2021-03-24 11:40:18 +08:00
    创建多个实例,对小公司来说可能是最好的解决方案。
    lliu3
        32
    lliu3  
       2021-03-24 17:04:36 +08:00
    baseUrl 通过 store 动态获取
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2704 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 15:34 · PVG 23:34 · LAX 08:34 · JFK 11:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.