vue调取接口小知识

  1. actAllProfit(){ //调取接口的函数
  2. var params = {}; //这是调取接口时的请求参数 讲明白点就是我们要传过去的参数
  3. var reqUrl = this.diviBaseUrl + '/bonuses/grossProfit';//这是后台接口地址
  4. this.$http.get(reqUrl,{ //get方式发送请求
  5. params: params //把外面声明的参数传过去
  6. }).then((res)=>{ //巧妙运用箭头函数
  7. if(!res){return;}
  8. this.allProfit = res.Profit; //res就是后台返回的所有数据 前端需要接收并保存
  9. })
  10. }

今天第一次使用axios的post方法,结果发现后台返回的数据是报500的错。
但是用ajax请求是完全没有报错的,可以返回正确的数据,那就说明不是后台的问题。经过对比有如下发现:

ajax请求:image.png

axios请求:

image.png

先了解下post提交数据的四种编码方式

1.application/x-www-form-urlencoded

这应该是最常见的post编码方式,一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。
注意上面截图的ajax请求就是使用的这种。

2.multipart/form-data

这也是一种比较常见的post数据格式,我们用表单上传文件时,必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data。

3.application/json

axios默认提交就是使用这种格式。如果使用这种编码方式,那么传递到后台的将是序列化后的json字符串。我们可以将application/json与application/x-www-form-urlencoded发送的数据进行比较

先是application/x-www-form-urlencoded:image.png

再是application/json:image.png

这里可以明显看出application/x-www-form-urlencoded上传到后台的数据是以key-value形式进行组织的,而application/json则直接是个json字符串。如果在处理application/json时后台还是采用对付application/x-www-form-urlencoded的方式将会产生问题。

4.text/xml

剩下的一种编码格式是text/xml,没有怎么了解,所以不多说了。

回到最开始的,要怎么解决报500的问题呢?

既然我们知道axios post方法默认使用application/json格式编码数据,那么解决方案就有两种,一是后台改变接收参数的方法,另一种则是将axios post方法的编码格式修改为application/x-www-form-urlencoded,这样就不需要后台做什么修改了.

方法一:后台处理:image.png

方法二:前端处理:image.png

  1. this.$axios({
  2. method:"post",
  3. url:"http://192.168.20.100:8090/user/login",
  4. headers:{
  5. 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8;',
  6. 'Accept': '*/*'
  7. },
  8. data:{
  9. PHONENUMBER: this.userName,
  10. PASSWORD: this.passWord
  11. },
  12. transformRequest: [function (data) {
  13. let ret = ''
  14. for (let it in data) {
  15. ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  16. }
  17. return ret
  18. }],
  19. }).then((res)=>{
  20. console.log(res.data);
  21. });

其中发挥关键作用的是headers与transformRequest。其中 headers 是设置即将被发送的自定义请求头。 transformRequest 允许在向服务器发送前,修改请求数据。这样操作之后,后台querystring.parse(decodeURIComponent(data))获取到的就是类似于{ name: ‘w’, password: ‘w’ }的对象