配置
方法一:使用全局变量来设置配置信息
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)
}