在 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:

复制代码
	<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 请求,并携带一些数据。如果请求成功,它会打印响应数据;如果请求失败,它会打印错误信息。

  1. 在 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);  

	    }  

	  }  

	};

请注意以下几点:

  1. baseURLinstance 创建时已经被设置了,所以在调用 instance.post 时,您只需要提供相对于 baseURL 的路径(例如 /customer_info),而不是完整的 URL。

  2. 确保 inputValue 变量在 onSubmit 函数的作用域内是可访问的,并且包含了您想要发送的数据。

相关推荐
爱学习的茄子几秒前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户380225859824几秒前
使用three.js实现3D地球
前端·three.js
程序无bug3 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo3 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢27 分钟前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机32 分钟前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler28135 分钟前
解决setTimeout/setInterval计时不准确问题的方案
前端
sophie旭43 分钟前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读
蓝易云1 小时前
Qt框架中connect()方法的ConnectionType参数使用说明 点击改变文章字体大小
linux·前端·后端
sophister1 小时前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html