這兩天學(xué)習(xí)了vue-resource插件個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以，今天添加一點(diǎn)小筆記。

Vue可以構(gòu)建一個(gè)完全不依賴后端服務(wù)的應(yīng)用，同時(shí)也可以與服務(wù)端進(jìn)行數(shù)據(jù)交互來同步界面的動(dòng)態(tài)更新。

Vue通過插件的形式實(shí)現(xiàn)了基于AJAX，JSPNP等技術(shù)的服務(wù)端通信。

vue-resource是一個(gè)通過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ù)配置

分為：

1. 全局配置
2. 組件實(shí)例配置
3. 調(diào)用配置

這三部分的優(yōu)先級(jí)依次增高，游戲機(jī)高的配置會(huì)覆蓋優(yōu)先級(jí)低的配置。

全局配置

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請(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配置

通過headers屬性來配置請(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ā)人員共同約定的并非通過HTTP的請(qǐng)求方法如GET表示獲取數(shù)據(jù)，PUT代表寫入數(shù)據(jù)，POST表示更新數(shù)據(jù)。底層方法和便捷方法執(zhí)行后返回一個(gè)Promise對(duì)象，可以使用Promise語法來注冊(cè)成功，失敗回調(diào)。

底層方法

全局的Vue.http方法和Vue組件的實(shí)例方法this.$http都屬于底層方法，他們根據(jù)所傳入option慘啊書的method屬性來判斷請(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 提供的便捷方法：

1. get(url, [data], [options]);
2. post(url, [data], [options]);
3. put(url, [data], [options]);
4. patch(url, [data], [options]);
5. delete(url, [data], [options]);
6. jsonp(url, [data], [options]);

都是接受三個(gè)參數(shù)：

1. url（字符串），請(qǐng)求地址?？杀籵ptions對(duì)象中url屬性覆蓋。
2. data（可選，字符串或?qū)ο螅?，要發(fā)送的數(shù)據(jù)，可被options對(duì)象中的data屬性覆蓋。
3. 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ì)象的各屬性及含義

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)求體來傳送，對(duì)于GET，JSONP等方式的請(qǐng)求將會(huì)拼接在URL查詢參數(shù)中。

params

params(對(duì)象)

默認(rèn)值為：{}用來替換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表示沒有超時(shí)限制。超市后，將會(huì)取消當(dāng)前請(qǐng)求。
vue-resrouce內(nèi)部通過攔截器注入超時(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ù)器無法處理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ù)器無法處理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ù)器無法處理編碼為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，表示是否跨域，如果沒有設(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來請(qǐng)求。目前XDomainRequest 只有IE8，IE9 瀏覽器支持用來進(jìn)行AJAX跨域。

reqponse對(duì)象

response對(duì)象包含服務(wù)端的數(shù)據(jù)，以及HTTP響應(yīng)狀態(tài)，響應(yīng)頭等信心。

1. data （對(duì)象或字符串）： 服務(wù)端返回的數(shù)據(jù)，已使用 JSON.parse 解析。
2. ok（布爾值）：當(dāng)HTTP響應(yīng)狀態(tài)碼在200~299區(qū)間時(shí)該值為true，表示響應(yīng)成功。
3. status(數(shù)值)： HTTP響應(yīng)狀態(tài)碼。
4. statusText(字符串)： HTTP響應(yīng)狀態(tài)文本描述。
5. headers（函數(shù)）： 獲取HTTP響應(yīng)頭信息，不傳參表示獲取整個(gè)響應(yīng)頭，返回一個(gè)相應(yīng)頭對(duì)象。傳參表示獲取對(duì)應(yīng)的響應(yīng)頭信息。
6. request(對(duì)象)

RESTful調(diào)用

RESTful調(diào)用就是客戶端通過HTTP動(dòng)詞來表示增，刪，改，查實(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ì)象，可用來提供url中的占位符，多出來的屬性拼接url的查詢參數(shù)。

actions

actions(可選，對(duì)象)

可以用來對(duì)已有的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對(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) => {  // 通過控制 組件的`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庫來解析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í)有所幫助，也希望大家多多支持武林網(wǎng)。