前端之vue3 axios使用请求体携带参数 和 qs库的使用

1.实例

      axios({
        method: "post",
        url: "http://localhost:8080/blog/blog/post",
        data: JSON.stringify({
		  content: getContent(),
		  title: title.value,
		}),
//        data: qs.stringify({
//          content: getContent(),
//          title: title.value,
//        }),
      }).then()

• data对象中的是post是要携带的参数
• qs是qs库。(qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库)

axios({
  method: "post",
  url: "http://localhost:8080/user",
  params: {
	key:value,
  },
}).then(
  (response) => {
    console.log("返回信息", response.data);
    if (response.data.code === 200) {
      ElMessage.success("注册成功");
    } else {
      ElMessage.error(`注册失败,错误信息: ${response.data.msg}`);
    }
  },
  (error) => {
    ElMessage.error("注册请求失败");
    console.log("注册请求失败", error.data);
  }
);

2.使用步骤

1. 命令行安装

npm install qs

2. 在组件中引用

import qs from 'qs'

3. 在axios请求时，序列化携带参数

qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象 序列化成URL的形式，以&进行拼接

data: qs.stringify({
  content: getContent(),
  title: title.value,
}),

换成JSON一样可行(灬ꈍ ꈍ灬)