HTTP

HTTP

The http service can be used globally Vue.http or in a Vue instance this.$http. 你可以使用全局对象方式Vue.http或者在一个Vue实例的内部使用this.$http来发起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. 一个Vue实例内部提供的this.$http服务可以发送HTTP请求。一个请求方法的回调请参考 Promise它可以解决这些响应。当然Vue实例将自动绑定到this在所有的函数回调中。

{
  // 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. 我们为所有的请求类型提供了一套简便的方法。 这些方法可以在全局或一个Vue实例中工作。

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

选项

Response

响应

A request resolves to a response object with the following properties and methods: 通过如下属性和方法处理一个请求获取到的响应对象：

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');
    // set data on vm
    this.$set('someData', response.body);
  }, (response) => {
    // error callback
  });
}

Fetch an image and use the blob() method to extract the image body content from the response. 使用blob()方法从响应中获取一副图像的内容。

{
  // 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. 全局定义拦截器后，它可用于前置和后置处理请求。

Request processing

请求处理

Vue.http.interceptors.push((request, next) => {
  // modify request
  request.method = 'POST';
  // continue to next interceptor
  next();
});

Request and Response processing

请求与响应处理

Vue.http.interceptors.push((request, next)  => {
  // modify request
  request.method = 'POST';
  // continue to next interceptor
  next((response) => {
    // modify response
    response.body = '...';
  });
});

Return a Response and stop processing

返回一个响应并且停止处理

Vue.http.interceptors.push((request, next) => {
  // modify request ...
  // stop and return response
  next(request.respondWith(body, {
    status: 404,
    statusText: 'Not found'
  }));
});