vue_resource 使用說明

前幾天用vue-resource調用接口，用post方式給後端，發現後端php接受不到數據，這好奇怪，最後發現提交給後端的時候 須要加一個參數

就是：emulateJSON : true 這句話的意思是 將request body以application/x-www-form-urlencoded content type發送

上個小demo看下

       _this.$http.post('/apiwx2/xqsj.php',
                 {
                   'token' : _this.token, 'house' : _this.userName, }, {emulateJSON : true} ).then((response) => { let ret = (new Function("return " + response.data))(); if(ret.code == 1){ _this.showSuccess = true; }else if(ret.code == 3){ _this.showError = true; }else{ _this.tips(ret.msg); } }) .catch(function (response) { console.log(response) })

若是後端給你的數據 response.data 得不到 那就是後端給你的是字符串，須要你轉成json便可，轉的方式最好用原聲的寫

這樣便可 let ret = (new Function("return " + response.data))();

           console.log(ret.code)  //輸出 1 的成功碼

最後附上因此方法

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]);

都是接受三個參數：

• url（字符串），請求地址。可被options對象中url屬性覆蓋。

• data（可選，字符串或對象），要發送的數據，可被options對象中的data屬性覆蓋。

• options

請求選項對象

option對象的各屬性及含義

參數	類型	描述
url	string	請求的URL
method	string	請求的HTTP方法，例如：'GET', 'POST'或其餘HTTP方法
body	Object,FormDatastring	request body
params	Object	請求的URL參數對象
headers	Object	request header
timeout	number	單位爲毫秒的請求超時時間 (0 表示無超時時間)
before	function(request)	請求發送前的處理函數，相似於jQuery的beforeSend函數
progress	function(event)	ProgressEvent回調處理函數
credientials	boolean	表示跨域請求時是否須要使用憑證
emulateHTTP	boolean	發送PUT, PATCH, DELETE請求時以HTTP
emulateJSON	boolean	將request body以application/x-www-form-urlencoded content type發送

url

url（字符串）請求的URL地址

method

method(字符串)默認值爲GET，請求的HTTP方法(GET,POST等)

data

data(對象或字符串)
默認值爲:'',須要發送給服務端的數據。
data屬性的值對method爲POST，PUT，DElETE等請求會做爲請求體來傳送，對於GET，JSONP等方式的請求將會拼接在URL查詢參數中。

params

params(對象)
默認值爲：{}用來替換url中的模板變量，模板變量中爲匹配到的屬性添加在URL地址後邊做爲查詢參數。

Vue.http({ url: 'http://example.com/{book}', params: { book: 'vue', cat: 1 } });

最終url爲： http//example.com/vue?cat=1

headers

headers(對象)
默認值爲:{},設置HTTP請求頭

xhr

xhr（對象）默認值爲null，該對象中屬性都會應用到原生的xhr實例對象上。

upload

upload(對象)默認值爲null，該對象的屬性都會應用到原生的xhr實例對象的upload屬性上。

jsonp

jsonp(字符串)
默認值爲:callback，JSONP請求中回調函數的名字。

Vue.http({ url: 'http://example.com/book', method: 'JSONP', jsonp: 'cb' });

最終的URL地址爲http://example.com/book?cb=xxx
xxx 爲 vue-resource 生成的隨機串。

tiemout

timeout(數值)
默認爲：0，單位爲 ms。表示請求超時時間。0表示沒有超時限制。超市後，將會取消當前請求。
vue-resrouce內部經過攔截器注入超時取消邏輯。

if ( request.timeout ) { timeout = setTimeout(function () { reqest.cancel(); }, request.timeout); } // 超時後，Promise會被 reject，錯誤回調會被執行。

beforeSend

beforeSend（函數）默認值爲:null，該函數接受請求選項對象做爲參數。該函數在發送請求以前執行，vue-resource內部在攔截器最前端調用該方法。

emulateHTTP

emulateHTTP（布爾值）
默認值爲:false,當值爲true是，用HTTP的POST方式PUT，PATCH，DELETE等請求，並設置請求頭字段HTTP_Method_Override爲原始請求方法。

