vue本身不支持發送AJAX請求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件實現
axios是一個基于Promise的HTTP請求客戶端，用來發送請求，也是vue2.0官方推薦的，同時不再對vue-resource進行更新和維護
本文為大家介紹vue使用axios發送AJAX請求
首頁安裝并引入axios
1、npm install axios -S #直接下載axios組件，下載完畢后axios.js就存放在node_modules/axios/dist中
2、網上直接下載axios.min.js文件
3、通過script src的方式進行文件的引入<script src="js/axios.min.js"></script>
axios基本使用方法
發送get請求
1、基本使用格式
格式1：axios([options]) #這種格式直接將所有數據寫在options里，options其實是個字典
格式2：axios.get(url[,options]);
2、傳參方式：
通過url傳參
通過params選項傳參
下面我們來看一個vue發送ajax get請求實例代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>發送AJAX請求</title> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script> <script> window.onload=function(){ new Vue({ el:'#itany', data:{ user:{ name:'alice', age:19 }, }, methods:{ send(){ axios({ method:'get', url:'http://www.baidu.com?name=tom&age=23' }).then(function(resp){ console.log(resp.data); }).catch(resp => { console.log('請求失敗：'+resp.status+','+resp.statusText); }); }, sendGet(){ axios.get('server.php',{ params:{ name:'alice', age:19 } }) .then(resp => { console.log(resp.data); }).catch(err => { // console.log('請求失?。?+err.status+','+err.statusText); }); }, } }); } </script></head><body> <div id="itany"> <button @click="send">發送AJAX請求</button> <button @click="sendGet">GET方式發送AJAX請求</button> </div></body></html>發送post請求（push,delete的非get方式的請求都一樣）
1、基本使用格式
格式：axios.post(url,data,[options]);
2、傳參方式
1、自己拼接為鍵值對
2、使用transformRequest，在請求發送前將請求數據進行轉換
3、如果使用模塊化開發，可以使用qs模塊進行轉換
4、注釋：axios默認發送post數據時，數據格式是Request Payload，并非我們常用的Form Data格式，所以參數必須要以鍵值對形式傳遞，不能以json形式傳參
新聞熱點
疑難解答
圖片精選
