vue-resource HTTP API基础

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

<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>

HTTP

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

Usage

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
  });
}

Methods

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])

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

Response

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

Example

{
  // 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

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'
  }));
});