Vue-resource实现ajax请求和跨域请求--李帅醒博客

vue-resource是Vue提供的体格http请求插件，如同jQuery里的$.ajax，用来和后端交互数据的。

在使用时，首先需要安装vue-resource插件

1.在项目跟目录上安装：

npm install vue-resource

2.引入resource插件

import VueResource from 'vue-resource';Vue.use(VueResource)

3.发送请求：

    this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){            console.log(res)        })

ES6写法：

this.$http.get('url', [options]).then((res) => {
// 处理成功的结果
}, (res) => { // 处理失败的结果});

在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

then方法的回调函数也有两种写法，第一种是传统的函数写法，第二种是更为简洁的ES 6的Lambda写法：

POST请求：

this.$http.post("http://www.vrserver.applinzi.com/aixianfeng/apihome.php",{name:"abc"},{emulateJSON:true}).then(            function (res) {                // 处理成功的结果                alert(res.body);            },function (res) {            // 处理失败的结果            }        );

JSONP请求：

new Vue({ ready() {  this.$http.jsonp('/url', {name:"abc"}) .then(function (res){         console.log(res)     }, function (res) {         console.log(res)      });     } })

吐槽一下，现在应该没有用到JSON的了吧，有的话真呵呵呵了。

支持的HTTP方法

vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：

• get(url, [options])
• head(url, [options])
• delete(url, [options])
• jsonp(url, [options])
• post(url, [body], [options])
• put(url, [body], [options])
• patch(url, [body], [options])

除了jsonp以外，另外6种的API名称是标准的HTTP方法。当服务端使用REST API时，客户端的编码风格和服务端的编码风格近乎一致，这可以减少前端和后端开发人员的沟通成本。

客户端请求方法服务端处理方法this.$http.get(...)Getxxxthis.$http.post(...)Postxxxthis.$http.put(...)Putxxxthis.$http.delete(...)Deletexxx

options对象

发送请求时的options选项对象包含以下属性：

参数类型描述urlstring请求的URLmethodstring请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法bodyObject, FormDatastringrequest bodyparamsObject请求的URL参数对象headersObjectrequest headertimeoutnumber单位为毫秒的请求超时时间 (0 表示无超时时间)beforefunction(request)请求发送前的处理函数，类似于jQuery的beforeSend函数progressfunction(event)ProgressEvent回调处理函数credientialsboolean表示跨域请求时是否需要使用凭证emulateHTTPboolean发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-OverrideemulateJSONboolean将request body以application/x-www-form-urlencoded content type发送

emulateHTTP的作用

如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求，你可以启用enulateHTTP现象。启用该选项后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。

Vue.http.options.emulateHTTP = true;

emulateJSON的作用

如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。

Vue.http.options.emulateJSON = true;

response对象

response对象包含以下属性：

方法类型描述text()string以string形式返回response bodyjson()Object以JSON对象形式返回response bodyblob()Blob以二进制形式返回response body属性类型描述okboolean响应的HTTP状态码在200~299之间时，该属性为truestatusnumber响应的HTTP状态码statusTextstring响应的状态文本headersObject响应头

（我吃酸萝卜 新浪微博http://www.weibo.com/wcslb          ---李帅醒著）