若是Web服務器沒法處理PUT, PATCH和DELETE這種REST風格的請求，你能夠啓用enulateHTTP現象。啓用該選項後，請求會以普通的POST方法發出，而且HTTP頭信息的X-HTTP-Method-Override屬性會設置爲實際的HTTP方法。

若是服務器沒法處理PUT，PATCH和DELETE的請求。能夠啓用enulateHTTP。
啓用以後，請求會以普通的POST方法發出，而且HTTP頭信息的X-HTTP-Method-Override屬性會設置爲實例的HTTP方法

Vue.http.options.emulateHTTP = true;

emulateJSON

emulateJSON(布爾值)
默認值爲：false,當值爲true而且data爲對象時，設置請求頭Content-Type的值爲application/x-www-form-urlencoded

若是服務器沒法處理編碼爲application/json的請求，能夠啓用emulateJSON選項。啓用以後，請求會以application/x-www-form-urlencoded爲MIME type，就像普通的HTML表單同樣。

Vue.http.options.emulateJSON = true;

crossOrigin

crossOrigin（布爾值）

默認值爲：null，表示是否跨域，若是沒有設置該屬性，vue-resource內部會判斷瀏覽器當前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時，則會使用XDomainRequest來請求。目前XDomainRequest 只有IE8，IE9 瀏覽器支持用來進行AJAX跨域。

reqponse對象

response對象包含服務端的數據，以及HTTP響應狀態，響應頭等信心。

• data （對象或字符串）： 服務端返回的數據，已使用 JSON.parse 解析。

• ok（布爾值）：當HTTP響應狀態碼在200~299區間時該值爲true，表示響應成功。

• status(數值)： HTTP響應狀態碼。

• statusText(字符串)： HTTP響應狀態文本描述。

• headers（函數）： 獲取HTTP響應頭信息，不傳參表示獲取整個響應頭，返回一個相應頭對象。傳參表示獲取對應的響應頭信息。

• request(對象)

RESTful調用

RESTful調用就是客戶端經過HTTP動詞來表示增，刪，改，查實現對服務端數據操做的一種架構模式。

vue-resource提供全局調用Vue.resource或者在組件實例上調用this.$rsource。

resource(url ,[params], [actions], [options]);

url

url（字符串）請求地址，能夠包含佔位符，會被parms對象中的同名屬性的值替換。

this.$resource('/books/{cat}', { cat: 1 }); // 解析的URL爲：/books/1

params

params(可選，對象)

參數對象，可用來提供url中的佔位符，多出來的屬性拼接url的查詢參數。

actions

actions(可選，對象)

能夠用來對已有的action進行配置，也能夠用來定義新的action。

默認的aciton配置爲：

Resource.actions = {
    get: {method: 'GET'}, save: {method: 'POST'}, query: {method: 'GET'}, update: {method: 'PUT'}, remove: {method: 'delete'}, delete: {method: 'DELETE'} }

修改默認值action配置

this.$resource( '/books/{cat}', { cat: 1 }, { charge: { method: 'POST', params: { charge: true } } });

actions對象中的單個action如charge對象能夠包含options中的全部屬性，且有限即高於iotions對象

options

options(可選，對象)

---

resource方法執行後返回一個包含了全部action方法名的對象。其包含自定義的action方法

resource請求數據

var resouce = this.$resource('/books/{id}'); // 查詢 // 第一個參數爲params對象，優先級高於resource發方法的params參數 resoure.get({id: 1}).then(function ( response ) { this.$set('item', response.item); }); // 保存 // 第二個參數爲要發送的數據 resource.seve({id: 1}, {item: this.item}).then(function () { // 請求成功回調 }, function () { // 請求失敗回調 }); resource.delete({id: 1}).then(function () { // 請求成功回調 }, function () { // 請求失敗回調 }); 

攔截器

能夠全局進行攔截器設置。攔截器在發送請求前或響應返回時作一些特殊的處理。

攔截器的註冊

