Axios 底层 baseURL 拼接源码解析*

📌Axios 底层 baseURL 拼接源码解析

让我深入 Axios 源码，揭示 baseURL 拼接的底层实现机制：

🔍Axios 源码核心实现

1. 请求拦截核心 -dispatchRequest.js

// axios/lib/core/dispatchRequest.jsmodule.exports=functiondispatchRequest(config){// ⭐ 关键步骤：合并 baseURL 和 urlif(config.baseURL&&!isAbsoluteURL(config.url)){// 如果 url 不是绝对路径，就拼接 baseURLconfig.url=combineURLs(config.baseURL,config.url);}// 继续处理请求...returnadapter(config).then(...);}// 判断是否是绝对URLfunctionisAbsoluteURL(url){// 检查是否以协议开头（如 http://, https://）或以 // 开头return/^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url);}// 拼接URL的工具函数functioncombineURLs(baseURL,relativeURL){// 去掉 baseURL 末尾的 '/' 和 relativeURL 开头的 '/'returnrelativeURL?baseURL.replace(/\/+$/,'')+'/'+relativeURL.replace(/^\/+/,''):baseURL;}

2. 实际执行流程

// 假设配置constconfig={baseURL:'http://localhost:8081/jeecg-boot/',url:'/sys/user/list'}// 步骤1：判断 url 是否是绝对路径isAbsoluteURL('/sys/user/list')// false，因为不以 http:// 或 // 开头// 步骤2：拼接 baseURL 和 urlcombineURLs('http://localhost:8081/jeecg-boot/','/sys/user/list')// 执行过程：// 1. baseURL.replace(/\/+$/, '') → 'http://localhost:8081/jeecg-boot'（去掉末尾斜杠）// 2. relativeURL.replace(/^\/+/, '') → 'sys/user/list'（去掉开头斜杠）// 3. 拼接结果：'http://localhost:8081/jeecg-boot' + '/' + 'sys/user/list'// 最终：'http://localhost:8081/jeecg-boot/sys/user/list'

🏗️完整的底层调用链

// 1. 用户调用axios.get('/sys/user/list')// 2. Axios.prototype.request (axios/lib/core/Axios.js)Axios.prototype.request=functionrequest(config){if(typeofconfig==='string'){config=arguments[1]||{};config.url=arguments[0];// 设置 url}config=mergeConfig(this.defaults,config);// 合并默认配置returndispatchRequest(config);// 调用 dispatchRequest}// 3. dispatchRequest (axios/lib/core/dispatchRequest.js)functiondispatchRequest(config){// ⭐ 核心拼接逻辑if(config.baseURL&&!isAbsoluteURL(config.url)){config.url=combineURLs(config.baseURL,config.url);}returnadapter(config);}// 4. adapter (axios/lib/adapters/xhr.js) - 实际发送请求functionxhrAdapter(config){returnnewPromise(function(resolve,reject){varrequest=newXMLHttpRequest();// ⭐ 最终请求地址就是拼接后的 config.urlrequest.open(config.method.toUpperCase(),config.url,true);// 发送请求...});}

📊URL 拼接的几种情况

情况1：相对路径拼接

// baseURL = 'http://localhost:8081/jeecg-boot'// url = '/sys/user/list'// 源码处理config.baseURL='http://localhost:8081/jeecg-boot'config.url='/sys/user/list'// 拼接结果config.url='http://localhost:8081/jeecg-boot/sys/user/list'

情况2：绝对路径不拼接

// baseURL = 'http://localhost:8081/jeecg-boot'// url = 'http://other-domain.com/api'isAbsoluteURL('http://other-domain.com/api')// true// 直接返回原 url，不拼接config.url='http://other-domain.com/api'

情况3：无 baseURL

// baseURL = undefined// url = '/sys/user/list'// 因为 config.baseURL 为 false，跳过拼接config.url='/sys/user/list'

🔧JeecgBoot 中的具体实现

