vue3 axios 发送post请求

### 如何在 Vue 3 中使用 Axios 发送 POST 请求 #### 安装 Axios 库 为了能够在项目中使用 Axios，首先需要安装这个库。可以通过 npm 或 yarn 来完成安装。 ```bash npm install axios ``` 或者 ```bash yarn add axios ``` 这一步骤确保了可以在应用程序里引入并配置 Axios 实例[^1]。 #### 创建 Axios 实例 创建一个新的 JavaScript 文件用于封装 Axios 配置，比如 `apiClient.js`： ```javascript import axios from 'axios'; const apiClient = axios.create({ baseURL: 'https://example.com/api/', // 替换成实际的服务端URL headers: { Accept: 'application/json', 'Content-Type': 'application/json' } }); export default apiClient; ``` 这段代码定义了一个默认的基础 URL 和一些常见的头部信息，简化后续请求时的设置工作[^4]。 #### 在组件内部发起 POST 请求 下面展示的是在一个 Vue 组件的方法中调用上述 API 客户端实例来进行 POST 请求的例子： ```javascript <template> <!-- HTML结构 --> </template> <script setup> import { ref } from 'vue'; import apiClient from '@/path/to/apiClient'; // 调整路径以匹配你的项目布局 // 假设要发送的数据存储在这个变量中 let postData = { title: 'foo', body: 'bar', userId: 1, }; async function submitData() { try { const response = await apiClient.post('/posts', postData); console.log('Response:', response.data); // 处理返回的结果 } catch (error) { console.error('Error occurred during request.', error); } } </script> ``` 这里展示了如何利用 async/await 结构处理异步操作，并且包含了错误捕捉机制来提高程序健壮性[^2]。 #### 使用 FormData 类型进行文件上传或其他表单提交场景 当涉及到文件上传或者其他类型的表单数据传输时，则应该构建一个 `FormData` 对象作为 payload: ```javascript function prepareFormData(fileInputRef, otherFields={}) { let formData = new FormData(); if (fileInputRef.files.length > 0){ formData.append('file', fileInputRef.files[0]); } Object.keys(otherFields).forEach(key => formData.append(key, otherFields[key]) ); return formData; } async function uploadFileAndSubmitForm(event) { event.preventDefault(); let formElement = document.querySelector('#my-form'); let formDataWithFile = prepareFormData(formElement.elements.namedItem('upload'), { name: 'John Doe', age: 30, }); try { const config = { headers: {'content-type': 'multipart/form-data'} }; const result = await apiClient.post('/submit', formDataWithFile, config); console.log(result.status === 200 ? 'Success!' : 'Failed.'); } catch(e) { console.warn(`Upload failed with message ${e.message}`); } } ``` 注意，在这种情况下，必须指定 Content-Type 为 multipart/form-data 并将其传递给 Axios 的选项对象中。