Promises, an example of both Promise and jQuery's deferred

[guinness]

expandcollapse popup

(function promiseExample(window, $, output, Math, Promise, setTimeout) {
    var TIMEOUT = 2000;
    var promise = null;

    // Native

    // Only call the Promise example if promises are supported in the browser natively
    if (Promise !== undefined) {
        // Create a new native promise object
        promise = new Promise(function promise(resolve, reject) {
            example(resolve, reject, 'native');
        });

        // On success
        promise.then(function thenPromise(data) {
            output.log(data);
        });

        // On failure
        promise.catch(function catchPromise(data) {
            output.log(data);
        });
    }

    // jQuery

    // Only call the jQuery example if jQuery exists
    if ($ !== undefined) {
        // Create a jQuery deferred object
        var defer = $.Deferred(function deferred(defer) {
            example(defer.resolve, defer.reject, 'jQuery');
        });

        // Get the promise interface so as not to expose resolve and reject
        promise = defer.promise();

        // On success
        promise.then(function thenPromise(data) {
            output.log(data);
        });

        // On failure
        promise.fail(function failPromise(data) {
            output.log(data);
        });
    }

    /**
     * Resolve or reject a promise.
     *
     * @param {function} resolve Resolve function
     * @param {function} reject Reject function
     * @return {undefined}
     */
    function example(resolve, reject, type) {
        setTimeout(function setTimeout() {
            // Returns either zero or one
            if (getInt(0, 1000)) {
                resolve('The promise was resolved i.e. completed [' + type + ']');
            } else {
                reject('The promise was rejected i.e. failed [' + type + ']');
            }
        }, TIMEOUT);
    }

    /**
     * Generate a random number
     *
     * @param {number} min Minimum value
     * @param {number} max Maximum value
     * @return {number} Returns a random number between the minimum and maximum values
     */
    function getInt(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }
}(window, window.jQuery, window.console, window.Math, window.Promise, window.setTimeout));

Run the following example in the console of your browser or add as a script to a web page. Note, check http://caniuse.com/#feat=promises to see if your browser supports promises.

Edited April 10, 2016 by guinness

[guinness]

Updated example to adhere to the Airbnb styleguide

[guinness]

Create a deferred object just like jQuery, using a native ES2015 promise. Magic!

/**
 * Create a deferred
 *
 * @param {function|undefined} fn An optional function to call with deferred object
 * @return {object} An object with the property function 'promise, 'resolve' and 'reject'
 */
function deferred(fn) {
    var defer = {};

    var promise = new Promise(function promiseCreate(resolve, reject) {
        defer.resolve = resolve;
        defer.reject = reject;
    });

    defer.promise = function promiseDeferred() {
        return promise;
    };

    // Pass the deferred object to the callback function
    if (typeof fn === 'function' || Object.prototype.toString.call(fn) === '[Object Function]') {
        fn(defer);
    }

    return defer;
}