Axios 相对路径
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 中发送 HTTP 请求。它支持异步请求、拦截和转换请求和响应数据等功能。在许多情况下，我们需要使用相对路径来发送请求，以便更灵活地处理不同环境下的请求地址。本文将介绍如何在 Axios 中使用相对路径，并提供相应的代码示例。
为什么需要相对路径？
在前端开发中，我们经常需要与后端进行通信，发送 HTTP 请求获取数据或提交表单。通常，我们会将后端的请求地址硬编码在前端代码中，例如：
axios.get('
这种硬编码的方式在开发过程中可能非常方便，但是在项目部署和维护时会带来一些问题。例如，当后端的地址发生变化时，我们需要手动修改前端代码中的请求地址。此外，在开发环境和生产环境中使用不同的后端地址也变得困难。
相对路径可以帮助我们解决这些问题。通过使用相对路径，我们可以根据当前环境动态地构建请求地址，而不需要手动修改代码。这样一来，我们可以更轻松地处理不同环境下的请求地址，并减少在部署和维护时的工作量。
在 Axios 中使用相对路径的方法
Axios 提供了一个 baseURL 选项，用于设置所有请求的基础路径。我们可以将相对路径与 baseURL 配合使用，构建完整的请求地址，如下所示：
const api = axios.create({
baseURL: '
})
api.get('/users')
在上面的示例中，我们通过 axios.create 方法创建了一个 axios 实例，并将 baseURL 设置为 '/users发送 GET 请求，Axios 会自动将其与baseURL` 拼接成完整的请求地址。
此外，我们还可以在每个请求中使用相对路径，而不使用 baseURL。这在需要使用多个不同的基础路径时非常有用，例如在不同的模块中分别使用不同的后端地址。下面是一个示例：
axios.get('/api/users')
在上面的示例中，我们直接使用了相对路径 /api/users，Axios 会将其与当前页面的地址拼接成完整的请求地址。这种方式适用于只在特定模块中使用相对路径的情况。
示例应用
为了更好地理解如何在 Axios 中使用相对路径，我们可以创建一个简单的示例应用。该应用包含两个模块：用户管理模块和文章管理模块。每个模块都有自己的后端接口，我们需要使用相对路径来发送请求。
首先，我们需要定义用户管理模块的后端地址为 /api/users，文章管理模块的后端地址为 /api/posts。然后，我们可以在页面加载时使用相对路径发送请求，如下所示：
const userApi = axios.create({
baseURL: '/api/users'
})
const postApi = axios.create({
baseURL: '/api/posts'
})
// 获取用户列表
userApi.get('/list')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.error(error)
})
// 获取文章列表
postApi.get('/list')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.error(error)
})
在上面的示例中，我们分别创建了用户管理模块和文章管理模块的 Axios 实例，并使用了相对路径发送了 GET 请求。当页面加载时，Axios 会自动将相对路径与当前页面的地址拼接成完整的请求地址，并发送请求到对应的后端接口。
状态图
下面是一个使用 Mermaid 语法绘制的状态图，表示 Axios 的请求状态转换过程：
stateDiagram
[*] --> Unsent
Unsent --> Open
Open --> HeadersReceived
HeadersReceived --> Loading
