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);         
  });

---

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