Promises provide a way to manage asynchronous callbacks.

A promise represents a future value,
such as the eventual result of an asynchronous operation.

Why should you use them?

• to improve functional composition
• for better error handling with async operations

At it's core, a Promise is an object with a .then() method

the .then() method registers callbacks that handle the eventual value, or the failure to retrieve that value.

Promise { then: function, catch: function }

Promises are similar to event listeners, except:

• A promise can only succeed or fail once. It cannot succeed or fail twice, neither can it switch from success to failure or vice versa.
• Event listeners must be subscribed to before the event is fired.
• If a promise has succeeded or failed and you later add a success/failure callback, the correct callback will be called, even though the promise was returned earlier.

Promises will be native to JavaScript
in ES6

The spec is still evolving, and there are several different proposals:

However Promises/A+ is now the most widely accepted.

• Expands upon Promises/A
• Several promise libraries conform to this spec:
  • Q
  • when
  • rsvp.js

Browser support

32 + Chrome for Android	30 25 as Promise (partial, behind flag*) 24 as Future	Not yet supported	19	Not yet supported

Polyfill: https://github.com/jakearchibald/es6-promise

Usage

var p = new Promise(function(resolve, reject) {
    resolve('success!');
});

p.then(function(val) {
   console.log(val); // logs "success!"
});

Remember, the point of promises is to give us functional composition and error bubbling in the async world. They do this by saying that your functions should return a promise, which can do one of two things:

• Become fulfilled by a value
• Become rejected with an exception

Let's simulate some async code using setTimeout

var existingUsers = ['arnold'];

function createUser(user) {
    var userFound = existingUsers.indexOf(user) !== -1;

    return new Promise(function(resolve, reject) {
        if (userFound) {
            reject(
                user + ' is taken. Please choose another name.'
            );
        } else {
            existingUsers.push(user);
            setTimeout(resolve, 1000,
                'User ' + user + ' successfully created');
        }
    });
}

Promise.all

Promise.all(
    [createUser('hulk'), createUser('chuck'), createUser('mr_t')]
).then(function(val) {
    // returns an array of each resolved value
    console.log(val);
}).catch(function(error) {
    // returns the first error encountered
    console.log(error);
});


/*

Logs: ["User hulk successfully created", "User chuck successfully created", "User mr_t successfully created"]

Waits for all of the Promises in the array to return a value before moving on

*/

Promise.race

Promise.race(
    [createUser('hulk'), createUser('chuck'), createUser('mr_t')]
).then(function(val) {
    console.log(val);
}).catch(function(error) {
    console.log(error);
});


/*

Logs: "User hulk successfully created"

All of the Promises in the array get called, but only the first value returned gets passed to .then() or .catch()

*/

Error handling

createUser('hulk')
    .then(function(){
        return createUser('arnold');
    }).then(
        function(){
            return createUser('chuck');
        },
        function(err) {
            // log this error and continue down the chain
            console.log('Silent error:', err);
            return 'fixed';
        }
    )
    .then(function(){
        return createUser('mr_t');
    }).then(function(val){
        console.log('all done.', val)
    }).catch(function(error){
        console.log(error);
    });


/*

Logs:
"Silent error: arnold is taken. Please choose another name."
"all done. User mr_t successfully created"

user 'chuck' does not get created
.catch() is never called

*/

What about jQuery?

jQuery has a $.Deferred object, which is really just a handler for a Promise object.

It allows you to access some of the benefits of Promises and provides a variety of custom methods for handling resolved or rejected values.

jQuery $.Deferred()

Methods

• .promise()
• .when()
• .then()
• .done()
• .always()
• .fail()

Here's our previous function rewritten using $.Deferred()

function createUser(user) {
    var userFound = existingUsers.indexOf(user) !== -1,
        $dfd = $.Deferred();

    if (userFound) {
        $dfd.reject(
            user + ' is taken. Please choose another name.'
        );
    } else {
        existingUsers.push(user);
        setTimeout($dfd.resolve, 1000,
            'User ' + user + ' successfully created');
    }
    return $dfd.promise();
}

How to fix jQuery's error handling problem

If your code throws an Error object anywhere, you're out of luck.

However it is possible to fix the rejection handler issue.

You can use another Promise library (such as Q) and wrap the function so that it returns a true promise:

var promise = Q.when($.get("https://github.com/kriskowal/q"));

Or, you can explicitly return a new $.Deferred() each time.

Performance

Callbacks are inherently faster than Promises, however in most use cases the difference will be neglible.

If you need to perform hundreds of operations per second, then you may want to consider your options.

Promise library performance:

via: http://complexitymaze.com/2014/03/03/javascript-promises-a-comparison-of-libraries/
and jsPerf

ES6 introduces two more new features:

Generators

Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.

The yield operator

yield suspends operation of the current function

function* addOne() {
    var i = 0;
    while(true) {
        yield i++;
    }
};

var gen = addOne();

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

Generators + Promises = task.js

"task.js is an experimental library for ES6 that makes sequential, blocking I/O simple and beautiful, using the power of JavaScript's new yield operator."

spawn(function*() {
    var data = yield $.ajax(url);
    $('#result').html(data);
    var status = $('#status').html('Download complete.');
    yield status.fadeIn().promise();
    yield sleep(2000);
    status.fadeOut();
});

task.js works with any framework or library that uses the Promises/A spec.

Resources:

http://promisesaplus.com/

http://www.html5rocks.com/en/tutorials/es6/promises/

http://domenic.me/2012/10/14/youre-missing-the-point-of-promises/

http://complexitymaze.com/2014/03/03/javascript-promises-a-comparison-of-libraries/

http://thanpol.as/javascript/promises-a-performance-hits-you-should-be-aware-of/