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' } ); // 实例配置的优先级高于全局配置
跨域请求出错
跨域请求需要服务端开启CORS支持