VUE学习(十七) VUE3使用axios post的时候参数传递为空值

原创已于 2023-01-09 16:38:33 修改 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #前端

于 2023-01-09 13:38:02 首次发布

WEB前端同时被 3 个专栏收录

112 篇文章

订阅专栏

54 篇文章

订阅专栏

axios

5 篇文章

订阅专栏

文章描述了在使用axios进行POST请求时遇到参数值变为空的问题。经过测试，作者发现参数必须以字符串形式存在，并且使用reactive创建的对象paramss来传递数据。解决方案是为paramss对象的属性赋值，然后将paramss对象本身作为POST请求的数据。后台的WEBAPI能够正常接收到这些参数。

1.在使用axios发现post到后端的参数值变为空值。单独测试WEBAPI是OK的，这就证明在axios传值的时候出现问题了。

找了几种方法测试后发现只有使用下面的方法可用。参数名必须为字符串。参数要写成paramss 类型才行

//定义参数
let paramss = reactive({
 
	"patientName": "patientName", 
	"barcode": "barcode", 
})
const TestAxiosPost = () => {
	// axios.post(webapiAddr + `Patient/HttpPostTest`, {
	// 	//axios.post(`Patient/PrintLabe`, {
	// 	//params:
	// 	data: {
	// 		"patientName": "patientName",
	// 		"Barcode": "Barcode", 
	// 	}
	// })
	// 	.then(function (response) {
	// 		//demo1.tableData = response.data
	// 		//demo1.list = demo1.tableData
	// 		console.log('print ok');
	// 		console.log(response);
	// 		//console.log(demo1.tableData);
	// 	})
	// 	.catch(function (error) {
	// 		console.log(error);
	// 	});

//给参数赋值
paramss.patientName="张三"
paramss.barcode ="1234"
	axios.post(webapiAddr + `Patient/HttpPostTest`, paramss)
		.then(function (response) {
			console.log(response);
		})
		.catch(function (error) {
			console.log(error);
		});

 
}

2.后台的WEBAPI