标签：cors 选项 post方法 htm 数据操作 example return dem method
前几天用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跨域。
response对象包含服务端的数据，以及HTTP响应状态，响应头等信心。
data （对象或字符串）： 服务端返回的数据，已使用 JSON.parse 解析。
ok（布尔值）：当HTTP响应状态码在200~299区间时该值为true，表示响应成功。
status(数值)： HTTP响应状态码。
statusText(字符串)： HTTP响应状态文本描述。
headers（函数）： 获取HTTP响应头信息，不传参表示获取整个响应头，返回一个相应头对象。传参表示获取对应的响应头信息。
request(对象)
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
});
});请求失败时的提示对话框
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
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都指向组件实例vue-resource 使用url-template库来解析url模板.
在vue-resourece方法请求传参时 可以在url中放置花括号包围的占位符。vue-resouce内部会使用url0template将占位符用params对象中的属性进行替换。
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‘
}
);
// 实例配置的优先级高于全局配置vue-resource获取不了数据，和ajax的区别，及vue-resource用法
标签：cors 选项 post方法 htm 数据操作 example return dem method
原文地址：http://www.cnblogs.com/sichaoyun/p/6647602.html
