目录：
- 简介
- 用axios发送AJAX请求：axios([options])，axios.get(url[,options])，axios.post(url,data,[options])
- axios不支持跨域
一、简介
Vue本身不只是ajax请求，需要使用vue-resource(1.0已经停止维护)、axios(2.0官方推荐)等插件实现。
axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是Vue2.0官方推荐的，同时不再对vue-resource进行更新和维护。
我们查看一下 axios的github的官方地址：axios的Github地址(这个里面有很详细的axios的使用方法)，也可以在 百度文本框: GitHub axios。
如图：
二、用axios发送AJAX请求
2.1、安装axios并引入
npm install axios -S
也可以直接下载axios.min.js文件
2.2、基本用法
axios([options]) axios.get(url[,options]) axios.post(url,data,[options])
2.3、axios([options])用法
语法：
//1、get的请求方法
axios({
method: "get",
url: "user.json"，
params: { //get方法带参数,是放在请求头中的
ID: 12345
},
}).then(resp => { //resp => {} 相当于 function(resp){}
console.log(resp); //请求成功
}).catch(error => {
console.log(error); //请求失败
}).then(function(){
console.log("不管怎么样都要执行"); //必须执行的代码，相当于finnally
});
//2、post的请求方法
axios({
method: "get",
url: "user.json"
data：{ //post方法带的参数，是放在body中的
firstName: 'Fred'，
lastName: 'Flintstone'
}
}).then(resp => { //请求成功
console.log(resp);
}).catch(error => { //请求失败
console.log(error);
}).then(() => { //() => {} 相当于 function(){}
console.log("不管怎么样都要执行"); //必须执行的代码，相当于finnally
})
练习实例如下：
<body>
<div id="box">
<!--绑定send方法-->
<button @click="send">发送ajax请求</button>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el:"#box",
methods:{
send(){
axios({
method: "get", //请求方法get
url: "user.json" //在同等目录下创建一个user.json => {"name":"帅高高","age":23}
}).then(resp => { //请求成功后返回
console.log(resp);
}).catch(error => { //请求失败后的返回
console.log(error);
}).then(function(){ //相当于finally，一定执行
console.log("不管怎么样都要执行");
});
}
}
})
</script>
</body>
执行结果如下：
2.4、axios.get(url[,options])
传参方式：1、通过url传参 2、通过params选项传参
//1、通过url传参
axios.get('/user?name=shuaigaogao&age=23').then(response => {
//请求成功
console.log(response);
}).catch(error => {
// 请求议程
console.log(error);
}).then(function () {
//一定执行的程序，相当于 finnally
});
//2、通过params选项传参
axios.get('/user', {
params: {
name: shuaigaogao
age: 23
}
}).then(response => {
//请求成功
console.log(response);
}).catch(error => {
//请求异常
console.log(error);
}).then(function () {
// 一定执行的程序
});
练习实例如下：
<body>
<div id="box">
<!--以get方式发送ajax请求-->
<button @click="sendGet">GET方式发送ajax请求</button>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el:"#box",
methods:{
sendGet(){ //调用axios.get方式
axios.get("user.json").then(resp => { //请求成功 resp => {} 相当于 function(resp){}
console.log(resp.data);
}).catch(err => { //请求异常
console.log(err);
});
}
}
})
</script>
</body>
结果如下：
>{name: "帅高高", age: 23}
name: "帅高高"
age: 23
>__proto__: Object
2.5、axios.post(url,data,[options])
axios默认发送数据时，数据格式是Request Payload,并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json格式传参。
axios.post("url",{
username: 'shuaigaogao', //官方推荐的传参方式
age: 23
}
).then(resp => {
console.log(resp.data);
}).catch(err => {
console.log(err);
}).then(function(){
//一定执行
});
如图：数据格式是Request Payload
正确的传参方式：
- 自己拼接为键值对
- 使用transformRequest，在请求发送前将请求数据进行转换
- 如果使用模块化开发，可以使用qs模块进行转化
//自己拼接键值对方式
axios.post("url","username=shuaigaogao&age=23" //这个这种方式是放在body中的
).then(resp => {
console.log(resp.data);
}).catch(err => {
console.log(err);
}).then(function(){
//一定执行
});
//使用tansformRequest，在请求发送前请求数据进行转换
axios.post("url",this.data,{
transformRequest:{
function(data){
let params = '';
for(let index in data){
params = index+'='+data[index]+'&';
}
return params;
}
}
}
).then(resp => {
console.log(resp.data);
}).catch(err => {
console.log(err);
}).then(function(){
//一定执行
});
我们就拿 tansformRequest，在请求发送前请求数据进行转换做实例：
<body>
<div id="box">
<button @click="sendGet">POST方式发送ajax请求</button>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el:"#box",
data:{
user:{ //定义操作的数据
name:"shuaigaogao",
age:23
}
},
methods:{
sendGet(){
axios.post("url",this.user, //this.user就是上面data中的数据
{transformRequest:{
function(data){ //data就是 this.user传进来的参数
let params = '';
for(let index in data){
params = index+'='+data[index]+'&';
}
return params; //返回处理好的参数
}
}
}
).then(resp => {
console.log(resp.data);
}).catch(err => {
console.log(err);
}).then(function(){
//一定执行
});
}
}
})
</script>
</body>
三 、axios不支持跨域操作
axios本身并不支持发送跨域的请求，没有提供相应的API，作者赞没有计划在axios添加支持发送跨域请求没所以只能使用第三方库。
除非你请求的网站，它本身就支持跨域，比如，github网站，它本身就支持跨域，所以请求它是没有问题的。
<body>
<div id="box">
<!--传入uid的参数已经绑定到data中的uid中-->
<button @click="GetUserById(uid)">获取指定github账户信息并显示</button>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el:"#box",
data:{
uid:'' //上面绑定GetUserById函数传入参数uid，已经绑定到data中了
},
methods:{
GetUserById(uid){
//在url中调用uid 则用$(uid)
axios.get("http://api.github.com/users/$(uid)").then(resp => {
console.log(resp.data);
})
}
}
})
</script>
</body>