vue axios解决post传参数问题

我相信遇到这个问题的兄弟们,不带参数的情况下都是没有问题吧,

如果有问题,百度吧,好解决,答案都比较靠谱

这里主要针对带参数的情况,坑多

另外,我默认你用postman带参测试接口是没问题的

不多说,直接上实例供参考吧,1、2可以跳过

1、安装axios

npm install axios --save

2、添加axios组件

import Axios from 'axios'

Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios.defaults.baseURL = 'http://localhost:7878/zkview';

Vue.prototype.$ajax = axios

3、如何解决?这里采取的是URLSearchParams的方式,因为不想导入qs模块(qs其实也是类似这个方式,解决问题的核心就是把参数转换成标准的键值对)

问题是解决了,下面是我了解到的原因,有兴趣的可以继续往下看

1、有的兄弟会遇到前端header就没有看到axios准备post到后台接口的参数(我就是这种情况)

2、有的兄弟会遇到前端header能看到参数,但是后台没有接收到参数

那么,为什么会导致这两种情况呢?

数据变成了类json进行传输而且数据请求的方式也发生了变化,上面变成了Request Payload

这个时候数据不是标准的键值对,无法解析成类似get传参方式 ?userid=zhonghangAlex&password=woaini123 这样的字段

我们如果使用这样的后台数据获取方式(如下Python代码),就会发生异常,其它后端语言同理。

//Python示例 我们如果使用这样的后台数据获取方式,就会发生异常
    
req_userid = request.POST.get('userid')
req_password = request.POST.get('password')

那么应该如何处理呢?

 

前端解决

使用URLSearchParams传递参数是大多数网友的做法,如下核心代码示例

import axios = import('axios')
let param = new URLSearchParams()
param.append("userid", "zhonghangAlex")
param.append("password", "woaini123")
 
axios.post('xxxxx', param).then(.....)

果然我们传递的参数就正常了,后台可以获取到相应的键值对,但是使用这样的方法有两点坏处,第一个是前端请求每一个字段都append会很麻烦,第二个就是这个对象它不兼容IE和Edge甚至在360浏览器都会挂掉,我曾经尝试过IE11版本都不行,提示这个对象缺失。所以我们最好的办法就是在后端做一个处理!

后端解决

      经过查阅大量的资料,我发现,正如我前面说过的,get请求发送的是很标准的键值对,数据可以被后端解析,那为什么后端不能解析json格式的post数据呢?按照这个思路我研究了下request的api,发现这个json是封装到body中的,所以,在后端的调用应该使用body对象。

这就是后端处理的办法,核心的代码是:

//python 核心代码示例
req = json.loads(request.body)
req_userid = req['userid']
req_password = req['password']

这样req_userid和req_password就分别存储了前端发来的数据。

前端使用node的时候也是一样的,post请求的数据会封装到request的body中,所以不管你采用什么样的语言写后台,这个问题总是可以在后台解决的。

今日赠语:

“静”中藏着一个“争”字,越争心越要静

“稳”中藏着一个“急”字,越急心越要稳

“忙”中藏着一个“亡”字,越忙越要照顾好自己

“忍”中藏着一个“刀”字,越忍越要看清事态

发布了65 篇原创文章 · 获赞 11 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/u011280778/article/details/100436930