HTTP

你可以使用全局对象方式Vue.http或者在一个Vue实例的内部使用this.$http来发起HTTP请求。

语法

一个Vue实例内部提供的this.$http服务可以发送HTTP请求。一个请求方法的回调请参考 Promise它可以解决这些响应。当然Vue实例将自动绑定到this在所有的函数回调中。

  1. {
  2.   // GET /someUrl
  3.   this.$http.get('/someUrl').then((response) => {
  4.     // success callback
  5.   }, (response) => {
  6.     // error callback
  7.   });
  8. }

方法

我们为所有的请求类型提供了一套简便的方法。 这些方法可以在全局或一个Vue实例中工作。

  1. // global Vue object
  2. Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
  3. Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
  5. // in a Vue instance
  6. this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
  7. this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

简便方法的列表:

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

选项

参数 类型 描述
url string 请求的目标URL
body Object, FormData, string 作为请求体发送的数据
headers Object 作为请求头部发送的头部对象
params Object 作为URL参数的参数对象
method string HTTP方法 (例如GET，POST，…)
timeout number 请求超时（单位：毫秒） (0表示永不超时)
before function(request) 在请求发送之前修改请求的回调函数
progress function(event) 用于处理上传进度的回调函数 ProgressEvent
credentials boolean 是否需要出示用于跨站点请求的凭据
emulateHTTP boolean 是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT，PATCH和DELETE请求。
emulateJSON boolean 设置请求体的类型为application/x-www-form-urlencoded

响应

通过如下属性和方法处理一个请求获取到的响应对象：

属性 类型 描述
url string 响应的URL源
body Object, Blob, string 响应体数据
headers Header 请求头部对象
ok boolean 当HTTP响应码为200到299之间的数值时该值为true
status number HTTP响应吗
statusText string HTTP响应状态
方法 类型 描述
text() 约定值 以字符串方式返回响应体
json() 约定值 以格式化后的json对象方式返回响应体
blob() 约定值 以二进制Blob对象方式返回响应体

例子

  1. {
  2.   // POST /someUrl
  3.   this.$http.post('/someUrl', {foo: 'bar'}).then((response) => {
  5.     // get status
  6.     response.status;
  8.     // get status text
  9.     response.statusText;
  11.     // get 'Expires' header
  12.     response.headers.get('Expires');
  14.     // set data on vm
  15.     this.$set('someData', response.body);
  17.   }, (response) => {
  18.     // error callback
  19.   });
  20. }

使用blob()方法从响应中获取一副图像的内容。

  1. {
  2.   // GET /image.jpg
  3.   this.$http.get('/image.jpg').then((response) => {
  5.     // resolve to Blob
  6.     return response.blob();
  8.   }).then(blob) => {
  9.     // use image Blob
  10.   });
  11. }

拦截器

全局定义拦截器后，它可用于前置和后置处理请求。

请求处理

  1. Vue.http.interceptors.push((request, next) => {
  3.   // modify request
  4.   request.method = 'POST';
  6.   // continue to next interceptor
  7.   next();
  8. });

请求与响应处理

  1. Vue.http.interceptors.push((request, next)  => {
  3.   // modify request
  4.   request.method = 'POST';
  6.   // continue to next interceptor
  7.   next((response) => {
  9.     // modify response
  10.     response.body = '...';
  12.   });
  13. });

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

  1. Vue.http.interceptors.push((request, next) => {
  3.   // modify request ...
  5.   // stop and return response
  6.   next(request.respondWith(body, {
  7.     status: 404,
  8.     statusText: 'Not found'
  9.   }));
  10. });