Axios 自定义基础 URL 详解：灵活修改，针对不同请求

灵活修改 Axios 基础 URL：针对特定请求自定义请求

问题

在 Axios 中，使用默认基础 URL 非常方便。但是，当我们需要为特定请求修改基础 URL 时，就会遇到难题。全局基础 URL 的修改会影响所有请求，这不是我们想要的。

解决方案：创建自定义 Axios 实例

我们可以通过创建新的 Axios 实例来解决这个问题。这个新实例具有自定义的基础 URL，与全局基础 URL 无关。以下是实现步骤：

1. 创建自定义 Axios 实例

使用 axios.create 方法，指定自定义基础 URL：

const customAxios = axios.create({
  baseURL: "http://127.0.0.1:8000",
});

2. 使用自定义实例发送请求

使用自定义实例发送请求时，将使用我们指定的自定义基础 URL：

customAxios.get('items').then()...

示例

以下示例展示了如何使用全局基础 URL 和自定义基础 URL：

const axiosConfig = {
  baseURL: 'http://127.0.0.1:8000/api',
  timeout: 30000,
};

Vue.prototype.$axios = axios.create(axiosConfig)

const customAxios = axios.create({
  baseURL: "http://127.0.0.1:8000",
});

this.$axios.get('items').then()... // 使用全局基础 URL
customAxios.get('items').then()... // 使用自定义基础 URL

结论

通过创建自定义 Axios 实例，我们可以灵活地修改基础 URL，而不会影响全局基础 URL。这在需要为特定请求自定义 URL 的场景中非常有用。

常见问题解答

1. 为什么不直接修改全局基础 URL？

直接修改全局基础 URL 会影响所有请求，这可能会导致意外的后果。使用自定义实例可以隔离特定请求的 URL 修改，避免影响全局请求。

2. 我可以创建多个自定义 Axios 实例吗？

是的，你可以创建多个自定义 Axios 实例，每个实例具有不同的基础 URL。这可以满足不同场景下的需求。

3. 自定义实例是否会影响全局请求头？

不会。自定义实例不会影响全局请求头。你可以根据需要在自定义实例中设置特定的请求头。

4. 如何避免自定义实例与全局实例混淆？

使用不同的实例名称或在自定义实例中添加标识信息来避免混淆。例如：

const customAxios = axios.create({
  baseURL: "http://127.0.0.1:8000",
  headers: {
    'X-Custom-Header': 'true',
  },
});

5. 什么时候应该使用自定义 Axios 实例？

当需要为特定请求修改基础 URL 时，就可以使用自定义 Axios 实例。例如：

• 与多个 API 交互，每个 API 具有不同的基础 URL。
• 调试或测试请求，需要使用不同的基础 URL。
• 访问外部服务，需要使用授权或自定义请求头。