С каждым годом использование Promises при программировании на JavaScript вызывает все меньше удивления, фактически это стало стандартом. Давайте поговорим о новинках, которые желают снова "перетряхнуть" подход к написанию JS-кода: встречайте Generators и Async/Await! Презентация подготовлена по материалам выступления Алексея Бельского на витебской конференции “Developer's Software Conference” (12.11.2016).

1. Жизнь после Promises

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

3. Callback
‘95 ‘11 ‘15
Promise
(jQuery)
Generator
Async/Await
Эволюция взаимодействия с асинхронным кодом.
Том 1

4. Асинхронность в Javascript
Callback. Начало
10

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

7. “Пирамида зла”
getData(function(a){
getMoreData(a, function(b){
getMoreData(b, function(c){
getMoreData(c, function(d){
getMoreData(d, function(e){
...
});
});
});
});
});

8. Эра Promises11

9. “
Promise -это объект для
асинхронных манипуляций.
Представляет собой
асинхронную операцию, которая
еще не закончена, но это
предполагается в будущем.
Mozilla Developer Network
“

10. Так выглядит стандартная
цепочка “промисов”
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);

11. Promise изнутри
├[[PromiseStatus]]:"resolved"
├[[PromiseValue]]:"It’s OK!"
├__proto__:Promise
└─┐
├catch:catch()
├constructor:Promise()
└then:then()

12. Три группы Promise API
.then() / .catch()
Отвечают за цепочки Promise.
аргумент: Функция
.resolve() / .reject()
Решают, когда нужно запустить цепочки Promise
аргумент: что угодно
.race() / .all()
Предоставляют возможность работать с несколькими
асинхронными запросами одновременно
аргумент: массив из Promise

13. Проблема новичка
Где моё значение?

14. Ожидание - результат
function fetch(login, pass) {
// Выполняет асинхронный запрос с помощью Promises
return query();
}
var result = fetch();
// Ожидание: result === {data: [ … ]}
// Фактический результат: login === Promise
1

16. Не нравится? Есть варианты!
◉ Продолжать использовать Callbacks;
◉ Понять, как правильно пользоваться Promises;
◉ Воспользоваться Generators;
◉ Воспользоваться Async/Await.

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

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

19. 1. generator.next(); // продолжает Generator
2. generator.return(); // останавливает Generator
3. generator.throw(exception); // вызывает исключение
Всегда возвращают объект с двумя значениями:
{
done: [Boolean],
value: [Object]
}
Методы Generator:

20. var result = yield auth();
1. yield возвращает Promise;
2. (что-то в середине) отлавливает Promise;
3. (что-то в середине) вызывает метод .next со
значением, которое Promise получает;
4. переменная result записывается со значением из
Promise;

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

22. async(function* () {
var result = yield auth('login', 'password');
if (result.status === 'OK') {
success('login');
}
})
Как это работает

23. Не терпится
попробовать?
49
4
13
45
36
10

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

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

26. async function init() {
var info = await fetchSomething();
var result = await sendSomething(info);
return result;
}
Что вернет функция “init”?

27. async function init() {
var info = await fetchSomething();
var result = await sendSomething(info);
return result;
}
Что вернет функция “init”?
Promise!

28. ◉ Ваш код станет линейным;
◉ Синтаксис будет проще;
◉ Вы даже можете использовать try/catch чтобы отловить
ошибку;
… Однако асинхронные функции возвращают Promise, а не
фактическое значение, так что вам все равно нужно знать,
как работают Promises.
Итог

29. Когда я могу это
использовать?
55
7
42

30. Есть вопросы?
Меня можно найти в
◉ Twitter: @alxblsk
◉ Facebook: @alxblsk
Спасибо!