1. 配置初始化

// src/utils/request.jsconstservice=axios.create({baseURL:window._CONFIG['domianURL']||'/jeecg-boot',// ⭐ 设置 baseURLtimeout:60000})// 这里的 baseURL 会被合并到每个请求的 config 中

2. 请求拦截器（可查看最终URL）

// src/utils/request.jsservice.interceptors.request.use(config=>{console.log('请求前URL:',config.url)console.log('baseURL:',config.baseURL)// 如果想查看最终拼接后的完整URLconstfullUrl=config.baseURL+config.url console.log('完整请求地址:',fullUrl)// 添加 token 等returnconfig})

3. 响应拦截器

service.interceptors.response.use(response=>{console.log('请求成功URL:',response.config.url)returnresponse.data})

🎯手动实现类似功能

// 自己实现一个简单的拼接函数classSimpleAxios{constructor(config){this.baseURL=config.baseURL||''}// 判断是否为绝对URLisAbsoluteURL(url){return/^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url)}// 拼接URLcombineURLs(baseURL,relativeURL){if(!baseURL)returnrelativeURLif(this.isAbsoluteURL(relativeURL))returnrelativeURLreturnbaseURL.replace(/\/+$/,'')+'/'+relativeURL.replace(/^\/+/,'')}// 请求方法request(url,options={}){// 拼接 URLconstfinalUrl=this.combineURLs(this.baseURL,url)console.log('最终请求地址:',finalUrl)// 发送请求...returnfetch(finalUrl,options)}get(url){returnthis.request(url,{method:'GET'})}post(url,data){returnthis.request(url,{method:'POST',body:JSON.stringify(data)})}}// 使用示例constaxios=newSimpleAxios({baseURL:'http://localhost:8081/jeecg-boot'})axios.get('/sys/user/list')// 输出: 最终请求地址: http://localhost:8081/jeecg-boot/sys/user/list

📝源码关键点总结

1. 判断条件：if (config.baseURL && !isAbsoluteURL(config.url))

   • 必须有 baseURL
   • url 不能是绝对路径

2. 拼接函数：combineURLs(baseURL, relativeURL)

   • 处理多余的斜杠
   • 保证格式正确

3. 执行时机：在dispatchRequest阶段

   • 所有拦截器执行之后
   • 实际发送请求之前

4. 最终使用：adapter 中直接使用拼接后的config.url

这个设计让 axios 既保持了灵活性（支持绝对路径），又提供了便利性（自动拼接 baseURL）。

📌是的，axios 会自动拼接 baseURL！

这是 axios 的核心功能之一，让我详细解释：

🔧axios 的 baseURL 机制

1. 基本工作原理

importaxiosfrom'axios'// 创建 axios 实例时设置 baseURLconstservice=axios.create({baseURL:'http://localhost:8081/jeecg-boot',// 基础路径timeout:60000})// 请求时只需写相对路径service.get('/sys/user/list')// 实际请求: http://localhost:8081/jeecg-boot/sys/user/listservice.post('/sys/user/add',{username:'张三'})// 实际请求: http://localhost:8081/jeecg-boot/sys/user/addservice.put('/sys/user/edit',{id:1,status:1})// 实际请求: http://localhost:8081/jeecg-boot/sys/user/edit

📊拼接规则详解

规则1：相对路径自动拼接

// baseURL = http://localhost:8081/jeecg-boot// ✅ 相对路径（以 / 开头）- 会拼接service.get('/sys/user/list')// 结果: http://localhost:8081/jeecg-boot/sys/user/list// ✅ 相对路径（不以 / 开头）- 也会拼接service.get('sys/user/list')// 结果: http://localhost:8081/jeecg-boot/sys/user/list

规则2：绝对路径不拼接

