詳解vue前后臺(tái)數(shù)據(jù)交互vue-resource文檔
這兩天學(xué)習(xí)了vue-resource插件個(gè)地方知識(shí)點(diǎn)挺多的,而且很重要,所以,今天添加一點(diǎn)小筆記。
Vue可以構(gòu)建一個(gè)完全不依賴后端服務(wù)的應(yīng)用,同時(shí)也可以與服務(wù)端進(jìn)行數(shù)據(jù)交互來(lái)同步界面的動(dòng)態(tài)更新。
Vue通過(guò)插件的形式實(shí)現(xiàn)了基于AJAX,JSPNP等技術(shù)的服務(wù)端通信。
vue-resource
是一個(gè)通過(guò)XMLHttpRequrest
或JSONP
技術(shù)實(shí)現(xiàn)異步加載服務(wù)端數(shù)據(jù)的Vue插件
提供了一般的 HTTP請(qǐng)求接口和RESTful架構(gòu)請(qǐng)求接口,并且提供了全局方法和VUe組件實(shí)例方法。
使用的版本是:vue-resource 0.7.2
配置
參數(shù)配置
分為:
- 全局配置
- 組件實(shí)例配置
- 調(diào)用配置
這三部分的優(yōu)先級(jí)依次增高,游戲機(jī)高的配置會(huì)覆蓋優(yōu)先級(jí)低的配置。
全局配置
Vue.http.options.root = '/root';
全局配置option屬性
組件實(shí)例配置
在實(shí)例化組件時(shí)可以傳入http選項(xiàng)來(lái)進(jìn)行配置
new Vue({ http: { root: '/root', headers: { Authorization: '' } } })
方法調(diào)用時(shí)配置
在調(diào)用vue-resource
請(qǐng)求方法是傳入選項(xiàng)對(duì)象。
new Vue({ ready: function() { // get 請(qǐng)求 this.$http.get({url: '', headers: { Authorization: '' } }) .then(() => { // 請(qǐng)求成功回調(diào) }, () => { // 請(qǐng)求失敗回調(diào) }); } });
headers配置
通過(guò)headers屬性來(lái)配置請(qǐng)求頭。
除了參數(shù)配置headers屬性可以設(shè)置請(qǐng)求頭外,在vue-resource中也提供了全局默認(rèn)的headers配置
Vue.http.headers鍵值可以是HTTP方法名,common,custom,三種類型。這三種類型的配置會(huì)進(jìn)行合并,優(yōu)先級(jí)從低到高依次是common,custom,HTTP方法名。
其中common對(duì)應(yīng)的請(qǐng)求頭會(huì)在所有請(qǐng)求中設(shè)置,custom對(duì)應(yīng)的請(qǐng)求頭在非跨域時(shí)設(shè)置,HTTP方法名對(duì)應(yīng)的請(qǐng)求頭只有在請(qǐng)求的method匹配方法名時(shí)才會(huì)被設(shè)置。
基本HTTP調(diào)用
基本HTTP調(diào)用即普通的GET,POST等基本的HTTP操作實(shí)際上執(zhí)行增,刪,改,查是前后端開發(fā)人員共同約定的并非通過(guò)HTTP的請(qǐng)求方法如GET表示獲取數(shù)據(jù),PUT代表寫入數(shù)據(jù),POST表示更新數(shù)據(jù)。底層方法和便捷方法執(zhí)行后返回一個(gè)Promise對(duì)象,可以使用Promise語(yǔ)法來(lái)注冊(cè)成功,失敗回調(diào)。
底層方法
全局的Vue.http方法和Vue組件的實(shí)例方法this.$http都屬于底層方法,他們根據(jù)所傳入option慘啊書的method屬性來(lái)判斷請(qǐng)求方式是GET還是POST,亦或是其它的HTTP的合法方法。
全局調(diào)用
Vue.http(option);
組件實(shí)例調(diào)用
this.$http(option)
全局調(diào)用和組件實(shí)例調(diào)用都是接收相同的option參數(shù)。都返回Promise對(duì)象。不同的是,全局方式回調(diào)this指向window,而組建實(shí)例調(diào)用方式回調(diào)指向組件實(shí)例。
組件實(shí)例方式發(fā)送POST請(qǐng)求
new Vue({ ready: function () { // POST請(qǐng)求 this.$http({ url: '', method: 'POST', // 請(qǐng)求體重發(fā)送的數(shù)據(jù) data: { cat: 1 }, // 設(shè)置請(qǐng)求頭 headers: { 'Content-Type': 'x-www-from-urlencoded' } }).then(function () { // 請(qǐng)求成功回調(diào) }, function () { // 請(qǐng)求失敗回調(diào) }); } });
便捷方法
不同于底層方法,便捷方法是對(duì)底層方法的封裝,在調(diào)用時(shí)可以省去配置選項(xiàng)option中的method屬性。
vue-resource 提供的便捷方法:
- get(url, [data], [options]);
- post(url, [data], [options]);
- put(url, [data], [options]);
- patch(url, [data], [options]);
- delete(url, [data], [options]);
- jsonp(url, [data], [options]);
都是接受三個(gè)參數(shù):
- url(字符串),請(qǐng)求地址??杀籵ptions對(duì)象中url屬性覆蓋。
- data(可選,字符串或?qū)ο螅?,要發(fā)送的數(shù)據(jù),可被options對(duì)象中的data屬性覆蓋。
- options
便捷方法的POST請(qǐng)求:
this.$http.post( 'http://example.com', // 請(qǐng)求體重發(fā)送數(shù)據(jù)給服務(wù)端 { cat: 1, name: 'newBook' },{ 'headers': { 'Content-Type': 'x-www-form-urlencoded' } }).then(function () { // 成功回調(diào) }, function () { // 失敗回調(diào) });
請(qǐng)求選項(xiàng)對(duì)象
option對(duì)象的各屬性及含義
參數(shù) | 類型 | 描述 |
---|---|---|
url | string | 請(qǐng)求的URL |
method | string | 請(qǐng)求的HTTP方法,例如:'GET', 'POST'或其他HTTP方法 |
body | Object,FormDatastring | request body |
params | Object | 請(qǐng)求的URL參數(shù)對(duì)象 |
headers | Object | request header |
timeout | number | 單位為毫秒的請(qǐng)求超時(shí)時(shí)間 (0 表示無(wú)超時(shí)時(shí)間) |
before | function(request) | 請(qǐng)求發(fā)送前的處理函數(shù),類似于jQuery的beforeSend函數(shù) |
progress | function(event) | ProgressEvent回調(diào)處理函數(shù) |
credientials | boolean | 表示跨域請(qǐng)求時(shí)是否需要使用憑證 |
emulateHTTP | boolean | 發(fā)送PUT, PATCH, DELETE請(qǐng)求時(shí)以HTTP |
emulateJSON | boolean | 將request body以application/x-www-form-urlencoded content type發(fā)送 |
url
url(字符串)請(qǐng)求的URL地址
method
method(字符串)默認(rèn)值為GET,請(qǐng)求的HTTP方法(GET,POST等)
data
data(對(duì)象或字符串)
默認(rèn)值為:'',需要發(fā)送給服務(wù)端的數(shù)據(jù)。
data屬性的值對(duì)method為POST,PUT,DElETE等請(qǐng)求會(huì)作為請(qǐng)求體來(lái)傳送,對(duì)于GET,JSONP等方式的請(qǐng)求將會(huì)拼接在URL查詢參數(shù)中。
params
params(對(duì)象)
默認(rèn)值為:{}用來(lái)替換url中的模板變量,模板變量中為匹配到的屬性添加在URL地址后邊作為查詢參數(shù)。
Vue.http({ url: 'http://example.com/{book}', params: { book: 'vue', cat: 1 } });
最終url為: http//example.com/vue?cat=1
headers
headers(對(duì)象)
默認(rèn)值為:{},設(shè)置HTTP請(qǐng)求頭
xhr
xhr(對(duì)象)默認(rèn)值為null,該對(duì)象中屬性都會(huì)應(yīng)用到原生的xhr實(shí)例對(duì)象上。
upload
upload(對(duì)象)默認(rèn)值為null,該對(duì)象的屬性都會(huì)應(yīng)用到原生的xhr實(shí)例對(duì)象的upload屬性上。
jsonp
jsonp(字符串)
默認(rèn)值為:callback,JSONP請(qǐng)求中回調(diào)函數(shù)的名字。
Vue.http({ url: 'http://example.com/book', method: 'JSONP', jsonp: 'cb' });
最終的URL地址為http://example.com/book?cb=xxx
xxx 為 vue-resource 生成的隨機(jī)串。
tiemout
timeout(數(shù)值)
默認(rèn)為:0,單位為 ms。表示請(qǐng)求超時(shí)時(shí)間。0表示沒(méi)有超時(shí)限制。超市后,將會(huì)取消當(dāng)前請(qǐng)求。
vue-resrouce內(nèi)部通過(guò)攔截器注入超時(shí)取消邏輯。
if ( request.timeout ) { timeout = setTimeout(function () { reqest.cancel(); }, request.timeout); } // 超時(shí)后,Promise會(huì)被 reject,錯(cuò)誤回調(diào)會(huì)被執(zhí)行。
beforeSend
beforeSend(函數(shù))默認(rèn)值為:null,該函數(shù)接受請(qǐng)求選項(xiàng)對(duì)象作為參數(shù)。該函數(shù)在發(fā)送請(qǐng)求之前執(zhí)行,vue-resource內(nèi)部在攔截器最前端調(diào)用該方法。
emulateHTTP
emulateHTTP(布爾值)
默認(rèn)值為:false,當(dāng)值為true是,用HTTP的POST方式PUT,PATCH,DELETE等請(qǐng)求,并設(shè)置請(qǐng)求頭字段HTTP_Method_Override為原始請(qǐng)求方法。
如果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方法。
如果服務(wù)器無(wú)法處理PUT,PATCH和DELETE的請(qǐng)求??梢詥⒂胑nulateHTTP。
啟用之后,請(qǐng)求會(huì)以普通的POST方法發(fā)出,并且HTTP頭信息的X-HTTP-Method-Override屬性會(huì)設(shè)置為實(shí)例的HTTP方法
Vue.http.options.emulateHTTP = true;
emulateJSON
emulateJSON(布爾值)
默認(rèn)值為:false,當(dāng)值為true并且data為對(duì)象時(shí),設(shè)置請(qǐng)求頭Content-Type的值為application/x-www-form-urlencoded
如果服務(wù)器無(wú)法處理編碼為application/json的請(qǐng)求,可以啟用emulateJSON選項(xiàng)。啟用之后,請(qǐng)求會(huì)以application/x-www-form-urlencoded為MIME type,就像普通的HTML表單一樣。
Vue.http.options.emulateJSON = true;
crossOrigin
crossOrigin(布爾值)
默認(rèn)值為:null,表示是否跨域,如果沒(méi)有設(shè)置該屬性,vue-resource內(nèi)部會(huì)判斷瀏覽器當(dāng)前URL和請(qǐng)求URL是否跨域。
if ( request.crossOrgin === null ) { request.corssOrigin = corssOrigin(request); } if ( request.corssOrigin ) { if ( !xhrCors ) { request.client = xdrClient; } request.enumlateHTTP = false; }
如果最終crossOrigin為true并且瀏覽器不支持CORS,即不支持XMLHttpRequest2時(shí),則會(huì)使用XDomainRequest來(lái)請(qǐng)求。目前XDomainRequest 只有IE8,IE9 瀏覽器支持用來(lái)進(jìn)行AJAX跨域。
reqponse對(duì)象
response對(duì)象包含服務(wù)端的數(shù)據(jù),以及HTTP響應(yīng)狀態(tài),響應(yīng)頭等信心。
- data (對(duì)象或字符串): 服務(wù)端返回的數(shù)據(jù),已使用 JSON.parse 解析。
- ok(布爾值):當(dāng)HTTP響應(yīng)狀態(tài)碼在200~299區(qū)間時(shí)該值為true,表示響應(yīng)成功。
- status(數(shù)值): HTTP響應(yīng)狀態(tài)碼。
- statusText(字符串): HTTP響應(yīng)狀態(tài)文本描述。
- headers(函數(shù)): 獲取HTTP響應(yīng)頭信息,不傳參表示獲取整個(gè)響應(yīng)頭,返回一個(gè)相應(yīng)頭對(duì)象。傳參表示獲取對(duì)應(yīng)的響應(yīng)頭信息。
- request(對(duì)象)
RESTful調(diào)用
RESTful調(diào)用就是客戶端通過(guò)HTTP動(dòng)詞來(lái)表示增,刪,改,查實(shí)現(xiàn)對(duì)服務(wù)端數(shù)據(jù)操作的一種架構(gòu)模式。
vue-resource提供全局調(diào)用Vue.resource或者在組件實(shí)例上調(diào)用this.$rsource。
resource(url ,[params], [actions], [options]);
url
url(字符串)請(qǐng)求地址,可以包含占位符,會(huì)被parms對(duì)象中的同名屬性的值替換。
this.$resource('/books/{cat}', { cat: 1 }); // 解析的URL為:/books/1
params
params(可選,對(duì)象)
參數(shù)對(duì)象,可用來(lái)提供url中的占位符,多出來(lái)的屬性拼接url的查詢參數(shù)。
actions
actions(可選,對(duì)象)
可以用來(lái)對(duì)已有的action進(jìn)行配置,也可以用來(lái)定義新的action。
默認(rèn)的aciton配置為:
Resource.actions = { get: {method: 'GET'}, save: {method: 'POST'}, query: {method: 'GET'}, update: {method: 'PUT'}, remove: {method: 'delete'}, delete: {method: 'DELETE'} }
修改默認(rèn)值action配置
this.$resource( '/books/{cat}', { cat: 1 }, { charge: { method: 'POST', params: { charge: true } } });
actions對(duì)象中的單個(gè)action如charge對(duì)象可以包含options中的所有屬性,且有限即高于iotions對(duì)象
options
options(可選,對(duì)象)
resource方法執(zhí)行后返回一個(gè)包含了所有action方法名的對(duì)象。其包含自定義的action方法
resource請(qǐng)求數(shù)據(jù)
var resouce = this.$resource('/books/{id}'); // 查詢 // 第一個(gè)參數(shù)為params對(duì)象,優(yōu)先級(jí)高于resource發(fā)方法的params參數(shù) resoure.get({id: 1}).then(function ( response ) { this.$set('item', response.item); }); // 保存 // 第二個(gè)參數(shù)為要發(fā)送的數(shù)據(jù) resource.seve({id: 1}, {item: this.item}).then(function () { // 請(qǐng)求成功回調(diào) }, function () { // 請(qǐng)求失敗回調(diào) }); resource.delete({id: 1}).then(function () { // 請(qǐng)求成功回調(diào) }, function () { // 請(qǐng)求失敗回調(diào) });
攔截器
可以全局進(jìn)行攔截器設(shè)置。攔截器在發(fā)送請(qǐng)求前或響應(yīng)返回時(shí)做一些特殊的處理。
攔截器的注冊(cè)
Vue.http.interceptors.push({ request: function ( request ) { // 更改請(qǐng)求類型為POST request.method = 'POST'; return request; }, response: function ( response ) { // 修改返回?cái)?shù)據(jù) response.data = [{ custom: 'custom' }]; return response; } });
工廠函數(shù)注冊(cè)
Vue.http.interceptors.push(function () { return { request: function ( request ) { return request; }, response: function ( response ) { return response; } } }); Vue.http.interceptors.push(function ( request, next ) { // 請(qǐng)求發(fā)送前的處理邏輯 next(function () { // 請(qǐng)求發(fā)送后的處理邏輯 // 更具請(qǐng)求的狀態(tài), response參數(shù)會(huì)返回給 successCallback或errorCallback return response }); });
實(shí)現(xiàn)的功能:
AJAX請(qǐng)求的loading界面
Vue.http.interceptors.push((request, next) => { // 通過(guò)控制 組件的`v-show`值顯示loading組件 loading.show = true; next((response) => { loading.show = false return response }); });
請(qǐng)求失敗時(shí)的提示對(duì)話框
跨域AJAX
vue-resource中用到的CORS特性,和 XHMLHttpRequest2的替代品 XDomainRequest
XDomain只支持GET和POST兩種請(qǐng)求。如果要在vue-resource中使用其它方法請(qǐng)求,設(shè)置請(qǐng)求選項(xiàng)的emulateHTTP為true。
XHMLHttpRequest2 CORS
XHMLHttpRequest2提交AJAX請(qǐng)求還是和普通的XMLHttpRequset請(qǐng)求一樣,只是增加了一些新特性。
在提交AJAX跨域請(qǐng)求時(shí),需要知道當(dāng)前瀏覽器是支持XHMLHttpRequest2, 判斷方法使用 in操作符檢測(cè)當(dāng)前 XMLHttpRequest實(shí)例對(duì)象是否包含 withCredentials屬性,如果包含則支持CORS
var xhrCors = 'withCredentials' in new XMLHttpRequest();
在支持CORS的情況下,還需啊喲服務(wù)端啟用CORS支持。
例如:
需要從http://example.com:8080提交到http://example.com/8088,需要在http://example.com添加響應(yīng)頭
Access-Control-Allow-Origin: *
XDomainRequest
如果vue0resource不支持XMLHttpRequest2,則會(huì)降級(jí)使用用XDomainRequest
Promise
vue.resource基本HTTP調(diào)用和RESTful調(diào)用action方法執(zhí)行后都會(huì)返回一個(gè)Promise對(duì)象。該P(yáng)romise對(duì)象提供了then,catch,finally。
var promise - this.$http.post( 'http://example.com/book/cretae', // 請(qǐng)求體中要發(fā)送給服務(wù)端數(shù)據(jù) { cat: '1', name: 'newBook' }, { headers: { 'Content-Type': 'x-www-form-urlencoded' } } ); promise.then(function ( response ) { // 成功回調(diào) }, function ( response ) { // 失敗回調(diào) }); promise.catch(function ( response ) { // 失敗回調(diào) }); promise.finally(function () { // 執(zhí)行完成或者失敗回調(diào)后都會(huì)執(zhí)行此邏輯。 }); // 所有回調(diào)函數(shù)的this都指向組件實(shí)例
url模板
vue-resource 使用url-template庫(kù)來(lái)解析url模板.
在vue-resourece方法請(qǐng)求傳參時(shí) 可以在url中放置花括號(hào)包圍的占位符。vue-resouce內(nèi)部會(huì)使用url0template將占位符用params對(duì)象中的屬性進(jìn)行替換。
question
如何發(fā)送JSONP請(qǐng)求
vue-resouce提供三種調(diào)用方式進(jìn)行跨域
全局方法
Vue.http({ url: 'http://example.com/books', // 參數(shù)部分,將會(huì)拼接在url之后 params: { cat: 1 }, method: 'JSONP' }) .then(function ( response ){ }, function () { //error });
實(shí)例底層方法
http.$http({ url: 'http://example.com/books', params: { cat: 1 }, method: 'JSONP' }) .then(function () { // this 指向當(dāng)前組件實(shí)例 }, function () { });
實(shí)例便捷方法
this.$http.jsonp( 'http://www.example.com/books', { cat: 1 } ) .then(function () { }, function () { });
修改數(shù)據(jù)類型
如何修改發(fā)送給服務(wù)端的數(shù)據(jù)類型
在默認(rèn)情況下,對(duì)于PUT,PSOT,PATCH,DELETE等請(qǐng)求,請(qǐng)求頭中的Content-Type為appliaction/json即JSON類型。有時(shí)候需要將數(shù)據(jù)提交為指定類型如application/x-www-form-urlencoded,multipart/form-data,txt/plain等。
全局headers配置
Vue.http.heaers.post['Content-Type'] = 'application/x-www-form-urlencoded'
實(shí)例配置
this.$http.post( 'http://example.com/books', // 成功回調(diào) function ( data, status, request ) { if ( status == 200 ) { consl.dir(data); } }, // 配置請(qǐng)求頭 headres: { 'Content-Type': 'multipart/form-data' } ); // 實(shí)例配置的優(yōu)先級(jí)高于全局配置
跨域請(qǐng)求出錯(cuò)
跨域請(qǐng)求需要服務(wù)端開啟CORS支持
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
element-ui upload組件上傳文件類型限制問(wèn)題小結(jié)
最近我遇到這樣的問(wèn)題,接受類型已經(jīng)加了accept 但是當(dāng)選擇彈出本地選擇文件時(shí)候切換到所有文件 之前的文件類型就本根過(guò)濾不掉了,下面小編給大家介紹element-ui upload組件上傳文件類型限制問(wèn)題小結(jié),感興趣的朋友一起看看吧2024-02-02vue3?ref實(shí)現(xiàn)響應(yīng)式的方法
這篇文章主要介紹了vue3的ref是如何實(shí)現(xiàn)響應(yīng)式的,我們講了ref是如何實(shí)現(xiàn)響應(yīng)式的,主要分為兩種情況:ref接收的是number這種原始類型、ref接收的是對(duì)象這種非原始類型,需要的朋友可以參考下2024-07-07Vue3+elementui plus創(chuàng)建項(xiàng)目的方法
這篇文章主要介紹了Vue3+elementui plus創(chuàng)建項(xiàng)目的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12vue中html2canvas給指定區(qū)域添加滿屏水印
本文主要介紹了vue中html2canvas給指定區(qū)域添加滿屏水印,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11vue中v-for循環(huán)選中點(diǎn)擊的元素并對(duì)該元素添加樣式操作
這篇文章主要介紹了vue中v-for循環(huán)選中點(diǎn)擊的元素并對(duì)該元素添加樣式操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue打包部署到tomcat上頁(yè)面空白資源加載不出來(lái)的解決
這篇文章主要介紹了vue打包部署到tomcat上頁(yè)面空白資源加載不出來(lái)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03教你如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境
這篇文章主要介紹了如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境,文中給大家提到了如何讓 Vite 加載 Electron 的內(nèi)置模塊和 Node.js 的內(nèi)置模塊,需要的朋友可以參考下2022-11-11vue實(shí)現(xiàn)四級(jí)導(dǎo)航及驗(yàn)證碼的方法實(shí)例
我們?cè)谧鲰?xiàng)目經(jīng)常會(huì)遇到多級(jí)導(dǎo)航這個(gè)需求,所以下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)四級(jí)導(dǎo)航及驗(yàn)證碼的相關(guān)資料,文章通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07