1.基本用法
{
// GET /someUrl
this.$http.get('/someUrl').then((response) => {
// success callback
}, (response) => {
// error callback
});
}
2.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])
// 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);
Paste_Image.png
Paste_Image.png
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.
{
// GET /image.jpg
this.$http.get('/image.jpg').then((response) => {
// resolve to Blob
return response.blob();
}).then(blob) => {
// use image Blob
});
}
3.Interceptors
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'
}));
});
4.Resource
Vue.resource 或者在组件中用 this.$resource
Methods
resource(url, [params], [actions], [options])
Default Actions
get: {method: 'GET'},
save: {method: 'POST'},
query: {method: 'GET'},
update: {method: 'PUT'},
remove: {method: 'DELETE'},
delete: {method: 'DELETE'}
Example
{
var resource = this.$resource('someItem{/id}');
// GET someItem/1
resource.get({id: 1}).then((response) => {
this.$set('item', response.json())
});
// 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
});
}
Custom Actions
{
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.$set('item', response.json())
});
// POST someItem/bar/1
resource.bar({id: 1}, {item: this.item}).then((response) => {
// success callback
}, (response) => {
// error callback
});
}
5.小技巧
Forms
Sending forms usingFormData.
{
var formData = new FormData();
// append string
formData.append('foo', 'bar');
// append Blob/File object
formData.append('pic', fileInput, 'mypic.jpg');
// POST /someUrl
this.$http.post('/someUrl', formData).then((response) => {
// success callback
}, (response) => {
// error callback
});
}
Abort a request
Abort a previous request when a new request is about to be sent. For example when typing in a autocomplete input.
{
// GET /someUrl
this.$http.get('/someUrl', {
// use before callback
before(request) {
// abort previous request, if exists
if (this.previousRequest) {
this.previousRequest.abort();
}
// set previous request on Vue instance
this.previousRequest = request;
}
}).then((response) => {
// success callback
}, (response) => {
// error callback
});
}
API Reference
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)
}
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)
}