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中，所以不管你采用什么样的语言写后台，这个问题总是可以在后台解决的。

 

今日赠语：

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

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

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

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