Vue如何实现axios.post请求

沈宥

发布于 2024-07-11 10:21:13

800

发布于 2024-07-11 10:21:13

文章被收录于专栏：从头开始学习测试开发

Vue如何实现axios.post请求

背景

问题描述：使用axios发送post请求，已经传入了body参数，且header中设置了body的编码格式，但后端 req.body接收到的参数为空 ，但是网页上抓包检查时，发现请求的body确实是携带了参数的🚧

请求参数设置：

import axios from "axios"

await axios.post("/pubsys/createLodgeUnitV4", 
{
"userId":"123456",
"luId":"123",
"luInfo":"infoxxxxx",
"step":"create"
}, 
{headers: 
{"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"}
})

网页抓包数据：参数显示为json格式，与已设置的header不符，猜测是请求body的编码出现了问题

解决步骤

1、从网页抓取的结果来看，请求体携带的确是json格式的数据，猜测axios会自动转换数据为json格式

源码上查找到了转换请求体参数格式的相关代码，确认是axios的问题

if(utils.isURLSearchParams(data){
setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded');
return data.tostring();
}
if(utils.isObject(data){
setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
return JSON.stringfy(data);
}

2、引入qs解决请求参数格式问题 body-parser的urlencoded方法顾名思义就是 把传来的数据当做url来处理 ，也就是像querystring一样，所以对于传过来的json数据， 没有识别到切割key和value的标志 ，就把所有都当做key来处理

import axios from "axios"
import qs from "qs"

data : {
"userId":"123456",
"luId":"123",
"luInfo":"infoxxxxx",
"step":"create"
}

await axios.post("/pubsys/createLodgeUnitV4",  qs.stringify(data),
{headers: 
{"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"}
})

重新请求，成功