Vue中axios POST传参问题

公司目前项目并没有完全实现前后分离的开发模式,在使用vue开发页面的时候,一度使用引入vue.js + zepto.js的方式,请求一直是用 $.ajax()的方式。为了向vue环境靠拢,引入了vue.axios。但是这种方式在用POST传参的时候,还是踩了不少坑。
使用的时候:

axios.post('/user', {
    foo: 'foo',
    bar: 'bar'
  })
  .then(function (res) {
    console.log(res);
  })
  .catch(function (error) {
    console.log(error);
  });

这样传参数,后台说接收不到,并且前台查看请求参数的时候,参数的格式还是Request Payload。这在用zepto的$.ajax()方式的时候是从来没有过的。后来查了下资料,原来zepto的ajax方式在传参的时候,默认设置了Content-Type=application/x-www-form-urlencoded,服务器能够正确解析,后台也不用做其他多余设置。而axios默认的则是Content-Type=text/plain,如果前后端都不处理的话,请求是无法成功的(其实当时自己并没有认真看axios的官方文档,其实官方文档已经明确说明了这一点,并且给出了解决方案)。

方案一:

最初的方案是前台传JSON格式的数据过去;设置'Content-Type': 'application/json;charset=UTF-8',大概:

axios.post('/user',JSON.stringify(params),{
	headers: {
        'Content-Type': 'application/json;charset=UTF-8'
	 }
})
  .then(function (res) {
    console.log(res);
  })
  .catch(function (error) {
    console.log(error);
  });

并且后台改变其接收参数的方式改为@RequestBody

此方法主要参考该博客:https://blog.csdn.net/CarryBest/article/details/80079364

该博客有个问题,就是接收单个参数的时候,是可行的,但是要是接收多个参数,仍然会报错。解决方法是只要后台设置接收的参数为Map类型或是多个参数组成的类的这种类型(对后台不是很了解,大概是这样。。)

方案二:

后来后台反馈,这种方法每个接口都要设置,很麻烦,询问我有没有更好的方法,随后我又自己查阅官方文档,原来官方给出了解决方案。戳这里,看官方文档。

使用URLSearchParams的API:

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

但是该API的浏览器兼容性不是很理想,不过有polyfill,提供了兼容性方案。(https://github.com/WebReflection/url-search-params )

方案三:

或者引用qs来encode 传入的参数。(https://github.com/ljharb/qs )

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

当然用es6的语法也可以:

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

方案四:

在node.js里,还可以引入querystring模块。(https://nodejs.org/api/querystring.html )

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

综合考虑,上面方法都不适合我这种传统的引入以vue.js和axios.js进行开发的模式。(适合vue-cli)

方案五:(最终采用方案)

仔细看文档的时候发现有个transformRequest参数,类似于拦截器。用于在传递参数前对参数进行处理,于是这里我手动拼接了一下参数,后端无须做任何处理,正常接收就行。

 				axios.post(url, params, {
                    transformRequest: [function (data) {
                        var str='';
                        for (var key in data) {
                            str += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) + '&';
                        }
                        return str;
                    }]
           		} ).then(fulfilled).catch(rejected)

你可能感兴趣的:(Javascript,前端,Vue)