在 Vue 3 中使用 Axios 发送 POST 请求

在 Vue 3 中使用 Axios 发送 POST 首先需要安装请求 Axios，然后在 Vue 组件或 Vuex 中使用它。以下是一个简单的安装和使用案例：

安装 Axios。

你可以使用 npm 或 yarn 来安装 Axios：

npm install axios  	# 或者  	yarn add axios。

使用 Axios 发送 POST 请求。

1. 在 Vue 组件中使用 Axios。

首先，在你的 Vue 组件中导入 Axios：

上面的例子，点击按钮时󿀌sendPostRequest。 该方法将被调用，它将指定 URL 发送一个 POST 请求，并携带一些数据。

1.  该方法将被调用，它将指定 URL 发送一个 POST 请求，并携带一些数据。如果请求成功，它将打印响应数据；如果请求失败，#xff00c;它会打印错误的信息。

在 Vuex 中使用 Axios。

假如你更喜欢在那里 Vuex 中处理 API 请求，你可以这样做：

首先，在你的 Vuex store 中导入 Axios：

import axios from 'axios'; export default new Vuex.Store({ actions: { async fetchData({ commit }) { try { const response = await axios.post('https://example.com/api/endpoint', { key1: 'value1', key2: 'value2' }); commit('setData', response.data); } catch (error) { console.error('Error fetching data:', error); } } }, mutations: { setData(state, data) { state.data = data; } }, state: { data: null } });

然后，在你的 Vue 调用组件中的这个 action：

在这个例子中，点击按钮时󿀌fetchData。 该方法将被调用，它会触发 Vuex 中的 。 该方法将被调用，它会触发 Vuex 中的 。

fetchData。

 action。这个 action 会发送 POST 请求并更新 Vuex store 中的数据。然后，您可以通过计算属性访问这些数据。

创建一个 Axios 实例并配置一些基本选项。

1. const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: { 'X-Custom-Header': 'foobar'} }); const onSubmit = async () => { try { const response = await instance.post('/customer_info', { inputValue // 注意判断inputvalue是否已经是对象，如果删除{ } }); console.log(response.data); } catch (error) { if (error.response) { // 请求已发出󿀌服务器也返回状态码，但是状态码不在 2xx 范围内 console.error('Error sending POST request:', error.response.data); // 可以根据 error.response.data 向用户展示错误信息中的具体提示 } else if (error.request) { // 请求已发出󿀌但没有收到任何回应 console.error('The request was made but no response was received:', error.request); } else { // 在设置请求时触发一个错误 console.error('Error setting up the request:', error.message); } } };请注意以下几点：baseURL。 在 。 在 。instance。 创建时已设置，所以在调用 。instance.post。 时，您只需提供相对于 。baseURL。

2.  路径（例如 。/customer_info。），而非完整 URL。确保 。inputValue。