关于vue.js:vue表单中data由axios发送payload至formdata后端接口

34次阅读

共计 885 个字符,预计需要花费 3 分钟才能阅读完成。

问题

公司外部老我的项目,用 vue 重构。
在 vue 中通过双向动静绑定了表单和 data,在获得了表单数据后用 axios 发送给后端 api,这都是十分惯例的操作,然而却始终申请失败。
因为后端长期无人治理除了 api 什么材料都找不到,前端是 jquery 写的,用 ajax 发送,通过 chrome 调试屎山(老我的项目)发现发送的参数的格局为
"id=1&name=lee'
我过后就认为这是以字符串模式发送的(学的不扎实,我检讨),而后再看我是用 axios 发送的是一个类属于 json 对象的模式

{
 id: 1,
 name: 'lee'
}

于是猜测是因为参数格局不对导致申请失败。

解决

首先想到的就是用正则式给他变成字符串,容易误导人就不写了,先用 JSON.parse() 将 JSON 字符串转换成对应的值,再用正则的.replace 办法。
这样就好用了,然而看着各种正则就是感觉顺当,总感觉不应该这样。于是在上班之后有过了一遍 ES5 语法,发现了一个 URLSearchParams 对象,用来用来结构、解析和解决 URL 的查问字符串,也就是把一个对象变成 id=1&name=lee 这种格局(大白话),就是所谓的 URL 的查问字符串,也是地址栏 URL 问号前面的局部。

应用办法倒是很简略。toString 办法用来转换成字符串。

let params = new URLSearchParams({id : 1 , name : 'lee'});
console.log(params.toString())
//'id=1&name=lee'

第二天下班之后用了这个办法,申请胜利。

深刻

随后又查了一下为什么我在 vue 申请就须要转换,而在老我的项目 jq 就失常申请。起因是申请办法不同,原来 jq 的 ajax 是应用 formdata 传参,而 axios 是用 payload 传参,尽管之前做文件上传晓得 formdata 是什么,说实话我还是第一次晓得还有区别的货色,看来要学的货色真多。
提供一个最无脑的办法,接手了新的 api,先在 chrome 调试里看一下申请头,如果是
application/x-www-form-urlencoded
那就是 formdata 模式。反之不是。

正文完
 0