vue-resource

  配置

  方法一：使用全局变量来设置配置信息

Vue.http.options.root='/root';

Vue.http.headers.common['Authorization'] ='BasicYXBpOnBhc3N3b3Jk';

  方法二：在vue组件里面设置配置信息

newVue({

  http: {

    root:'/root',

    headers: {

      Authorization:'Basic YXBpOnBhc3N3b3Jk'

    }

  }

 

})

http服务可以通过全局变量来调用：Vue.http，也可以在组件里面通过this指针来调用：this.$http，如下例所示：

// GET /someUrl

  this.$http.get('/someUrl').then(response=> {

    // success callback

  }, response=> {

    // error callback

  });

http提供了多种方法，各个方法可以在全局调用也可以在组件里面调用，各个方法的调用方式如下所示：

// global Vueobject

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

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

 

// in a Vueinstance

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);

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

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, ...)
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

响应对象的属性和提供的借口如下所表示:

Property	Type	Description
url	string	Response URL origin
body	Object, Blob, string	Response body data
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

  });

拦截器

拦截器可以在全局定义，在请求发送前或者发送中可以对请求进行相关操作

请求处理

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

  // 修改请求方法

  request.method='POST';

  // 修改请求头

  request.headers.set('X-CSRF-TOKEN', 'TOKEN');

  request.headers.set('Authorization', 'Bearer TOKEN');

  // 运行下一个拦截器

  next();

});

请求和响应处理

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

  // 修改请求方法

  request.method='POST';

  // 运行下一个拦截器

  next(function(response) {

    //修改相应的实体

    response.body='...';

  });

});

停止处理并返回响应

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

  // modify request ...

  // stop and return response

  next(request.respondWith(body, {

    status:404,

    statusText:'Not found'

  }));

});

Resource

Resource服务可以在全局使用：Vue.resource，也可以在组件里面调用：this.$resource，

方法调用格式如下：

• resource(url, [params], [actions], [options])

默认调用方法如下所示：

get: {method:'GET'},

save: {method:'POST'},

query: {method:'GET'},

update: {method:'PUT'},

remove: {method:'DELETE'},

delete: {method:'DELETE'}

例子如下所示：

var resource =this.$resource('someItem{/id}');

 

  // GET someItem/1

  resource.get({id:1}).then(response=> {

    this.item=response.body;

  });

 

  // POST someItem/1

  resource.save({id:1}, {item:this.item}).then(response=> {

    // success callback

  }, response=> {

    // error callback

  });

 

  // DELETE someItem/1

  resource.delete({id:1}).then(response=> {

    // success callback

  }, response=> {

    // error callback

  });

var customActions = {

    foo: {method:'GET', url:'someItem/foo{/id}'},

    bar: {method:'POST', url:'someItem/bar{/id}'}

  }

 

  var resource =this.$resource('someItem{/id}', {}, customActions);

 

  // GET someItem/foo/1

  resource.foo({id:1}).then(response=> {

    this.item=response.body;

  });

 

  // POST someItem/bar/1

  resource.bar({id:1}, {item:this.item}).then(response=> {

    // success callback

  }, response=> {

    // error callback

  });

相关API

Request

{

  // Constructor

  constructor(object:options)

  // Properties

  url (string)

  body (any)

  headers (Headers)

  method (string)

  params (object)

  timeout (number)

  credentials (boolean)

  emulateHTTP (boolean)

  emulateJSON (boolean)

  before (function(Request))

  progress (function(Event))

  // Methods

  getUrl() (string)

  getBody() (any)

  respondWith(any: body, object: options) (Response)

  abort()

}

Response

{

  // Constructor

  constructor(any:body, object: {string: url, object: headers, number: status, string: statusText})

  // Properties

  url (string)

  body (any)

  headers (Headers)

  ok (boolean)

  status (number)

  statusText (string)

  // Methods

  blob() (Promise)

  text() (Promise)

  json() (Promise)

}

Headers

{

  // Constructor

  constructor(object:headers)

  // Properties

  map (object)

  // Methods

  has(string: name) (boolean)

  get(string: name) (string)

  getAll() (string[])

  set(string: name, string: value) (void)

  append(string: name, string: value) (void)

  delete(string: name) (void)

  forEach(function: callback, any: thisArg) (void)

}