axios/vue-resource的http請求小結
阿新 • • 發佈：2018-12-03
vue本身不支援傳送ajax請求，需要使用vue-resource,axios等外掛實現
axios是一個基於Promise的HTTP請求客戶端，用來發送請求，也是vue2.0官方推薦的，同時不再對vue-resource進行更新和維護
安裝axios cnpm install axios -S
基本用法
axios([options])
axios.get(url,[options]);
傳參方式:
1.通過url傳參
2.通過params方式
axios.post(url,data,[options]);
axios預設傳送資料時，資料格式是Request.Payload,並非我們常用的Form
Data格式：所以引數必須要以鍵值對形式傳遞，不能以json形式傳參
傳參方式：
1.自己拼接為鍵值對
2.使用transformRequest，在請求傳送前將請求資料進行轉換
3.如果使用模組化開發，可以使用qs querystring模組進行轉換
axios本身並不支援傳送跨域的請求，沒有提供相應的API，作者也暫沒計劃在axios新增支援傳送跨域請求，所以只能使用第三方庫
使用vue-resource傳送跨域請求 cnpm install vue-resource -S jsonp仿照百度首頁搜尋框實現： <!DOCTYPE html> <head> <meta charset="utf-8"> <title>v-model</title> <script src="js/vue.js"></script> <script src="js/vue-resource.min.js"></script> <script> window.onload=function(){ var vm = new Vue({ el:'#itany', data:{//儲存資料 keyword:'', myData:[], now:-1//當前選中項的索引 }, methods:{ getData(e){ //如果按方向鍵上和下則不發請求 if(e.keyCode=38||e.keyCode=40){ return; } this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ params:{ wd:this.keyword; }, jsonp:'cb' //百度使用的jsonp引數名為cb，所以需要修改 }).then(resp => { this.myData=resp.data.s; }); }, changeDown(){ this.now++; this.keyword=this.myData[this.now]; if(this.now==this.myData.length){ this.now=-1; } }, changeUp(){ this.now--; this.keyword=this.myData[this.now]; if(this.now==-2){ this.now=this.myData.length-1; } } } }); } </script> </head> <body> <div id="itany"> <input type="text" v-model="keyword" @keyup="getData($event)" @keydown.down="changeDown" @keydown.up.prevent="changeUp"/> <ul> <li v-for="(value,index) in myData" :class="{current:index==now}"> {{value}} </li> </ul> <p v-show="myData.length==0">暫無資料....</p> </div> </body>
使用vue-resource傳送跨域請求 cnpm install vue-resource -S jsonp仿照百度首頁搜尋框實現： <!DOCTYPE html> <head> <meta charset="utf-8"> <title>v-model</title> <script src="js/vue.js"></script> <script src="js/vue-resource.min.js"></script> <script> window.onload=function(){ var vm = new Vue({ el:'#itany', data:{//儲存資料 keyword:'', myData:[], now:-1//當前選中項的索引 }, methods:{ getData(e){ //如果按方向鍵上和下則不發請求 if(e.keyCode=38||e.keyCode=40){ return; } this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ params:{ wd:this.keyword; }, jsonp:'cb' //百度使用的jsonp引數名為cb，所以需要修改 }).then(resp => { this.myData=resp.data.s; }); }, changeDown(){ this.now++; this.keyword=this.myData[this.now]; if(this.now==this.myData.length){ this.now=-1; } }, changeUp(){ this.now--; this.keyword=this.myData[this.now]; if(this.now==-2){ this.now=this.myData.length-1; } } } }); } </script> </head> <body> <div id="itany"> <input type="text" v-model="keyword" @keyup="getData($event)" @keydown.down="changeDown" @keydown.up.prevent="changeUp"/> <ul> <li v-for="(value,index) in myData" :class="{current:index==now}"> {{value}} </li> </ul> <p v-show="myData.length==0">暫無資料....</p> </div> </body>