Современные возможности ES-2015 (Promise, Generators, Proxy) - Что такое Promise? - Промисификация - Цепочки промисов - Еще немного ES-2015: Proxy и Генераторы

1. Confidential. All rights reserved. Valtech Solutions, Inc.
Возможности ES-2015 (Promise, Генераторы)
v.0.1

2. Кулаков Алексей
2014 – Senior SFCC developer,
Valtech Ukraine
8+ years in Web development
SPEAKER INFO
Skype: alexeyvk9

3. 01. Зачем нам Promise
02. Что такое Promise
03. Промисификация
04. Цепочки Promise
05. Генераторы
06. Где работает
07. Спасибо

4. "callback hell"
The Pyramid of Doom
registerUser(function(user) {
sendActivationMail(function(user) {
addNewUser(function(user) {
notifyMarketingToStartTheSpam(function(user) {
showThankYouPage(user);
});
});
});
});

5. То же самое при помощи Promise
registerUser.
then(sendActivationEmail).
then(provisionToLegacySystem).
then(notifyMarketingToStartTheSpam).
then(showThankYouPage);
Фактически промисы позволяют нам писать асинхронный код - синхронно

6. Promise – это специальный объект, который
содержит своё состояние.
Вначале pending («ожидание»), затем – одно
из: fulfilled («выполнено успешно»)
или rejected («выполнено с ошибкой»).

7. Promise
(pending)
Promise
(fulfilled)
Promise
(rejected)
resolve()
reject()

8. Объект «обещание» создается с помощью
конструктора new Promise(...), которому в качестве
аргумента передается анонимная функция с двумя
параметрами: resolve, reject. Они, в свою очередь,
так же являются функциями.
resolve() — сообщает о том, что код выполнен
«успешно», reject() – код выполнен с «ошибкой»

9. Простой пример Promise. Промисификация

10. Синхронный throw – то же самое, что reject
Если в функции промиса происходит синхронный throw (или иная ошибка), то вызывается
reject:

11. Метод для навешивания обработчиков промисов
promise.then(onFulfilled, onRejected)
• onFulfilled – функция, которая будет вызвана с
результатом при resolve.
• onRejected – функция, которая будет вызвана с ошибкой
при reject.
Для обработчика ошибок, вместо .then(null, onRejected)
можно написать .catch(onRejected) – это то же самое.
9/18/2017 11

12. Использование then() и catch()

13. Цепочки промисов

14. Цепочки промисов

15. Initial
task
Success
task1
Success
task2
Failure
task
.then() .then()
.catch()
Цепочки промисов

16. Параллельное выполнение Promise.all
Promise.all(iterable) получает массив (или другой итерируемый объект) промисов и возвраща
ет промис, который ждёт, пока все переданные промисы завершатся,
и переходит в состояние «выполнено» с массивом их результатов.

17. Параллельное выполнение Promise.race
Promise.race(iterable) получает итерируемый объект с промисами, которые нужно
выполнить, и возвращает новый промис.
В отличие от Promise.all, результатом будет только первый успешно выполнившийся
промис из списка. Остальные игнорируются.

18. Генераторы – новый вид функций в
современном JavaScript. Они отличаются от
обычных тем, что могут приостанавливать
своё выполнение, возвращать промежуточный
результат и далее возобновлять его позже,
в произвольный момент времени.
9/18/2017 18

19. Совместимость
Все современные браузеры поддерживают использование
Promise.
IE11 :(
• ES5 + Bluebird
• Babel: ES6 => ES5

20. • Промис – это специальный объект, который хранит своё состояние,
текущий результат (если есть) и коллбэки.
• При создании new Promise(function (resolve, reject) {…})
автоматически запускается функция-аргумент, которая должна
вызвать resolve(result) при успешном выполнении и reject(error) –
при ошибке.
• Аргумент resolve/reject (только первый, остальные игнорируются)
передаётся обработчикам на этом промисе.
• Обработчики назначаются вызовом .then/.catch
• Для передачи результата от одного обработчика к другому
используется чейнинг.
Итоги

21. thank you