axios 设置基础url
在使用 axios 进行网络请求时，我们经常会遇到需要设置基础url的情况。通过设置基础url，我们可以在实际发起请求时省去重复的url前缀，提高代码的可读性和可维护性。本文将介绍如何使用 axios 设置基础url，并提供代码示例。
axios 简介
axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它支持发送 GET、POST、PUT、DELETE 等各种类型的请求，并提供了丰富的功能和配置选项。
使用 axios 发送请求非常简单，只需要传入一个包含请求信息的配置对象即可，例如：
axios({
method: 'get',
url: '/api/users',
params: {
id: 1
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
上面的代码示例发送了一个 GET 请求，请求的 url 是 /api/users，并且附带了一个参数 id，值为 1。请求成功后，会打印响应的数据，请求失败则会打印错误信息。
设置基础url
在实际开发中，我们经常会有多个接口需要请求同一个服务器，这时候就可以通过设置基础url来简化代码。我们可以使用 axios 的 create() 方法创建一个新的实例，并在创建实例时设置 baseURL 属性，该属性会作为所有请求的基础url。
下面是一个设置基础url的示例代码：
// 创建一个新的 axios 实例
const instance = axios.create({
baseURL: '
});
// 使用实例发送请求
instance.get('/users').then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
在上面的代码中，我们首先使用 create() 方法创建了一个名为 instance 的 axios 实例，并设置了基础url为 instance.get()方法发送请求，并指定相对路径/users`。
这样，最终发送的请求的url会自动拼接上基础url，变为 `
序列图
下面是一个使用 axios 设置基础url的请求的序列图：
sequenceDiagram
participant Client
participant Server
Client->>Server: GET /users
Server-->>Client: 200 OK
在上面的序列图中，客户端发送了一个 GET 请求 /users，请求经过服务器处理后，返回了状态码 200 和响应数据。
甘特图
下面是一个使用 axios 设置基础url的请求的甘特图：
gantt
title 使用 axios 设置基础url的请求
section 请求
发送请求: done, 2021-10-01, 1d
处理请求: done, 2021-10-02, 2d
section 响应
返回响应: done, 2021-10-04, 1d
在上面的甘特图中，首先发送请求的过程完成于 2021 年 10 月 1 日，然后服务器处理请求的过程完成于 2021 年 10 月 2 日，最后返回响应的过程完成于 2021 年 10 月 4 日。
结论
通过设置 axios 的基础url，我们可以在实际发起请求时省去重复的url前缀，提高代码的可读性和可维护性。使用 create() 方法创建一个新的 axios 实例，并在创建实例时设置 baseURL 属性即可实现基础url的设置。
以上就是关于如何使用 axios 设置基础url的介绍，希望对你有所帮助。使用 axios 进行网络请求时，请根据实际情况设置基础url，以提高代码的可读性和可维护性。
