Axios baseURL 动态设置的科普文章

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它提供了一个简单易用的 API，可以发送异步 HTTP 请求。在开发过程中，我们经常需要根据环境（开发环境、测试环境、生产环境）动态设置 baseURL，以适应不同的服务器地址。本文将详细介绍如何使用 Axios 动态设置 baseURL。

环境变量

在现代前端开发中，使用环境变量是一种常见的做法，可以根据不同环境配置不同的参数。我们可以使用 .env 文件来定义环境变量，并使用 dotenv 库来加载这些环境变量。

首先，安装 dotenv 库：

npm install dotenv

在项目根目录下创建 .env 文件，并定义环境变量：

# .env
REACT_APP_API_URL=

在项目中使用环境变量：

require('dotenv').config();

const apiUrl = process.env.REACT_APP_API_URL;

Axios 实例

Axios 允许我们创建实例，这些实例可以有自己的配置，包括 baseURL。我们可以为不同的环境创建不同的 Axios 实例。

// axiosInstance.js
import axios from 'axios';

const createAxiosInstance = (baseURL) => {
  return axios.create({
    baseURL,
    timeout: 1000,
  });
};

export default createAxiosInstance;

使用这个函数创建不同环境的 Axios 实例：

// api.js
import createAxiosInstance from './axiosInstance';

const api = createAxiosInstance(process.env.REACT_APP_API_URL);

export default {
  get: (url) => api.get(url),
  post: (url, data) => api.post(url, data),
};

动态设置 baseURL

在某些情况下，我们可能需要在运行时动态更改 baseURL。这时，我们可以在 Axios 实例上直接设置 baseURL。

// api.js
import axios from 'axios';

const api = axios.create({
  timeout: 1000,
});

api.setBaseURL = (baseURL) => {
  api.defaults.baseURL = baseURL;
};

export default {
  get: (url) => api.get(url),
  post: (url, data) => api.post(url, data),
};

使用 setBaseURL 方法动态更改 baseURL：

api.setBaseURL('

状态图

使用 Mermaid 语法，我们可以绘制一个状态图来表示 Axios 请求的生命周期。

stateDiagram-v2
  [*] --> Pending
  Pending --> Sent
  Sent --> Received
  Sent --> Error
  Received --> [*]

结论

通过本文的介绍，我们了解到了如何使用 Axios 动态设置 baseURL。首先，我们可以使用环境变量来定义不同环境的 API 地址。然后，通过创建 Axios 实例，我们可以为不同环境配置不同的 baseURL。最后，我们还学习了如何在运行时动态更改 baseURL。

动态设置 baseURL 是一个非常实用的功能，可以帮助我们更好地适应不同环境的需求。希望本文能够帮助到大家，如果有任何问题，欢迎在评论区留言讨论。