Vue中axios踩坑之路-POST传参
2018-01-09 14:32
603 查看
刚开始使用Vue,里面的坑是一个接一个,今天就遇到一个axios POST传参的问题,我需要在请求中传递参数,然后按官方文档的格式开始操作,代码如下:
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
注:此处是官方示例:点击打开链接
打开控制台,报400,报错信息是:传递的参数不存在,但在请求中看的到参数,只是参数的格式是Request Payload,具体也没看懂是什么,总之知道就是参数格式不对,查阅资料找到两种解决办法,代码如下:
1.
2.
参考:https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format
经测试,这两种办法都可以
这个问题刚解决,后台就抛给我一个问题,我的参数里面要传数组呢,我以为直接按上面的做法就能一马平川了,然而现实是残酷的,崩盘!查看官方文档发现,其实这个的解决也是非常的简单,只需要在qs的方法中设置它的indices为false即可,如:
qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });
更多qs功能参考:https://www.npmjs.com/package/qs
完美解决,阿弥陀佛!
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
注:此处是官方示例:点击打开链接
打开控制台,报400,报错信息是:传递的参数不存在,但在请求中看的到参数,只是参数的格式是Request Payload,具体也没看懂是什么,总之知道就是参数格式不对,查阅资料找到两种解决办法,代码如下:
1.
var qs = require('qs'); axios.post('/foo', qs.stringify({ 'bar': 123 }));
2.
var params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/foo', params);
参考:https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format
经测试,这两种办法都可以
这个问题刚解决,后台就抛给我一个问题,我的参数里面要传数组呢,我以为直接按上面的做法就能一马平川了,然而现实是残酷的,崩盘!查看官方文档发现,其实这个的解决也是非常的简单,只需要在qs的方法中设置它的indices为false即可,如:
qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });
更多qs功能参考:https://www.npmjs.com/package/qs
完美解决,阿弥陀佛!
相关文章推荐
- vue中axios的封装问题(简易版拦截,get,post)
- vue开发:axios的post请求接口出现404,但是get则成功
- vue通过axios发送put/post等请求,配合后台consume"MediaType.APPLICATION_FORM_URLENCODED"
- vue中axios处理http发送请求的示例(Post和get)
- 关于vue-resource 转变成axios的过程
- vue 组件的封装之基于axios的ajax请求方法
- 使用vue2、vuex、vue-router、axios等重写饿了么点餐系统
- 对于axios.post的前后台的参数传递问题
- Vue.js学习系列三——axios和网络传输相关知识的学习实践
- vue 开发:axios前后端数据处理
- vue项目中axios跨域的问题
- vue中axios解决跨域问题和拦截器使用
- Vue.js学习系列三——axios和网络传输相关知识的学习实践
- vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发
- 推荐vue.js、layer.js、axios.js
- vue中的所有axios请求都会发送2次,但是第一次不返回数据的原因
- vue中axios的使用方法
- 在Vue-cli里基于axios封装复用请求
- 【vue】element、vue2.0+、vuex、axios开发中遇到的坑点