问题
公司内部老项目,用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形式。反之不是。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。