关于在vue中使用axios所遇到的问题及解决方法

在最近的一个项目里使用axios的post请求后端数据时候出错，打开控制台看到，

Content-Type: 'application/x-www-form-urlencoded;charset=utf-8'
这种提示信息。

后端同学告诉我，这个接口是很早以前就开发出来并且使用很久了的，传参不能是json格式，必须是&a=b&c=d拼接在接口后面携带的形式，可能改成get请求就可以。。。

那么我试着将post方式改成get方式，果不其然，数据请求到了。

但我并不明白其中的缘由，毕竟关于接口的事，对前端来说是神奇的东西，它像条绳子一样，绳子的另一端是怎么回事就真的不清楚了，我只在使用node结合mongodb业余做项目学习的时候写过所谓的数据接口，但关于格式什么的概念也不怎么记得了。

 

然后我突发奇想，我偏要使用post的方式来请求呢？

既然只需要拼接在接口后面，我就将参数如此拼接：

const query = 'productId=abc&channelCode=123';
axios.post('/api/product?' + query ).then(....)

神奇的是，竟然同样成功了。。。。

 

后各种查询，找到了一个叫做URLSearchParams的方法可以解决上面手动拼接参数的问题，使用方法如下：

let params = new URLSearchParams();
params.append('productId', 'abc');
params.append('channelCode', 123);

axios.post('/api/product' , params).then(....)

URLSearchParam实例出的params会自动作为参数携带在url后面，最终效果同上面手动拼接一样一样。

 

至此，虽然解决了一根筋要使用post的问题，但其实真正的解决方案应当是知其所以然的，这样才算心里有底。

这两个方法只是停留在投巧的层面。真正的问题在axios内部实现ajax的原理上关于content-type的配置里。而且在使用axios时是提供配置这个选项的，只是颇为麻烦，暂不考虑这种。