Vue.js使用-ajax使用
1.為什么要使用ajax
前面的例子，使用的是本地模擬數據，通過ajax請求服務器數據。

2.使用jquery的ajax庫示例

new Vue({el: '#app',data: {searchQuery: '',columns: [{name: 'name', iskey: true}, {name: 'age'},{name: 'sex', dataSource:['Male', 'Female']}],peoples: []},ready: function () {this.getPeoples();},methods: {getPeoples: function () {var vm = this;$.ajax({url: 'http://localhost:20000/my_test',type: 'get',dataType: 'json',success: function (data) {vm.$set('peoples', data.result);},error: function(xhr, errorType, error) {alert('Ajax request error, errorType: ' + errorType + ', error: ' + error)}});}} })

3.vue-resource庫
vue是基于數據驅動的，不需要直接操作DOM，因此沒有必要引入jquery
vue提供了一款輕量的http請求庫，vue-resource
vue-resource除了提供http請求外，還提供了inteceptor攔截器功能，在訪問前，訪問后，做處理。

4.vue-resource語法-使用$http對象

// 基于全局Vue對象使用http Vue.http.get('/someUrl',[options]).then(successCallback, errorCallback); Vue.http.post('/someUrl',[body],[options]).then(successCallback, errorCallback); // 在一個Vue實例內使用$http this.$http.get('/someUrl',[options]).then(sucessCallback, errorCallback); this.$http.post('/someUrl',[body],[options]).then(successCallback, errorCallback);

then方法的回調函數寫法有兩種，第一種是傳統的函數寫法，第二種是更簡潔的Lambda表達式寫法。

//傳統寫法 this.$http.get('/someUrl',[options]).then(function(response){//響應成功回調 },function(response){//響應錯誤回調 });//Lambda寫法 this.$http.get('someUrl',[options]).then((response)=>{//響應成功回調 },(response)=>{//響應錯誤回調 });

5.vue-resource示例

<script src="js/vue-resource.js"></script> <script> new Vue({el: '#app',data: {searchQuery: '',columns: [{name: 'name', iskey: true}, {name: 'age'},{name: 'sex', dataSource:['Male', 'Female']}],peoples: []},ready: function () {this.getPeoples();},methods: {getPeoples: function () {var vm = this;vm.$http.get('http://localhost:20000/my_test').then(function (data) {var newdata = JSON.parse(data.body)vm.$set('peoples', newdata.result)}).catch(function (response) {console.log(response)})}}}) </script>

6.vue-resource用法-使用$resource對象除了使用$http對象訪問http，還可以使用$resource對象來訪問。
resource服務默認提供以下幾種action:
get:{method: ‘GET’},
save:{method: ‘POST’},
query:{method: ‘GET’},
update:{method: ‘PUT’},
remove:{method: ‘DELETE’},
delete:{method: ‘DELETE’},

resource對象使用示例如下：

new Vue({el: '#app',data: {searchQuery: '',columns: [{name: 'name', iskey: true}, {name: 'age'},{name: 'sex', dataSource:['Male', 'Female']}],peoples: []},ready: function () {this.getPeoples();},methods: {getPeoples: function () {var vm = this;var resource = this.$resource('http://localhost:20000/my_test')resource.get().then(function (data) {var newdata = JSON.parse(data.body)vm.$set('peoples', newdata.result)}).catch(function (response) {console.log(response)})}}})

7.攔截器interceptor
語法如下：

Vue.http.interceptors.push(function(request, next){//...//請求發送前的處理邏輯//...next(function(response){//...//請求發送后的處理邏輯//...//根據請求的狀態，response參數會返回給successCallback或errorCallbackreturn response})})

8.攔截器interceptor使用示例

<div id="help"><loading v-show="showLoading"></loading></div> <template id="loading-template"><div class="loading-overlay"><div class="sk-three-bounce"><div class="sk-child sk-bounce1"></div><div class="sk-child sk-bounce2"></div><div class="sk-child sk-bounce3"></div></div></div></template> <script> var help = new Vue({el: '#help',data: {showLoading: false},components: {'loading': {template: '#loading-template'}}})Vue.http.interceptors.push(function(request, next){help.showLoading = truenext(function (response) {help.showLoading = falsereturn response})}) </script>

9.vue-resource的優點
vue-resource比jquery輕量，可以使用Vue.http或者Vue.resource處理HTTP請求，兩者沒有什么區別。
另外可以是用interceptor在請求前和請求后附加一些行為。

總結

以上是生活随笔為你收集整理的Vue.js使用-http请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。