PROMISES IN JAVASCRIPT

WTF is Promise?

Promise - это отложенное получение результата, который гарантированно вернется в то место, где результат был запрошен.

Сейчас результат неизвестен
Гарантируется результат при любом исходе
Вычисления могут быть продолжены с того же места

WTF is ...?

Promise
Deferred
Future
Delay

Есть отложенные вычисления, результат которых неизвестен, было бы круто его узнать позже, и не плохо было бы еще и возвращаться туда, откуда начали.

WHY Promises?

Простота (только then)
Порядок при асинхронности вызовов
Гарантии результата и его неизменности (обычно)

Promises Are simple

"Then'able" code:

var promise = new Promise(function (resolve, reject) {
    setTimeout(function () { 
        resolve();
        console.log('Promise resolved');
    }, 5000);
});

var deferred = $.Deferred();
setTimeout(function () { 
    deferred.resolve();
    console.log('Deferred resolved');
}, 10000);

Promise.all([promise,deferred]).then(function () {
    console.log('All is done');
});

It works !

Callback HEll?

No promises:

 function getMyPhoto(tag, handlerCallback) {
    asyncGet('login_url', function () {
        asyncGet('photo_url', function() {
            asyncGet('photo_details', function(neededResult) {
                handlerCallback(neededResult);
            });
        });
    });
}

getMyPhoto('puppy', drawOnScreen);

With promises:

 login().then(getPhoto).then(getPhotoDetails).then(render);

Something will never change

var p = new Promise(function(resolve, reject) { 
    resolve(1);
    resolve(2);
});
Promise.all([p]).then(function (value) {
    console.log(value);
});

Ok, nice! And what is written in the specification?

Let's google!

PROMISES

SPECIFICATIONS

IN JAVASCRIPT

Specifications

DOM Promises
ECMAScript 6 Promises
Promises/A
Promises/A+
Promises/B
Promises/C
Promises/D
Promises/Kiss
jQuery Deferred
Other

DOM PROMISES

FileSystem API
Quota Management
Font Load Events
ServiceWorker
Web MIDI
WebCrypto

DOM Promises начали обсуждаться до ECMAScript 6 Promises, но обсуждались дольше чем комитет TC-39 предложил их и реализовал.

ECMASCRIPT PROMISES

Сейчас ECMAScript Promises является надмножеством DOM Promises.

Пример:

var p = new Promise(function (resolve, reject) {
    if (isSomeThingTrue){
        resolve(amResolvedValue);
    } else {
        reject(amRejectedValue);
    }
});

p.then(function (value) {
    console.log(value);
});

ECMASCRIPT PROMISES

Promise.prototype.then(fulfillCallback, rejectCallback)

Return a promise p such that:
        if fulfillCallback is undefined
                p will be fulfilled with o when this promise is fulfilled with o.
        if rejectCallback is undefined
                p will be rejected with o when this promise is rejected with o
        p will be fulfilled with fulfillCallback(o) when this promise is fulfilled with o.
        p will be fulfilled with rejectCallback(o) when this promise is rejected with o.
        p will be rejected with e if fulfillCallback or rejectCallback throws e.

ECMASCRIPT PROMISES

Promise.prototype.catch(rejectCallback)
Тоже самое что и Promise.prototype.then(undefined, rejectCallback)
Promise.resolve(value)
Возвращает Promise который успешно разрешен с указаным значением
Promise.reject(reason)
Возвращает Promise который неуспешно разрешен с указаным значением
Promise.all(iterable)
Promise.all принимает массив обещаний и возвращает одно обещание
Promise.race(iterable)
Promise.all принимает массив обещаний и возвращает одно обещание(со значением первого разрешенного)
Promise.cast(value)

ECMASCRIPT PROMISES

49.44%

Opera 19+
Firefox 27+
Chrome 32+
Safari 8

COMMONJS Promises/A

Спецификация Promises/A+ не учитывает то как создается, разрешается или разрешается с ошибкой Promise. Спецификация направлена только на then метод и than`able объекты.
Так же она описывает точно состояние promise и оно может меняться только раз.
Спецификация Promises/A+ уточняет те моменты, которые были пропущены в Promises/A, например:

promise2 === promise1
onFulfilled и onRejected выполняются асинхронно

Promises/A and Promises/A+

promisesaplus.com

COMMONJS Promises/B

В спецификации не описывается, что происходит внутри объекта Promise.
В спецификации не описывается, что может быть значением Promise.
В спецификации описывается метод when
В спецификации описывается метод defer
В спецификации описывается конструктор Promise
Данная спецификация является надмножеством Promises/A

COMMONJS Promises/B

Известные Promises/B применения: Q и whenthen.js

 return Q.fcall(function () {
    return [{ foo: "bar" }, { foo: "baz" }];
})
.get(0)
.get("foo");

По сути спецификация описывает цепочки методов, чтобы можно было получать свойства объекта как Promise и что-то делать дальше:

 makePromise(promise).get('lists').get('0').get('items').then(displayIt);

COMMONJS Promises/D

Определяет promiseSend метод, через который происходит общение внутри объекта
Уточняет другие методы Promises/B
Дополняет собой Promises/B

JQUERY.DEFERRED

Появились в 1.5
Помогли минимизировать код ajax
Не совместимы с Promises/A

 doFailingAsync().then(function() {
  // doFailingAsync doesn't succeed.
}, function(error) {
  // Try to handle the error.
  return "It's all good.";
}).then(function(result) {
  // Non-jQuery implementations will reach this with result === "It's all good.".
}, function(error) {
  // jQuery will reach this with error === "It's all good.".
});

JQUERY.DEFERRED

Then vs Done

promise.then(function (x) { // Suppose promise returns "abc"
    console.log(x);
    return 123;
}).then(function (x){
    console.log(x);
}).then(function (x){
    console.log(x)
});

Console:

abc
123
undefined

jquery deferred

Then vs Done:

 promise.done(function (x) { // Suppose promise returns "abc"
    console.log(x);
    return 123;
}).done(function (x){
    console.log(x);
}).done(function (x){
    console.log(x)
})

Console:

abc
abc
abc

jquery deferred

Если вы удалите элемент через remove(), а его data будет содержать $.Deferred, то он разрешится успешно
До версии 1.8 pipe возвращал promise, сейчас deferred

other

RSVP

var promise = new RSVP.Promise(function(resolve, reject) {
  // succeed
  resolve(value);
  // or reject
  reject(error);
});

promise.then(function(value) {
  // success
}, function(value) {
  // failure
});

var object = {};

RSVP.EventTarget.mixin(object);

object.on("finished", function(event) {
  // обрабатываем событие
});

object.trigger("finished", { detail: value });