// baseURL = http://localhost:8081/jeecg-boot// ❌ 绝对路径（包含 http://）- 不拼接service.get('http://other-domain.com/api/test')// 结果: http://other-domain.com/api/test（直接使用，不拼接 baseURL）// ❌ 绝对路径（以 // 开头）- 不拼接service.get('//other-domain.com/api/test')// 结果: //other-domain.com/api/test（不拼接）

🔍JeecgBoot 中的实际应用

1. request.js 中的配置

// src/utils/request.jsimportaxiosfrom'axios'// 从 window._CONFIG 获取 baseURLconstapiBaseUrl=window._CONFIG['domianURL']||'/jeecg-boot'// 创建 axios 实例，设置 baseURLconstservice=axios.create({baseURL:apiBaseUrl,// ⭐ 这里设置全局 baseURLtimeout:60000,withCredentials:true})exportdefaultservice

2. api/manage.js 中的使用

// src/api/manage.jsimportservicefrom'@/utils/request'// 封装的 GET 请求exportfunctiongetAction(url,params){returnservice({url:url,// 只需传相对路径method:'get',params})// service 会自动拼接 baseURL + url}// 封装的 POST 请求exportfunctionpostAction(url,data){returnservice({url:url,// 只需传相对路径method:'post',data})}// 封装的 PUT 请求exportfunctionputAction(url,data){returnservice({url:url,// 只需传相对路径method:'put',data})}

3. 在组件中使用

// UserList.vueimport{getAction,postAction,putAction}from'@/api/manage'exportdefault{methods:{// 查询列表loadData(){// 只需传相对路径，axios 自动拼接 baseURLgetAction('/sys/user/list',{pageNo:1,pageSize:10})// 实际请求: http://localhost:8081/jeecg-boot/sys/user/list},// 新增用户addUser(){postAction('/sys/user/add',{username:'张三'})// 实际请求: http://localhost:8081/jeecg-boot/sys/user/add},// 编辑用户editUser(){putAction('/sys/user/edit',{id:1,status:1})// 实际请求: http://localhost:8081/jeecg-boot/sys/user/edit}}}

🎯查看实际请求地址

在浏览器控制台查看

// 方法1：在 Network 标签查看// F12 → Network → 找到请求 → 查看 Request URL// 方法2：在代码中打印service.interceptors.request.use(config=>{console.log('最终请求地址:',config.baseURL+config.url)console.log('完整URL:',config.url)returnconfig})

实际输出示例

// 当 baseURL = http://localhost:8081/jeecg-boot// 请求 /sys/user/list 时最终请求地址:http://localhost:8081/jeecg-boot/sys/user/list

💡拼接的三种情况

⚠️注意事项

1. 不要重复拼接

// ❌ 错误：手动拼接了 baseURLconstfullUrl='http://localhost:8081/jeecg-boot/sys/user/list'getAction(fullUrl)// 结果会变成 http://localhost:8081/jeecg-boot/http://localhost:8081/jeecg-boot/sys/user/list// ✅ 正确：只需传相对路径getAction('/sys/user/list')

2. 处理带参数的 URL

// 带查询参数的 URLgetAction('/sys/user/list',{pageNo:1,pageSize:10})// 最终: http://localhost:8081/jeecg-boot/sys/user/list?pageNo=1&pageSize=10// 带路径参数的 URLputAction('/sys/user/edit/1',{status:1})// 最终: http://localhost:8081/jeecg-boot/sys/user/edit/1

3. 检查 baseURL 是否正确

// 在 request.js 中添加调试代码console.log('当前 baseURL:',apiBaseUrl)// 输出: 当前 baseURL: http://localhost:8081/jeecg-boot

📝总结

是的，axios 会自动拼接 baseURL！

• 在 JeecgBoot 中，baseURL 在src/utils/request.js中设置
• 组件中调用getAction('/sys/user/list')时，axios 会自动拼接成http://localhost:8081/jeecg-boot/sys/user/list
• 这个机制让你只需写相对路径，简化了代码，便于切换不同环境的 API 地址