flight-request

A Flight mixin for making XHR requests.

Installation

bower install --save flight-request

Example

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!');
				}
			});
		});
	}
});

Methods and Events

Methods

flight-request exposes the following methods:

this.get, this.post, this.put, this.destroy (you can also use this.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

callbacks context

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')
});

tunnelMethod - PUT and DELETE request tunnelling

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.

Events

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'
});