axios GET 与POST请求格式多种写法整理（新）

最近项目中用到axios比较多，所以就把axios完整的接口请求格式整理出来，方便以后自己复习或他人使用，如果觉得对您有用请点个赞（skr）

1.axios GET 请求

1.正常写法
 var _this=this,data={name:"111",password:"123"};
  _this.$axios({
  url:_this.httpAPI+'abc/getabc',
  method:"get",
  params:data //在这里写你的请求参数   
  }).then(function (response) {//then函数接口请求成功时调用
   	var data=response.data;
   	if(data.ret==0){ var list=data.data}
   	else{_this.$message.error(data.msg)}
  })
  .catch(function (error) {//网上很多例子都是输出error,根本就不能拦截到接口返回的错误信息
   	 var data=error.response.data;
  	 _this.$message.error(data.msg);
  })
  
2.简写(接口内直接带参数)
_this.$axios.get(_this.httpAPI+'abc/getabc',{name:"111",password:"123"})
.then(function(response){}).catch(function(error){})

3.简写(接口外参数封装)
var data={name:"111",password:"123"}
_this.$axios.get(_this.httpAPI+'abc/getabc',{params:data})
.then(function(response){}).catch(function(error){})

2.axios POST请求

1.正常写法
var _this=this,data={};
_this.$axios({
 url:_this.httpAPI + 'abc/getabc',
 method:"post",
 headers:{"Authorization": _this.token},//当需要在请求头中加入token时带上此参数
 params:data
})
.then(function (response) {
	var data = response.data;
    if (data.ret == 0) {var listing=data.data;} 
    else {_this.$message.error(data.msg)}
})
.catch(function (error) {//网上很多例子都是直接输出error，根本无法拦截接口返回的错误信息，试试我的方法
  var data=error.response.data;
  _this.$message.error(data.msg);
})

2.简写(接口内直接带参数)
_this.$axios.post(_this.httpAPI + 'abc/getabc',{name:"111",password:"123"},{headers:{"Authorization": _this.token}
}).then(function(response){}).catch(function(error){})

3.简写(接口外封装参数)
var data={name:"111",password:"123"}
_this.$axios.post(_this.httpAPI + 'abc/getabc',data:data,
{headers:{"Authorization": _this.token}
}).then(function(response){}).catch(function(error){})

3.两者间的区别

1.axios get请求有长度（2k）这个长度在不同浏览器中会产生一定的差异–其实说白了就是浏览器了get请求的长度；post请求无长度。根据get、post 这一特性一般get请求用于获取数据，post请求用于提交数据。

3.get 请求只能发送 ASCII编码；post请求能发送更多的数据类型。

4.get 请求是将header、data、http打包成TCP包发送给服务端；post请求会产生两个TCP包，一个用来存放header信息 一个用来存放data信息，请求时先给浏览器发送header包，服务器响应后再发送data包，服务器响应后再返回数据。

5. get请求在浏览器回退时是无害的，无影响；post请求在浏览器回退时则会再次提交请求

写在最后

如果你觉得这篇文章写得不错或者对您有用的话请帮忙点赞加收藏，毕竟原创不易；如果您觉得文章有什么地方写得不对或者需要改进的地方，欢迎通过评论私聊博主！