Жизнь после Promises

Алексей БельскийВедущий разработчик, в <EPAM> с 2011

Обо мне

Callback

‘95 ‘11 ‘15

Promise(jQuery)

GeneratorAsync/Await

Эволюция взаимодействия с асинхронным кодом. Том 1

Асинхронность в JavascriptCallback. Начало

10

setTimeout(callback, 1000)Самый простой пример использования функции обратного вызова

“Пирамида зла”

getData(function(a){

getMoreData(a, function(b){

getMoreData(b, function(c){

getMoreData(c, function(d){

getMoreData(d, function(e){

...

});

});

});

});

});

Эра Promises11

“

Promise -это объект для асинхронных манипуляций.

Представляет собой асинхронную операцию, которая еще не закончена, но это предполагается в будущем.

Mozilla Developer Network“

Так выглядит стандартная цепочка “промисов”

var req = new Promise(function(resolve, reject) { setTimeout(function() { if ( … ) { resolve({status: 'OK'}); } else { reject({status: 'Not OK :('}); } }, 1000);}).then(fetchSomething).then(sendSomething).catch(handleError).then(finalize);

Promise изнутри

├[[PromiseStatus]]:"resolved"├[[PromiseValue]]:"It’s OK!"├__proto__:Promise└─┐ ├catch:catch() ├constructor:Promise() └then:then()

Три группы Promise API

.then() / .catch()Отвечают за цепочки Promise.

аргумент: Функция

.resolve() / .reject()Решают, когда нужно запустить цепочки Promise

аргумент: что угодно

.race() / .all()

Предоставляют возможность работать с несколькими асинхронными запросами одновременно

аргумент: массив из Promise

Проблема новичка

Где моё значение?

Ожидание - результат

function fetch(login, pass) {

// Выполняет асинхронный запрос с помощью Promises return query();

}

var result = fetch();

// Ожидание: result === {data: [ … ]}// Фактический результат: login === Promise

1

Не нравится? Есть варианты!

◉ Продолжать использовать Callbacks;

◉ Понять, как правильно пользоваться Promises;

◉ Воспользоваться Generators;

◉ Воспользоваться Async/Await.

GeneratorsВ поисках идеального синтаксиса

12

function*Перемен требуют наши сердца. Определение Generator.

1. generator.next(); // продолжает Generator2. generator.return(); // останавливает Generator3. generator.throw(exception); // вызывает исключение

Всегда возвращают объект с двумя значениями:

{ done: [Boolean], value: [Object] }

Методы Generator:

var result = yield auth();

1. yield возвращает Promise;2. (что-то в середине) отлавливает Promise;3. (что-то в середине) вызывает метод .next со

значением, которое Promise получает;4. переменная result записывается со значением из

Promise;

Поставь код на паузу

Каждый раз, когда вы захотите остановить выполнение кода в определенной точке - просто вызовите yield. Это мощный механизм для разделения логики на шаги.

Generator может быть асинхроннымНужно сделать асинхронный запрос? Прекрасно! С помощью небольшой надстройки реально использовать Generator таким образом, что значение будет возвращено, как только запрос будет закончен.

Важные моменты

async(function* () {

var result = yield auth('login', 'password');

if (result.status === 'OK') {

success('login');

}

})

Как это работает

Не терпитсяпопробовать?

49

4

13

45

36

10

Async/Await“Dreamed of para-para-paradise?” © Coldplay

13

ключевое слово async

Определение асинхронной функции, что возвращает Promise. Внутри этой функции, возможно подключить другие асинхронные операции используя await.

ключевое слово await

Может быть использовано только внутри асинхронных функций. Работают подобно генераторам, придерживая выполнение в контексте пока Promise работает. Если ожидаемое выражение не Promise, оно будет в него превращено.

Синтаксис

async function init() {

var info = await fetchSomething();

var result = await sendSomething(info);

return result;

}

Что вернет функция “init”?

async function init() {

var info = await fetchSomething();

var result = await sendSomething(info);

return result;

}

Что вернет функция “init”?

Promise!

◉ Ваш код станет линейным;◉ Синтаксис будет проще;◉ Вы даже можете использовать try/catch чтобы отловить

ошибку;

… Однако асинхронные функции возвращают Promise, а не фактическое значение, так что вам все равно нужно знать, как работают Promises.

Итог

Когда я могу это использовать?

55 742

Есть вопросы?

Меня можно найти в

◉ Twitter: @alxblsk◉ Facebook: @alxblsk

Спасибо!