Vue_VueResource
Vue可以構(gòu)建一個(gè)完全不依賴后端服務(wù)的應(yīng)用，同時(shí)也可以與服務(wù)端進(jìn)行數(shù)據(jù)交互來同步界面的動態(tài)更新。
Vue通過插件的形式實(shí)現(xiàn)了基于AJAX，JSPNP等技術(shù)的服務(wù)端通信。
vue-resource是一個(gè)通過XMLHttpRequrest或JSONP技術(shù)實(shí)現(xiàn)異步加載服務(wù)端數(shù)據(jù)的Vue插件
提供了一般的 HTTP請求接口和RESTful架構(gòu)請求接口，并且提供了全局方法和VUe組件實(shí)例方法。
使用的版本是：vue-resource 0.7.2
配置
參數(shù)配置
分為：
全局配置
組件實(shí)例配置
調(diào)用配置
這三部分的優(yōu)先級依次增高，游戲機(jī)高的配置會覆蓋優(yōu)先級低的配置。
全局配置
Vue.http.options.root = '/root';全局配置option屬性
組件實(shí)例配置
在實(shí)例化組件時(shí)可以傳入http選項(xiàng)來進(jìn)行配置
new Vue({http: {root: '/root',headers: {Authorization: ''}} })方法調(diào)用時(shí)配置
在調(diào)用vue-resource請求方法是傳入選項(xiàng)對象。
new Vue({ready: function() {// get 請求this.$http.get({url: '', headers: { Authorization: '' } }).then(() => {// 請求成功回調(diào)}, () => {// 請求失敗回調(diào)});} });headers配置
通過headers屬性來配置請求頭。
除了參數(shù)配置headers屬性可以設(shè)置請求頭外，在vue-resource中也提供了全局默認(rèn)的headers配置
Vue.http.headers鍵值可以是HTTP方法名，common，custom，三種類型。這三種類型的配置會進(jìn)行合并，優(yōu)先級從低到高依次是common,custom,HTTP方法名。
其中common對應(yīng)的請求頭會在所有請求中設(shè)置，custom對應(yīng)的請求頭在非跨域時(shí)設(shè)置，HTTP方法名對應(yīng)的請求頭只有在請求的method匹配方法名時(shí)才會被設(shè)置。
基本HTTP調(diào)用
基本HTTP調(diào)用即普通的GET，POST等基本的HTTP操作實(shí)際上執(zhí)行增，刪，改，查是前后端開發(fā)人員共同約定的并非通過HTTP的請求方法如GET表示獲取數(shù)據(jù)，PUT代表寫入數(shù)據(jù)，POST表示更新數(shù)據(jù)。
底層方法和便捷方法執(zhí)行后返回一個(gè)Promise對象，可以使用Promise語法來注冊成功，失敗回調(diào)。
底層方法
全局的Vue.http方法和Vue組件的實(shí)例方法this.$http都屬于底層方法，他們根據(jù)所傳入option慘啊書的method屬性來判斷請求方式是GET還是POST，亦或是其它的HTTP的合法方法。
全局調(diào)用
Vue.http(option);組件實(shí)例調(diào)用
this.$http(option)
全局調(diào)用和組件實(shí)例調(diào)用都是接收相同的option參數(shù)。都返回Promise對象。不同的是，全局方式回調(diào)this指向window，而組建實(shí)例調(diào)用方式回調(diào)指向組件實(shí)例。
組件實(shí)例方式發(fā)送POST請求
new Vue({ready: function () {// POST請求this.$http({url: '',method: 'POST',// 請求體重發(fā)送的數(shù)據(jù)data: {cat: 1},// 設(shè)置請求頭headers: {'Content-Type': 'x-www-from-urlencoded'}}).then(function () {// 請求成功回調(diào)}, function () {// 請求失敗回調(diào)});} });便捷方法
不同于底層方法，便捷方法是對底層方法的封裝，在調(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（字符串），請求地址。可被options對象中url屬性覆蓋。
data（可選，字符串或?qū)ο?#xff09;，要發(fā)送的數(shù)據(jù)，可被options對象中的data屬性覆蓋。
options
便捷方法的POST請求：
this.$http.post('http://example.com', // 請求體重發(fā)送數(shù)據(jù)給服務(wù)端{(lán)cat: 1,name: 'newBook'},{'headers': {'Content-Type': 'x-www-form-urlencoded'}}).then(function () {// 成功回調(diào)}, function () {// 失敗回調(diào)});請求選項(xiàng)對象
option對象的各屬性及含義
| url | string | 請求的URL |
| method | string | 請求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法 |
| body | Object,FormDatastring | request body |
| params | Object | 請求的URL參數(shù)對象 |
| headers | Object | request header |
| timeout | number | 單位為毫秒的請求超時(shí)時(shí)間 (0 表示無超時(shí)時(shí)間) |
| before | function(request) | 請求發(fā)送前的處理函數(shù)，類似于jQuery的beforeSend函數(shù) |
| progress | function(event) | ProgressEvent回調(diào)處理函數(shù) |
| credientials | boolean | 表示跨域請求時(shí)是否需要使用憑證 |
| emulateHTTP | boolean | 發(fā)送PUT, PATCH, DELETE請求時(shí)以HTTP |
| emulateJSON | boolean | 將request body以application/x-www-form-urlencoded content type發(fā)送 |
url
url（字符串）
請求的URL地址
method
method(字符串)
默認(rèn)值為GET，請求的HTTP方法(GET,POST等)
data
data(對象或字符串)
默認(rèn)值為:'',需要發(fā)送給服務(wù)端的數(shù)據(jù)。
data屬性的值對method為POST，PUT，DElETE等請求會作為請求體來傳送，對于GET，JSONP等方式的請求將會拼接在URL查詢參數(shù)中。
params
params(對象)
默認(rèn)值為：{}用來替換url中的模板變量，模板變量中為匹配到的屬性添加在URL地址后邊作為查詢參數(shù)。
最終url為： http//example.com/vue?cat=1
headers
headers(對象)
默認(rèn)值為:{},設(shè)置HTTP請求頭
xhr
xhr（對象）
默認(rèn)值為null，該對象中屬性都會應(yīng)用到原生的xhr實(shí)例對象上。
upload
upload(對象)
默認(rèn)值為null，該對象的屬性都會應(yīng)用到原生的xhr實(shí)例對象的upload屬性上。
jsonp
jsonp(字符串)
默認(rèn)值為:callback，JSONP請求中回調(diào)函數(shù)的名字。
最終的URL地址為http://example.com/book?cb=xxx
xxx 為 vue-resource 生成的隨機(jī)串。
tiemout
timeout(數(shù)值)
默認(rèn)為：0，單位為 ms。表示請求超時(shí)時(shí)間。0表示沒有超時(shí)限制。超市后，將會取消當(dāng)前請求。
vue-resrouce內(nèi)部通過攔截器注入超時(shí)取消邏輯。
beforeSend
beforeSend（函數(shù)）
默認(rèn)值為:null，該函數(shù)接受請求選項(xiàng)對象作為參數(shù)。該函數(shù)在發(fā)送請求之前執(zhí)行，vue-resource內(nèi)部在攔截器最前端調(diào)用該方法。
emulateHTTP
emulateHTTP（布爾值）
默認(rèn)值為:false,當(dāng)值為true是，用HTTP的POST方式PUT，PATCH，DELETE等請求，并設(shè)置請求頭字段HTTP_Method_Override為原始請求方法。
如果Web服務(wù)器無法處理PUT, PATCH和DELETE這種REST風(fēng)格的請求，你可以啟用enulateHTTP現(xiàn)象。啟用該選項(xiàng)后，請求會以普通的POST方法發(fā)出，并且HTTP頭信息的X-HTTP-Method-Override屬性會設(shè)置為實(shí)際的HTTP方法。
如果服務(wù)器無法處理PUT，PATCH和DELETE的請求。可以啟用enulateHTTP。
啟用之后，請求會以普通的POST方法發(fā)出，并且HTTP頭信息的X-HTTP-Method-Override屬性會設(shè)置為實(shí)例的HTTP方法
emulateJSON
emulateJSON(布爾值)
默認(rèn)值為：false,當(dāng)值為true并且data為對象時(shí)，設(shè)置請求頭Content-Type的值為application/x-www-form-urlencoded
如果服務(wù)器無法處理編碼為application/json的請求，可以啟用emulateJSON選項(xiàng)。啟用之后，請求會以application/x-www-form-urlencoded為MIME type，就像普通的HTML表單一樣。
Vue.http.options.emulateJSON = true;crossOrigin
crossOrigin（布爾值）
默認(rèn)值為：null，表示是否跨域，如果沒有設(shè)置該屬性，vue-resource內(nèi)部會判斷瀏覽器當(dāng)前URL和請求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í)，則會使用XDomainRequest來請求。目前XDomainRequest 只有IE8，IE9 瀏覽器支持用來進(jìn)行AJAX跨域。
reqponse對象
response對象包含服務(wù)端的數(shù)據(jù)，以及HTTP響應(yīng)狀態(tài)，響應(yīng)頭等信心。
data （對象或字符串）： 服務(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)頭對象。傳參表示獲取對應(yīng)的響應(yīng)頭信息。
request(對象)
RESTful調(diào)用
RESTful調(diào)用就是客戶端通過HTTP動詞來表示增，刪，改，查實(shí)現(xiàn)對服務(wù)端數(shù)據(jù)操作的一種架構(gòu)模式。
vue-resource提供全局調(diào)用Vue.resource或者在組件實(shí)例上調(diào)用this.$rsource。
resource(url ,[params], [actions], [options]);url
url（字符串）
請求地址，可以包含占位符，會被parms對象中的同名屬性的值替換。
params
params(可選，對象)
參數(shù)對象，可用來提供url中的占位符，多出來的屬性拼接url的查詢參數(shù)。
actions
actions(可選，對象)
可以用來對已有的action進(jìn)行配置，也可以用來定義新的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對象中的單個(gè)action如charge對象可以包含options中的所有屬性，且有限即高于iotions對象
options
options(可選，對象)
resource方法執(zhí)行后返回一個(gè)包含了所有action方法名的對象。其包含自定義的action方法
resource請求數(shù)據(jù)
var resouce = this.$resource('/books/{id}'); // 查詢 // 第一個(gè)參數(shù)為params對象，優(yōu)先級高于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 () {// 請求成功回調(diào) }, function () {// 請求失敗回調(diào) });resource.delete({id: 1}).then(function () {// 請求成功回調(diào) }, function () {// 請求失敗回調(diào) });攔截器
可以全局進(jìn)行攔截器設(shè)置。
攔截器在發(fā)送請求前或響應(yīng)返回時(shí)做一些特殊的處理。
攔截器的注冊
Vue.http.interceptors.push({request: function ( request ) {// 更改請求類型為POSTrequest.method = 'POST';return request;},response: function ( response ) {// 修改返回?cái)?shù)據(jù)response.data = [{custom: 'custom'}];return response;} });工廠函數(shù)注冊
Vue.http.interceptors.push(function () {return {request: function ( request ) {return request;},response: function ( response ) {return response;}} });Vue.http.interceptors.push(function ( request, next ) {// 請求發(fā)送前的處理邏輯next(function () { // 請求發(fā)送后的處理邏輯// 更具請求的狀態(tài)， response參數(shù)會返回給 successCallback或errorCallbackreturn response});});
實(shí)現(xiàn)的功能：
AJAX請求的loading界面
請求失敗時(shí)的提示對話框
跨域AJAX
vue-resource中用到的CORS特性，和 XHMLHttpRequest2的替代品 XDomainRequest
XDomain只支持GET和POST兩種請求。如果要在vue-resource中使用其它方法請求，設(shè)置請求選項(xiàng)的emulateHTTP為true。
XHMLHttpRequest2 CORS
XHMLHttpRequest2提交AJAX請求還是和普通的XMLHttpRequset請求一樣，只是增加了一些新特性。
在提交AJAX跨域請求時(shí)，需要知道當(dāng)前瀏覽器是支持XHMLHttpRequest2， 判斷方法使用 in操作符檢測當(dāng)前 XMLHttpRequest實(shí)例對象是否包含 withCredentials屬性，如果包含則支持CORS
var xhrCors = 'withCredentials' in new XMLHttpRequest();在支持CORS的情況下，還需啊喲服務(wù)端啟用CORS支持。
例如：
需要從http://example.com:8080提交到http://example.com/8088，需要在http://example.com添加響應(yīng)頭
XDomainRequest
如果vue0resource不支持XMLHttpRequest2,則會降級使用用XDomainRequest
Promise
vue.resource基本HTTP調(diào)用和RESTful調(diào)用action方法執(zhí)行后都會返回一個(gè)Promise對象。
該P(yáng)romise對象提供了then，catch，finally。
url模板
vue-resource 使用url-template庫來解析url模板.
在vue-resourece方法請求傳參時(shí) 可以在url中放置花括號包圍的占位符。vue-resouce內(nèi)部會使用url0template將占位符用params對象中的屬性進(jìn)行替換。
question
如何發(fā)送JSONP請求
vue-resouce提供三種調(diào)用方式進(jìn)行跨域
全局方法
Vue.http({url: 'http://example.com/books',// 參數(shù)部分，將會拼接在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)情況下，對于PUT，PSOT，PATCH，DELETE等請求，請求頭中的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);}},// 配置請求頭headres: {'Content-Type': 'multipart/form-data'} ); // 實(shí)例配置的優(yōu)先級高于全局配置跨域請求出錯
跨域請求需要服務(wù)端開啟CORS支持
總結(jié)
以上是生活随笔為你收集整理的Vue_VueResource的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： devices-list
- 下一篇： WebStorm 2017.1增加对Vu