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’ }的对象