axios 发送请求携带参数对象和文件
Axios 是一个基于 Promise 的 HTTP 客户端，可以用于发送网络请求。在实际的开发中，我们经常需要发送请求携带参数对象和文件。本文将介绍如何使用 Axios 发送带有参数对象和文件的请求，并提供相应的代码示例。
安装 Axios
首先，我们需要在项目中安装 Axios。可以使用 npm 或 yarn 进行安装，打开终端并执行以下命令：
npm install axios
或者
yarn add axios
安装完成后，我们可以在代码中引入 Axios：
import axios from 'axios';
发送请求携带参数对象
在发送请求时，我们可以使用 params 参数来传递一个包含参数的对象。这个对象的属性将会被转换为URL的查询参数。下面是一个发送 GET 请求携带参数对象的示例：
axios.get('/api/data', {
params: {
id: 123,
type: 'example'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
上述代码中，我们发送了一个 GET 请求到 /api/data，并携带了一个参数对象 { id: 123, type: 'example' }。在后端接收请求时，可以通过查询字符串解析参数。
发送请求携带文件
如果要发送带有文件的请求，需要使用 FormData 对象来包装数据。FormData 对象允许我们构建键值对，其中值可以是 Blob 或 File 对象。下面是一个发送 POST 请求携带文件的示例：
const file = document.querySelector('input[type="file"]').files[0];
const formData = new FormData();
formData.append('file', file);
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
上述代码中，我们使用 FormData 对象将文件包装起来，并通过 append 方法添加到表单数据中。然后，我们发送了一个 POST 请求到 /api/upload，并将包含文件的 FormData 对象作为请求体。为了告诉服务器我们发送的是一个多部分表单数据，我们还需要设置请求头的 Content-Type。
序列图
下面是一个使用 Axios 发送请求携带参数对象和文件的序列图：
sequenceDiagram
participant Client
participant Server
Client ->> Server: 发送请求携带参数对象
Server -->> Client: 返回响应数据
Client ->> Server: 发送请求携带文件
Server -->> Client: 返回响应数据
以上就是使用 Axios 发送请求携带参数对象和文件的方法。通过传递一个参数对象或使用 FormData 对象，我们可以轻松地在请求中携带所需的参数和文件。在实际的开发中，我们可以根据具体的需求进行调整。
希望本文对你有所帮助！
