前幾天用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=xxxxxx 為 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/1params
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' } ); // 實例配置的優先級高於全局配置