Vue.http.interceptors.push({
    request: function ( request ) { // 更改請求類型爲POST request.method = 'POST'; return request; }, response: function ( response ) { // 修改返回數據 response.data = [{ custom: 'custom' }]; return response; } });

工廠函數註冊

Vue.http.interceptors.push(function () { return { request: function ( request ) { return request; }, response: function ( response ) { return response; } } });

---

Vue.http.interceptors.push(function ( request, next ) { // 請求發送前的處理邏輯 next(function () { // 請求發送後的處理邏輯 // 更具請求的狀態， response參數會返回給 successCallback或errorCallback return response }); });

實現的功能：

• AJAX請求的loading界面

Vue.http.interceptors.push((request, next) => { // 經過控制 組件的`v-show`值顯示loading組件 loading.show = true; next((response) => { loading.show = false return response }); });

• 請求失敗時的提示對話框

跨域AJAX

vue-resource中用到的CORS特性，和 XHMLHttpRequest2的替代品 XDomainRequest

XDomain只支持GET和POST兩種請求。若是要在vue-resource中使用其它方法請求，設置請求選項的emulateHTTP爲true。

XHMLHttpRequest2 CORS

XHMLHttpRequest2提交AJAX請求仍是和普通的XMLHttpRequset請求同樣，只是增長了一些新特性。

在提交AJAX跨域請求時，須要知道當前瀏覽器是支持XHMLHttpRequest2， 判斷方法使用 in操做符檢測當前 XMLHttpRequest實例對象是否包含 withCredentials屬性，若是包含則支持CORS

var xhrCors = 'withCredentials' in new XMLHttpRequest();

在支持CORS的狀況下，還需啊喲服務端啓用CORS支持。

例如：
須要從http://example.com:8080提交到http://example.com/8088，須要在http://example.com添加響應頭

Access-Control-Allow-Origin: *

XDomainRequest

若是vue0resource不支持XMLHttpRequest2,則會降級使用用XDomainRequest

Promise

vue.resource基本HTTP調用和RESTful調用action方法執行後都會返回一個Promise對象。該Promise對象提供了then，catch，finally。

var promise - this.$http.post( 'http://example.com/book/cretae', // 請求體中要發送給服務端數據 { cat: '1', name: 'newBook' }, { headers: { 'Content-Type': 'x-www-form-urlencoded' } } ); promise.then(function ( response ) { // 成功回調 }, function ( response ) { // 失敗回調 }); promise.catch(function ( response ) { // 失敗回調 }); promise.finally(function () { // 執行完成或者失敗回調後都會執行此邏輯。 }); // 全部回調函數的this都指向組件實例

url模板

vue-resource 使用url-template庫來解析url模板.

在vue-resourece方法請求傳參時 能夠在url中放置花括號包圍的佔位符。vue-resouce內部會使用url0template將佔位符用params對象中的屬性進行替換。

question

如何發送JSONP請求

vue-resouce提供三種調用方式進行跨域

全局方法

Vue.http({
    url: 'http://example.com/books', // 參數部分，將會拼接在url以後 params: { cat: 1 }, method: 'JSONP' }) .then(function ( response ){ }, function () { //error });

實例底層方法

http.$http({ url: 'http://example.com/books', params: { cat: 1 }, method: 'JSONP' }) .then(function () { // this 指向當前組件實例 }, function () { });

實例便捷方法

this.$http.jsonp( 'http://www.example.com/books', { cat: 1 } ) .then(function () { }, function () { });

修改數據類型

如何修改發送給服務端的數據類型

在默認狀況下，對於PUT，PSOT，PATCH，DELETE等請求，請求頭中的Content-Type爲appliaction/json即JSON類型。有時候須要將數據提交爲指定類型如application/x-www-form-urlencoded,multipart/form-data,txt/plain等。

全局headers配置

Vue.http.heaers.post['Content-Type'] = 'application/x-www-form-urlencoded' 

實例配置

 

this.$http.post( 'http://example.com/books', // 成功回調 function ( data, status, request ) { if ( status == 200 ) { consl.dir(data); } }, // 配置請求頭 headres: { 'Content-Type': 'multipart/form-data' } ); // 實例配置的優先級高於全局配置