Axios如何绑定baseURL？求其库内实现原理解析

核心思路 #

Axios的create本质是生成一个携带自定义配置的请求实例，所有通过该实例发起的请求，都会自动用实例的baseURL拼接请求路径。关键是把配置和请求方法绑定到同一个实例上，在请求执行阶段完成URL拼接。

实现步骤与代码示例 #

1. 编写核心的Axios构造函数

首先创建一个Axios构造函数，用来保存实例配置，并实现URL拼接的核心逻辑：

// axios.js
function Axios(config) {
  // 合并默认配置与传入的自定义配置
  this.defaults = Object.assign({
    baseURL: ''
  }, config);
}

// 实现URL拼接的核心方法，处理斜杠边界问题
Axios.prototype.getFullUrl = function(url) {
  if (!this.defaults.baseURL) return url;
  
  const baseHasTrailingSlash = this.defaults.baseURL.endsWith('/');
  const urlHasLeadingSlash = url.startsWith('/');
  
  // 处理双斜杠或无斜杠的情况
  if (baseHasTrailingSlash && urlHasLeadingSlash) {
    return this.defaults.baseURL + url.slice(1);
  }
  if (!baseHasTrailingSlash && !urlHasLeadingSlash) {
    return this.defaults.baseURL + '/' + url;
  }
  // 其余情况直接拼接
  return this.defaults.baseURL + url;
};

// 实现GET请求方法
Axios.prototype.get = function(url, config = {}) {
  const fullUrl = this.getFullUrl(url);
  // 替换为实际的XHR/fetch请求逻辑
  return fetch(fullUrl, {
    method: 'GET',
    ...config
  }).then(res => res.json());
};

// 实现POST请求方法（可同理扩展PUT/DELETE等）
Axios.prototype.post = function(url, data, config = {}) {
  const fullUrl = this.getFullUrl(url);
  return fetch(fullUrl, {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json',
      ...config.headers
    },
    ...config
  }).then(res => res.json());
};

2. 实现create函数并导出默认实例

create函数的作用是生成新的Axios实例，同时把原型方法绑定到实例上，让调用更简洁：

// 辅助函数：把原型方法绑定到实例，实现直接调用instance.get()
function createInstance(config) {
  const instance = new Axios(config);
  
  const bindMethod = method => instance[method].bind(instance);
  
  return {
    get: bindMethod('get'),
    post: bindMethod('post'),
    defaults: instance.defaults
  };
}

// 创建全局默认实例
const axios = createInstance({});

// 实现create方法，合并默认配置与自定义配置
axios.create = function(config) {
  const mergedConfig = Object.assign({}, axios.defaults, config);
  return createInstance(mergedConfig);
};

export default axios;

3. 实际使用示例

• fileOne.js：创建带baseURL的实例

import axios from './axios.js';

// 生成携带baseURL的自定义实例
const api = axios.create({
  baseURL: 'https://some-domain.com/api'
});

export default api;

• fileTwo.js：使用实例发起请求，自动拼接URL

import api from './fileOne.js';

// 传入相对路径，自动拼接为完整URL：https://some-domain.com/api/user/12345
api.get('/user/12345')
  .then(data => console.log(data))
  .catch(err => console.error(err));

关键细节说明 #

• 配置隔离：每个create生成的实例都有独立配置，不会互相干扰，这是Axios的核心特性之一。
• URL边界处理：专门处理了baseURL结尾和请求路径开头的斜杠，避免出现https://xxx/api//user/123这类错误URL。
• 方法绑定：通过bind把原型方法的this指向当前实例，确保请求时能正确读取实例的baseURL配置。

内容的提问来源于stack exchange，提问作者Moisés Aray