Vue.js——vue-resource全攻略
概述上一篇我們介紹了如何將$.ajax和Vue.js結(jié)合在一起使用，并實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的跨域CURD示例。Vue.js是數(shù)據(jù)驅(qū)動(dòng)的，這使得我們并不需要直接操作DOM，如果我們不需要使用jQuery的DOM選擇器，就沒(méi)有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通過(guò)XMLHttpRequest或JSONP發(fā)起請(qǐng)求并處理響應(yīng)。也就是說(shuō)，$.ajax能做的事情，vue-resource插件一樣也能做到，而且vue-resource的API更為簡(jiǎn)潔。另外，vue-resource還提供了非常有用的inteceptor功能，使用inteceptor可以在請(qǐng)求前和請(qǐng)求后附加一些行為，比如使用inteceptor在ajax請(qǐng)求時(shí)顯示loading界面。 本文的主要內(nèi)容如下：
本文11個(gè)示例的源碼已放到GitHub，如果您覺(jué)得本篇內(nèi)容不錯(cuò)，請(qǐng)點(diǎn)個(gè)贊，或在GitHub上加個(gè)星星！ GitHub Source 本文的所有示例如下：
各位在閱讀這篇文章的內(nèi)容時(shí)，可以先嘗試該列表的最后兩個(gè)示例，這兩個(gè)示例綜合使用了this.$http和inteceptor。 vue-resource特點(diǎn)vue-resource插件具有以下特點(diǎn)： 1. 體積小 vue-resource非常小巧，在壓縮以后只有大約12KB，服務(wù)端啟用gzip壓縮后只有4.5KB大小，這遠(yuǎn)比jQuery的體積要小得多。 2. 支持主流的瀏覽器 和Vue.js一樣，vue-resource除了不支持IE 9以下的瀏覽器，其他主流的瀏覽器都支持。 3. 支持Promise API和URI Templates Promise是ES6的特性，Promise的中文含義為“先知”，Promise對(duì)象用于異步計(jì)算。 4. 支持?jǐn)r截器 攔截器是全局的，攔截器可以在請(qǐng)求發(fā)送前和發(fā)送請(qǐng)求后做一些處理。 vue-resource使用引入vue-resource<script src="js/vue.js"></script><script src="js/vue-resource.js"></script> 基本語(yǔ)法引入vue-resource后，可以基于全局的Vue對(duì)象使用http，也可以基于某個(gè)Vue實(shí)例使用http。 // 基于全局Vue對(duì)象使用httpVue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // 在一個(gè)Vue實(shí)例內(nèi)使用$http this.$http.get('/someUrl', [options]).then(successCallback, errorCallback); this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); 在發(fā)送請(qǐng)求后，使用then方法來(lái)處理響應(yīng)結(jié)果，then方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是響應(yīng)成功時(shí)的回調(diào)函數(shù)，第二個(gè)參數(shù)是響應(yīng)失敗時(shí)的回調(diào)函數(shù)。 then方法的回調(diào)函數(shù)也有兩種寫(xiě)法，第一種是傳統(tǒng)的函數(shù)寫(xiě)法，第二種是更為簡(jiǎn)潔的ES 6的Lambda寫(xiě)法： // 傳統(tǒng)寫(xiě)法this.$http.get('/someUrl', [options]).then(function(response){ // 響應(yīng)成功回調(diào) }, function(response){ // 響應(yīng)錯(cuò)誤回調(diào) }); // Lambda寫(xiě)法 this.$http.get('/someUrl', [options]).then((response) => { // 響應(yīng)成功回調(diào) }, (response) => { // 響應(yīng)錯(cuò)誤回調(diào) }); PS：做過(guò).NET開(kāi)發(fā)的人想必對(duì)Lambda寫(xiě)法有一種熟悉的感覺(jué)。 支持的HTTP方法vue-resource的請(qǐng)求API是按照REST風(fēng)格設(shè)計(jì)的，它提供了7種請(qǐng)求API：
除了jsonp以外，另外6種的API名稱是標(biāo)準(zhǔn)的HTTP方法。當(dāng)服務(wù)端使用REST API時(shí)，客戶端的編碼風(fēng)格和服務(wù)端的編碼風(fēng)格近乎一致，這可以減少前端和后端開(kāi)發(fā)人員的溝通成本。
options對(duì)象發(fā)送請(qǐng)求時(shí)的options選項(xiàng)對(duì)象包含以下屬性：
emulateHTTP的作用如果Web服務(wù)器無(wú)法處理PUT, PATCH和DELETE這種REST風(fēng)格的請(qǐng)求，你可以啟用enulateHTTP現(xiàn)象。啟用該選項(xiàng)后，請(qǐng)求會(huì)以普通的POST方法發(fā)出，并且HTTP頭信息的X-HTTP-Method-Override屬性會(huì)設(shè)置為實(shí)際的HTTP方法。 Vue.http.options.emulateHTTP = true;emulateJSON的作用如果Web服務(wù)器無(wú)法處理編碼為application/json的請(qǐng)求，你可以啟用emulateJSON選項(xiàng)。啟用該選項(xiàng)后，請(qǐng)求會(huì)以application/x-www-form-urlencoded作為MIME type，就像普通的HTML表單一樣。 Vue.http.options.emulateJSON = true;response對(duì)象response對(duì)象包含以下屬性：
注意：本文的vue-resource版本為v0.9.3，如果你使用的是v0.9.0以前的版本，response對(duì)象是沒(méi)有json(), blob(), text()這些方法的。 CURD示例提示：以下示例仍然沿用上一篇的組件和WebAPI，組件的代碼和頁(yè)面HTML代碼我就不再貼出來(lái)了。 GET請(qǐng)求var demo = new Vue({el: '#app', data: { gridColumns: ['customerId', 'companyName', 'contactName', 'phone'], gridData: [], apiUrl: 'http://211.149.193.19:8080/api/customers' }, ready: function() { this.getCustomers() }, methods: { getCustomers: function() { this.$http.get(this.apiUrl) .then((response) => { this.$set('gridData', response.data) }) .catch(function(response) { console.log(response) }) } } }) 這段程序的then方法只提供了successCallback，而省略了errorCallback。 在then方法的回調(diào)函數(shù)內(nèi)，你也可以直接使用this，this仍然是指向Vue實(shí)例的： getCustomers: function() {this.$http.get(this.apiUrl) .then((response) => { this.$set('gridData', response.data) }) .catch(function(response) { console.log(response) }) } 為了減少作用域鏈的搜索，建議使用一個(gè)局部變量來(lái)接收this。
View Demo JSONP請(qǐng)求getCustomers: function() {this.$http.jsonp(this.apiUrl).then(function(response){ this.$set('gridData', response.data) }) } View Demo POST請(qǐng)求var demo = new Vue({el: '#app', data: { show: false, gridColumns: [{ name: 'customerId', isKey: true }, { name: 'companyName' }, { name: 'contactName' }, { name: 'phone' }], gridData: [], apiUrl: 'http://211.149.193.19:8080/api/customers', item: {} }, ready: function() { this.getCustomers() }, methods: { closeDialog: function() { this.show = false }, getCustomers: function() { var vm = this vm.$http.get(vm.apiUrl) .then((response) => { vm.$set('gridData', response.data) }) }, createCustomer: function() { var vm = this vm.$http.post(vm.apiUrl, vm.item) .then((response) => { vm.$set('item', {}) vm.getCustomers() }) this.show = false } } })
View Demo PUT請(qǐng)求updateCustomer: function() {var vm = this vm.$http.put(this.apiUrl + '/' + vm.item.customerId, vm.item) .then((response) => { vm.getCustomers() }) }
View Demo Delete請(qǐng)求deleteCustomer: function(customer){var vm = this vm.$http.delete(this.apiUrl + '/' + customer.customerId) .then((response) => { vm.getCustomers() }) }
View Demo 使用resource服務(wù)vue-resource提供了另外一種方式訪問(wèn)HTTP——resource服務(wù)，resource服務(wù)包含以下幾種默認(rèn)的action： get: {method: 'GET'},save: {method: 'POST'}, query: {method: 'GET'}, update: {method: 'PUT'}, remove: {method: 'DELETE'}, delete: {method: 'DELETE'} resource對(duì)象也有兩種訪問(wèn)方式：
resource可以結(jié)合URI Template一起使用，以下示例的apiUrl都設(shè)置為{/id}了： apiUrl: 'http://211.149.193.19:8080/api/customers{/id}'GET請(qǐng)求使用get方法發(fā)送GET請(qǐng)求，下面這個(gè)請(qǐng)求沒(méi)有指定{/id}。 getCustomers: function() {var resource = this.$resource(this.apiUrl) vm = this resource.get() .then((response) => { vm.$set('gridData', response.data) }) .catch(function(response) { console.log(response) }) } View Demo POST請(qǐng)求使用save方法發(fā)送POST請(qǐng)求，下面這個(gè)請(qǐng)求沒(méi)有指定{/id}。 createCustomer: function() {var resource = this.$resource(this.apiUrl) vm = this resource.save(vm.apiUrl, vm.item) .then((response) => { vm.$set('item', {}) vm.getCustomers() }) this.show = false } View Demo PUT請(qǐng)求使用update方法發(fā)送PUT請(qǐng)求，下面這個(gè)請(qǐng)求指定了{(lán)/id}。 updateCustomer: function() {var resource = this.$resource(this.apiUrl) vm = this resource.update({ id: vm.item.customerId}, vm.item) .then((response) => { vm.getCustomers() }) } {/id}相當(dāng)于一個(gè)占位符，當(dāng)傳入實(shí)際的參數(shù)時(shí)該占位符會(huì)被替換。 View Demo DELETE請(qǐng)求使用remove或delete方法發(fā)送DELETE請(qǐng)求，下面這個(gè)請(qǐng)求指定了{(lán)/id}。 deleteCustomer: function(customer){var resource = this.$resource(this.apiUrl) vm = this resource.remove({ id: customer.customerId}) .then((response) => { vm.getCustomers() }) } View Demo 使用inteceptor攔截器可以在請(qǐng)求發(fā)送前和發(fā)送請(qǐng)求后做一些處理。
基本用法Vue.http.interceptors.push((request, next) => {// ... // 請(qǐng)求發(fā)送前的處理邏輯 // ... next((response) => { // ... // 請(qǐng)求發(fā)送后的處理邏輯 // ... // 根據(jù)請(qǐng)求的狀態(tài)，response參數(shù)會(huì)返回給successCallback或errorCallback return response }) }) 在response返回給successCallback或errorCallback之前，你可以修改response中的內(nèi)容，或做一些處理。 如果不想使用Lambda函數(shù)寫(xiě)法，可以用平民寫(xiě)法： ? Vue.http.interceptors.push(function(request, next) {// ... // 請(qǐng)求發(fā)送前的處理邏輯 // ... next(function(response) { // ... // 請(qǐng)求發(fā)送后的處理邏輯 // ... // 根據(jù)請(qǐng)求的狀態(tài)，response參數(shù)會(huì)返回給successCallback或errorCallback return response }) }) 示例1之前的CURD示例有一處用戶體驗(yàn)不太好，用戶在使用一些功能的時(shí)候如果網(wǎng)絡(luò)較慢，畫(huà)面又沒(méi)有給出反饋，用戶是不知道他的操作是成功還是失敗的，他也不知道是否該繼續(xù)等待。 通過(guò)inteceptor，我們可以為所有的請(qǐng)求處理加一個(gè)loading：請(qǐng)求發(fā)送前顯示loading，接收響應(yīng)后隱藏loading。 具體步驟如下： 1.添加一個(gè)loading組件 <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> 2.將loading組件作為另外一個(gè)Vue實(shí)例的子組件 var help = new Vue({el: '#help', data: { showLoading: false }, components: { 'loading': { template: '#loading-template', } } }) 3.將該Vue實(shí)例掛載到某個(gè)HTML元素 <div id="help"><loading v-show="showLoading"></loading> </div> 4.添加inteceptor Vue.http.interceptors.push((request, next) => {loading.show = true next((response) => { loading.show = false return response }); });
View Demo 示例2當(dāng)用戶在畫(huà)面上停留時(shí)間太久時(shí)，畫(huà)面數(shù)據(jù)可能已經(jīng)不是最新的了，這時(shí)如果用戶刪除或修改某一條數(shù)據(jù)，如果這條數(shù)據(jù)已經(jīng)被其他用戶刪除了，服務(wù)器會(huì)反饋一個(gè)404的錯(cuò)誤，但由于我們的put和delete請(qǐng)求沒(méi)有處理errorCallback，所以用戶是不知道他的操作是成功還是失敗了。 你問(wèn)我為什么不在每個(gè)請(qǐng)求里面處理errorCallback，這是因?yàn)槲冶容^懶。這個(gè)問(wèn)題，同樣也可以通過(guò)inteceptor解決。 1. 繼續(xù)沿用上面的loading組件，在#help元素下加一個(gè)對(duì)話框 <div id="help"><loading v-show="showLoading" ></loading> <modal-dialog :show="showDialog"> <header class="dialog-header" slot="header"> <h1 class="dialog-title">Server Error</h1> </header> <div class="dialog-body" slot="body"> <p class="error">Oops,server has got some errors, error code: {{errorCode}}.</p> </div> </modal-dialog> </div> 2.給help實(shí)例的data選項(xiàng)添加兩個(gè)屬性 var help = new Vue({el: '#help', data: { showLoading: false, showDialog: false, errorCode: '' }, components: { 'loading': { template: '#loading-template', } } }) 3.修改inteceptor Vue.http.interceptors.push((request, next) => {help.showLoading = true next((response) => { if(!response.ok){ help.errorCode = response.status help.showDialog = true } help.showLoading = false return response }); });
View Demo 總結(jié)vue-resource是一個(gè)非常輕量的用于處理HTTP請(qǐng)求的插件，它提供了兩種方式來(lái)處理HTTP請(qǐng)求：
這兩種方式本質(zhì)上沒(méi)有什么區(qū)別，閱讀vue-resource的源碼，你可以發(fā)現(xiàn)第2種方式是基于第1種方式實(shí)現(xiàn)的。 inteceptor可以在請(qǐng)求前和請(qǐng)求后附加一些行為，這意味著除了請(qǐng)求處理的過(guò)程，請(qǐng)求的其他環(huán)節(jié)都可以由我們來(lái)控制。 ? |
總結(jié)
以上是生活随笔為你收集整理的Vue.js——vue-resource全攻略的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： linux中shell变量$#,$@,$
- 下一篇： vue.js初识（一）