axios中post请求传参失败常见问题(数据序列化处理)

#axios中post请求传参失败常见问题(数据序列化处理)| 来源: 网络整理| 查看: 265

axios中post请求传参失败常见问题之数据序列化处理前言解决方法方法一：方法二：方法三（推荐）：

前言

后台能够直接处理的数据格式，是一种经过序列化的键值对数据；注：axios的params是通过url传参（常用于get，所传的对象会自动序列化处理拼接到url上）；data 是放在 body 里面的（常用于post，传递的对象不会自动序列化处理）

解决方法方法一：使用new FormData()创建FormData对象传递参数FormData对象会将数据编译成键值对，以便用XMLHttpRequest来发送数据（即为序列化表以及创建与表单格式相同的数据提供便利） let params = new FormData(); params.append("account", this.user.account); params.append("password", this.user.password); //FormData()类型会自动序列化参数 axios .post("http://xxx.xx.xx.xxx:xxxx/user/login", params) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); 方法二：自行编写函数拆分对象，拼接进行序列化处理"transformRequest"是在向服务器发送前，修改请求数据 axios .post( "http://xxx.xx.xx.xxx:xxxx/user/login", this.user, { transformRequest: [ function (data) { let ret = ""; for (let it in data) { ret += encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&"; } return ret; }, ], } ) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }) 方法三（推荐）：引入qs模块，用来序列化post类型的数据， //安装模块 npm i qs -S //引入模块 import qs from 'qs' //使用qs序列化处理传递的对象 axios .post( "http://xxx.xx.xx.xxx:xxxx/user/login", qs.stringify(this.user), ) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); });

提示：文章到此结束，本文仅为个人看法，若有不足欢迎各位指出。

【本文地址】

公司简介

联系我们