vue axios post发送复杂对象

一、项目情况

目前，在vue项目中，一般使用axios在后台发送拉取数据的请求。

在一些业务场景中，前端需要将某个字段中复杂的嵌套对象发送到后台进行保存和处理。虽然axios可以配置发送模式(post/get等)。)，如果不做其他配置，post的数据实际上是拼在请求的地址后面，这种传输方式会有很多问题：第一，数据可能会丢失；二是get传输的数据长度有限制，如果需要保存一大段中文，会报错；三是数据不直观，复杂对象的格式会出现问题。

二、解决方案

如何实现使用post方法时如何在formData模式下提交，整个请求数据格式可以像queryString一样直观。

使用QS序列化数据

//main.jsimport来自“axios”的axios；Vue.prototype. $ axios=axios//从Qs配置axios访问模式//demo . vueimport Qs；这个。$axios({ method: 'post '，url: 'url '，data: reqData，transformrequest 3360[function(data){ return Qs。stringfy(data)//用QS序列化请求参数}]，header:{ ' content-type ' : ' application/x-www-form-URL encoded '//必须设置传输模式}})。然后((res)={ //逻辑代码}第一步完成后可以实现post请求，请求体为formData格式，但如果reqData是对象嵌套数组，如果此时需要将整个对象存储在后台，以便下次拉数据渲染首页时，会增加大量额外的转换工作。

//例如，obj是一个嵌套的多层复杂对象，让reqdata={id:' 123 '，status:' 1 '，data : { innerdata : { price : ' higher '，amount :' 2000 '，}，outer data3360 { }，parts 3360[' 123 '，' 234 '，' 345 '，' 456 ']}//参考上述配置，请求中解析的数据格式[图片说明][1]对象和数组的每一项都拆分成键值对，数据格式非常直观。如果需要将整个数据保存在后台进行下一次访问，会很不方便。

我们如何简单地处理它，并使它像下面图1中的get方法一样清晰？

只需要做一个简单的过程，把复杂的对象变成一个字符串，然后传输出去。

让数据={ innerdata : { price : ' high '，amount: '2000 '，}，outerData: { price: ' lower '，amount: '3000 '！}，parts: ['123 '，' 234 '，' 345 '，' 456'] }，reqData={ id: '123 '，status: '1 '，data : * * JSON . stringify(data)* * }；这个。$axios({ method: 'post '，url: 'url '，data: reqData，transformrequest 3360[function(data){ return Qs。stringfy(data)//用QS序列化请求参数}]，header:{ ' content-type ' : ' application/x-www-form-URL encoded '/传输模式必须设置}})。然后((res)={ //逻辑代码}之后，数据格式变得清晰可读，可以在后台根据键值直接取出整个对象。我们也可以大方优雅地使用vue axios进行后期传输。

摘要

以上就是边肖介绍的vue axios post发送复杂对象的问题。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！