Жизнь после promises
•
0 likes•197 views
С каждым годом использование Promises при программировании на JavaScript вызывает все меньше удивления, фактически это стало стандартом. Давайте поговорим о новинках, которые желают снова "перетряхнуть" подход к написанию JS-кода: встречайте Generators и Async/Await! Презентация подготовлена по материалам выступления Алексея Бельского на витебской конференции “Developer's Software Conference” (12.11.2016).
![Promise изнутри
├[[PromiseStatus]]:"resolved"
├[[PromiseValue]]:"It’s OK!"
├__proto__:Promise
└─┐
├catch:catch()
├constructor:Promise()
└then:then()](https://image.slidesharecdn.com/3-promises-161113101607/85/promises-11-320.jpg)
![Ожидание - результат
function fetch(login, pass) {
// Выполняет асинхронный запрос с помощью Promises
return query();
}
var result = fetch();
// Ожидание: result === {data: [ … ]}
// Фактический результат: login === Promise
1](https://image.slidesharecdn.com/3-promises-161113101607/85/promises-14-320.jpg)
![1. generator.next(); // продолжает Generator
2. generator.return(); // останавливает Generator
3. generator.throw(exception); // вызывает исключение
Всегда возвращают объект с двумя значениями:
{
done: [Boolean],
value: [Object]
}
Методы Generator:](https://image.slidesharecdn.com/3-promises-161113101607/85/promises-19-320.jpg)
Жизнь после 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){ ... }); }); }); }); });
- 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);
- 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'); } }) Как это работает
- 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 Спасибо!