Axios 的 baseurl 怎么配置？深入剖析 Axios 的 baseURL 配置方法

本文介绍了四种配置 baseURL 的方法：全局配置、实例化配置、临时配置和通过拦截器动态配置。

用 Apifox，节省研发团队的每一分钟

Axios 的 baseurl 怎么配置？深入剖析 Axios 的 baseURL 配置方法

免费使用 Apifox

相关推荐

最新文章

API

一体化协作平台

API 设计

API 文档

API 调试

自动化测试

API Mock

API Hub

立即体验 Apifox
目录

配置 Axios 的 baseURL 是一种在每个请求中指定公共 URL 基础路径的方法，避免重复的代码，并使代码更具维护性和可读性。

Axios 官网首页
Axios 官网首页

什么是 baseURL？

在开始讨论 Axios 的 baseURL 配置之前，我们先来了解一下 baseURL 的基本概念。baseURL 是在发起请求时用作请求地址的前缀。当我们向服务器发起请求时，Axios 将根据 baseURL 和请求的路径来构建最终的请求地址。这使得我们可以将服务器的主机地址与公共路径隔离开来，方便管理和维护。

Axios 的 baseURL 配置方法

方法一：全局配置

在整个应用程序中，我们可以全局配置 Axios 的 baseURL，这样所有的请求都会自动加上该基础路径。

// 在引入 Axios 后，设置全局的 baseURL
axios.defaults.baseURL = 'https://api.example.com';

方法二：实例化配置

除了全局配置，我们还可以为每个 Axios 实例单独配置 baseURL。这种方法适用于需要同时与多个服务器进行交互的应用程序。

// 创建一个 Axios 实例并设置 baseURL
const apiInstance = axios.create({
  baseURL: 'https://api.example.com'
});

// 使用该实例发送请求
apiInstance.get('/users')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

方法三：临时配置

有时候，我们需要在某个请求中临时更改 baseURL，而不影响全局或实例级别的配置。这可以通过在请求的配置中指定 baseURL 来实现。

axios.get('/posts', {
  baseURL: 'https://otherapi.example.com'
})
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

方法四：通过拦截器动态配置

如果你需要根据特定条件动态地改变 baseURL，你可以使用 Axios 的请求拦截器，在发送请求之前修改配置。

import axios from 'axios';

// 创建 Axios 实例
const api = axios.create();

// 添加请求拦截器
api.interceptors.request.use(config => {
  // 在这里根据条件设置 baseURL
  config.baseURL = shouldUseProductionAPI ? 'https://api.example.com/' : 'https://staging.api.example.com/';
  return config;
});

// 发起请求，实际请求的 URL 是根据请求拦截器中的 baseURL 动态决定的
api.get('/posts')
  .then(response => {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

实践案例：使用 Axios 配置 baseURL

请求路径

为了便于测试，所以案例使用 Apifox 提供的开放 API 来测试，测试的 API 路径为：https://echo.apifox.com/get

Apifox 官方提供的接口
Apifox 官方提供的 API 

代码编写

首先，确保你已经在项目中安装了 Axios：

npm install axios


然后，编写示例代码（你可以新建一个app.js文件运行以下代码）：

// 引入Axios
const axios = require('axios');

// 设置baseURL
axios.defaults.baseURL = 'https://echo.apifox.com'; // 替换为你想要的API基本URL

// 发送GET请求
axios.get('/get')
  .then(response => {
    // 请求成功时处理数据
    console.log('Response data:', response.data);
  })
  .catch(error => {
    // 请求失败时处理错误
    console.error('Error:', error.message);
  });

在上面的示例中，我们设置了baseURL为https://echo.apifox.com，然后发送了一个GET请求到/get。Axios 将会拼接baseURL和请求路径，发送请求到https://echo.apifox.com/get。

Axios 请求结果
Axios 请求结果

使用 Apifox 调试后端接口

当我们作为前端开发人员使用 Axios 来进行接口请求时，有时候我们可能会遇到一个问题：等待后端开发人员提供接口。这往往会导致我们在开发时遇到阻碍，进而影响项目的进度。不过，我了解到一个非常实用的工具可以解决这个问题，它就是 Apifox。

Apifox = Postman + Swagger + Mock + JMeter，Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口，并且集成了 IDEA 插件。在后端人员写完服务接口时，测试阶段可以通过 Apifox 来校验接口的正确性，图形化界面极大的方便了项目的上线效率。


比如在本文案例中，要设置 baseURL，直接在环境变量里面填写请求路径即可：

立即体验 Apifox
在 Apifox 中设置环境变量
在 Apifox 中设置环境变量
在 Apifox 中调试接口
在 Apifox 中调试接口

提示与注意事项

  • 在配置 baseURL 时，确保末尾没有斜杠 /，以避免请求地址拼接错误。
  • Axios 的全局配置应在应用程序初始化时完成，确保所有请求都能正确应用 baseURL。
  • 如果在实例级别配置了 baseURL，该实例上的所有请求都会自动添加 baseURL。
  • 临时配置 baseURL 只会对该请求生效，不会影响其他请求。

总结

通过配置 Axios 的 baseURL，我们可以轻松地将公共的请求地址抽离出来，减少代码冗余，并提高代码的可维护性和可读性。我们介绍了四种配置 baseURL 的方法：全局配置、实例化配置、临时配置和通过拦截器动态配置，合理地使用baseURL 配置可以使我们的前端代码更加灵活和高效。

知识扩展：


参考链接：

  • Axios 官方文档：https://axios-http.com/docs/base_url
Axios API
相关推荐