A Flight mixin for making XHR requests.
bower install --save flight-request
define(function (require) {
var defineComponent = require('flight/lib/component');
var withRequest = require('flight-request/lib/with_request');
return defineComponent(dataComponent, withRequest);
function dataComponent() {
this.after('initialize', function () {
this.get({
url: 'http://b.ar/gimme-beer',
success: function () {
console.log('Skål!');
}
});
});
}
});
flight-request exposes the following methods:
this.get
,this.post
,this.put
,this.destroy
(you can also usethis.delete
if you are in a ES5 env) - return a jqXHR object [*].this.abort
takes a jqXHR object as parameter and aborts the given request.this.abortAllRequests
- to abort all the open xhr requests.
[*] by default the requests can be aborted either with this.abort or this.abortAllRequest. If you want to prevent this to happen you can set noAbort
to true and pass it along with the ajax settings
From v1.0.0 the default callbacks context is the component one.
However you can change it by setting context
in the ajax settings or using bind.
// by default the callbacks context is the component one
this.get({
url: 'http://b.ar/gimme-beer',
success: function () {
// this === component
this.doSomething();
}
});
// the context can be changed with bind or by setting the context property
this.get({
url: 'http://b.ar/gimme-beer',
context: 'foo',
success: function () {
// this === 'foo'
},
error: function () {
// this === 'bar'
}.bind('bar')
});
HTML forms (up to HTML version 4 and XHTML 1) only support GET and POST as HTTP request methods. A workaround for this is to tunnel other methods (PUT and DELETE) through POST by using a hidden form field which is read by the server and the request dispatched accordingly.
http://stackoverflow.com/a/166501/931594
Method tunnelling is enabled by default for PUT and DELETE requests.
In those cases the request data object contains a _method
property with the original request type (verb).
From v1.0.0 it is possible to disable the tunnelling by setting tunnelMethod
to false
in the ajax settings.
It is also possible to change the tunnelling property name by setting tunnelMethod
to a string of your choice (one time change)
or via the component settings this.attr.tunnelMethod
.
You can specify custom events names (instead of functions) to be triggered on success
and/or error
.
Thanks to Angus Croll for the suggestion.
this.on('thereYouGo', function (event, responseData, textStatus, jqXHR) {
console.log('Skål!');
});
this.get({
url: 'http://b.ar/gimme-beer',
success: 'thereYouGo'
});
All the requests are automatically aborted when the window is unloading its content and resources (window.onunload); …
Development of this component requires Bower to be globally installed:
npm install -g bower
Then install the Node.js and client-side dependencies by running the following commands in the repo's root directory.
npm install & bower install
To continuously run the tests in Chrome during development, just run:
npm run watch-test
Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.