vue-resource特点

vue-resource插件具有以下特点：

1. 体积小

vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。

2. 支持主流的浏览器

和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。

3. 支持Promise API和URI Templates

Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。

URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。

4. 支持拦截器

拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。

拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。

vue-resource使用

引入vue-resource

HTTP

The http service can be used globally Vue.http or in a Vue instance
this.$http.

A Vue instance provides the this.$http service which can send HTTP requests. A request method call returns a
Promise that resolves to the response. Also the Vue instance will be automatically bound to
this in all function callbacks.

{
// GET /someUrl
this.$http.get('/someUrl').then(response => {
// success callback
}, response => {
// error callback
});
}

Shortcut methods are available for all request types. These methods work globally or in a Vue instance.

// global Vue object
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// in a Vue instance
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

List of shortcut methods:

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

Parameter

Type

Description

url

string

URL to which the request is sent

body

Object, FormData, string

Data to be sent as the request body

headers

Object

Headers object to be sent as HTTP request headers

params

Object

Parameters object to be sent as URL parameters

method

string

HTTP method (e.g. GET, POST, …)

responseType

string

Type of the response body (e.g. text, blob, json, …)

timeout

number

Request timeout in milliseconds (0 means no timeout)

before

function(request)

Callback function to modify the request options before it is sent

progress

function(event)

Callback function to handle the ProgressEvent of uploads

credentials

boolean

Indicates whether or not cross-site Access-Control requests should be made using credentials

emulateHTTP

boolean

Send PUT, PATCH and DELETE requests with a HTTP POST and set the X-HTTP-Method-Override header

emulateJSON

boolean

Send request body as application/x-www-form-urlencoded content type

A request resolves to a response object with the following properties and methods:

Property

Type

Description

url

string

Response URL origin

body

Object, Blob, string

Response body

headers

Header

Response Headers object

ok

boolean

HTTP status code between 200 and 299

status

number

HTTP status code of the response

statusText

string

HTTP status text of the response

Method

Type

Description

text()

Promise

Resolves the body as string

json()

Promise

Resolves the body as parsed JSON object

blob()

Promise

Resolves the body as Blob object

{
// POST /someUrl
this.$http.post('/someUrl', {foo: 'bar'}).then(response => {

// get status  
response.status;

// get status text  
response.statusText;

// get 'Expires' header  
response.headers.get('Expires');

// get body data  
this.someData = response.body;

}, response => {
// error callback
});
}

Fetch an image and use the blob() method to extract the image body content from the response.

{
// GET /image.jpg
this.$http.get('/image.jpg').then(response => {

// resolve to Blob  
return response.blob();

}).then(blob => {
// use image Blob
});
}

Interceptors can be defined globally and are used for pre- and postprocessing of a request. If a request is send using
this.$http or this.$resource the current Vue instance is available as
this in a interceptor callback.

Request processing

Vue.http.interceptors.push(function(request, next) {

// modify method
request.method = 'POST';

// modify headers
request.headers.set('X-CSRF-TOKEN', 'TOKEN');
request.headers.set('Authorization', 'Bearer TOKEN');

// continue to next interceptor
next();
});

Request and Response processing

Vue.http.interceptors.push(function(request, next) {

// modify request
request.method = 'POST';

// continue to next interceptor
next(function(response) {

// modify response  
response.body = '...';

});
});

Return a Response and stop processing

Vue.http.interceptors.push(function(request, next) {

// modify request …

// stop and return response
next(request.respondWith(body, {
status: 404,
statusText: 'Not found'
}));
});