axios中引入多个baseURL的解决方案

背景

在我们实际的项目开发中，经常会遇到需要同时访问多个不同的服务端的情况，而每个服务端的API地址都是不同的。使用axios作为HTTP请求库时，我们需要解决如何在代码中引入多个baseURL的问题。

解决方案

方案一：配置多个实例

最简单的方案是配置多个axios实例，每个实例使用不同的baseURL。比如，我们可以这样来配置两个不同的axios实例：

import axios from 'axios';

const instance1 = axios.create({
  baseURL: 'https://api.example.com/'
});

const instance2 = axios.create({
  baseURL: 'https://api.another-example.com/'
});

这样，在实际使用时，我们可以根据访问的服务端，选择使用哪个实例来进行请求：

instance1.get('/users').then(response => {
  console.log(response.data);
});

instance2.get('/products').then(response => {
  console.log(response.data);
});

但是，这种方案有一个缺点，就是需要在每个请求中指定使用哪个实例，这会造成代码的冗余和可读性的降低。

方案二：使用拦截器

我们可以使用axios提供的拦截器来解决这个问题，将baseURL作为请求的一个参数来传递。具体实现可以参考下面的代码：

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com/'
});

axiosInstance.interceptors.request.use(config => {
  const { baseURL } = config.params || {};

  if (baseURL) {
    config.baseURL = baseURL;
  }

  return config;
});

export default axiosInstance;

在代码中，我们首先创建了一个默认的axios实例，并将其baseURL设置为我们默认的API地址。然后，我们在这个实例上添加了一个请求拦截器，在每个请求发出前，检查参数中是否有baseURL这个属性，如果有，就将当前请求的baseURL修改为这个参数中指定的地址。

这样，在实际使用时，我们只需要在每个请求中传递一个名为baseURL的参数，就可以指定当前请求的API地址：

import axiosInstance from '@/config/axios';

axiosInstance.get('/users', {
  params: {
    baseURL: 'https://api.another-example.com/'
  }
}).then(response => {
  console.log(response.data);
});

这种方案虽然在代码中增加了一些复杂度，但是通过传递参数来指定baseURL，可以使得代码更加灵活和可读性更高。

总结

以上就是在axios中引入多个baseURL的两种解决方案。方案一比较简单，但是需要在每个请求中指定使用哪个实例，代码较为冗余；方案二通过使用拦截器，可以将baseURL作为请求的参数来传递，代码更加灵活。根据实际项目需求，可以选择适合自己的解决方案。