目錄：
- 簡介
- 用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>