在 Vue 3 中使用 Axios 发送 POST 请求
在 Vue 3 中使用 Axios 发送 POST 请求需要起首安装 Axios，然后在 Vue 组件或 Vuex 中使用它。以下是一个简单的安装和使用案例：安装 Axios
你可以使用 npm 或 yarn 来安装 Axios：
npm install axios
# 或者
yarn add axios 使用 Axios 发送 POST 请求
[*]在 Vue 组件中使用 Axios
起首，在你的 Vue 组件中导入 Axios：
<template>
<div>
<button @click="sendPostRequest">发送 POST 请求</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
async sendPostRequest() {
try {
const response = await axios.post('https://example.com/api/endpoint', {
key1: 'value1',
key2: 'value2'
});
console.log(response.data);
} catch (error) {
console.error('Error sending POST request:', error);
}
}
}
};
</script> 在上面的例子中，当点击按钮时，sendPostRequest 方法会被调用，它会向指定的 URL 发送一个 POST 请求，并携带一些数据。如果请求成功，它会打印响应数据；如果请求失败，它会打印错误信息。
[*]在 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：
<template>
<div>
<button @click="fetchData">获取数据</button>
</div>
</template>
<script>
export default {
methods: {
fetchData() {
this.$store.dispatch('fetchData');
}
},
computed: {
data() {
return this.$store.state.data;
}
}
};
</script> 在这个例子中，当点击按钮时，fetchData 方法会被调用，它会触发 Vuex 中的 fetchData action。这个 action 会发送 POST 请求并更新 Vuex store 中的数据。然后，你可以通过盘算属性来访问这些数据。
创建一个 Axios 实例并配置一些底子选项
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 的路径（比方 /customer_info），而不是完备的 URL。
[*] 确保 inputValue 变量在 onSubmit 函数的作用域内是可访问的，并且包罗了您想要发送的数据。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]