使用axios发送post请求

可以使用axios库的post方法发送post请求，示例代码如下： ``` import axios from 'axios'; axios.post('/api/login', { username: 'your-username', password: 'your-password' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 其中，第一个参数是请求的URL，第二个参数是请求时需要发送的数据。在then方法和catch方法中，分别处理请求成功和请求失败的回调逻辑。更多详细信息可以参考axios官方文档。

### Vue3 中使用 Axios 发送 POST 请求 在 Vue3 中，可以通过 `axios` 库来发送 HTTP 请求。以下是基于提供的引用内容以及专业知识构建的一个完整的示例。 #### 安装 Axios 首先，在项目中安装 `axios`： ```bash npm install axios ``` #### 创建 Axios 实例并封装请求 为了更好地管理请求和响应，通常会创建一个独立的文件（如 `request.js`），用来封装 `axios` 并设置默认配置和拦截器： ```javascript // src/utils/request.js import axios from 'axios'; const service = axios.create({ baseURL: 'https://reqres.in', // 替换为实际 API 地址 timeout: 5000, // 设置超时时间 }); // Request 拦截器 service.interceptors.request.use( config => { // 在发送请求之前可以做一些操作，例如添加 token 到 headers if (localStorage.getItem('token')) { config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`; } return config; }, error => { console.error(error); // 处理请求错误 Promise.reject(error); } ); // Response 拦截器 service.interceptors.response.use( response => { const res = response.data; // 如果接口返回的状态码不是 200，则认为是有错误发生 if (res.code !== 200) { console.warn(`Error Code: ${res.code}, Message: ${res.message}`); return Promise.reject(new Error(res.message || 'Request failed')); } else { return res; // 返回成功的数据部分 } }, error => { console.error(error); // 处理响应错误 return Promise.reject(error); } ); export default service; ``` #### 使用封装后的 Axios 发送 POST 请求 接下来可以在具体的组件或服务层调用这个封装好的实例来进行 POST 请求。以下是一个简单的例子： ```javascript // src/apis/userApi.js import service from '@/utils/request'; export function createUser(data) { return service.post('/api/users', data); // 假设 /api/users 是目标接口路径 } ``` 在 Vue 组件中调用该方法： ```vue <template> <div> <h1>Create User</h1> <button @click="submitForm">Submit</button> </div> </template> <script> import { createUser } from '@/apis/userApi'; export default { name: 'CreateUser', data() { return { userData: { name: 'John Doe', job: 'Developer' }, articleId: null, }; }, methods: { async submitForm() { try { const response = await createUser(this.userData); this.articleId = response.id; // 获取服务器返回的数据 ID console.log('Created user with ID:', this.articleId); } catch (error) { console.error('Failed to create user:', error); } } } }; </script> ``` 以上代码展示了如何通过封装的 `axios` 实例发送 POST 请求，并处理其响应[^1]。 --- #### 关键点说明 1. **Base URL 和 Timeout 配置** 在创建 `axios` 实例时设置了基础 URL (`baseURL`) 和超时时间 (`timeout`)，这使得后续所有的请求都继承这些配置[^4]。 2. **Interceptors 的作用** - **Request Interceptor**: 可以在每次请求前执行特定逻辑，例如加入认证令牌。 - **Response Interceptor**: 对接收到的响应进行统一处理，比如检查状态码是否正常。 3. **POST 数据格式化** 默认情况下，`axios` 会自动将 JavaScript 对象转换成 JSON 字符串作为请求体的一部分[^3]。 --- ###