Promise – это не больно

Promise —
это не
больно!
Михаил Давыдов, JavaScript-разработчик
2013 год, FrontTalks

View Slide

Асинхронность везде!

View Slide

Запросы к серверу
03

View Slide

© 2013 NAVTEQ Ошибка на карте? · Условия использования
Данные пользователя
04

View Slide

G A R M O S H K A
События интерфейса
05
∞

View Slide

Таймеры и анимация
06

View Slide

View Slide

Когда один callback —
всё здорово!

View Slide

l
o
g
i
n
(
'
u
s
e
r
:
p
a
s
s
@
s
e
r
v
e
r
'
, f
u
n
c
t
i
o
n (
e
r
r
, s
e
r
v
e
r
) {
i
f (
e
r
r
) r
e
t
u
r
n c
b
(
e
r
r
)
;
s
e
r
v
e
r
.
o
p
e
n
(
'
d
b
'
, f
u
n
c
t
i
o
n (
e
r
r
, d
b
) {
i
f (
e
r
r
) r
e
t
u
r
n c
b
(
e
r
r
)
;
d
b
.
q
u
e
r
y
(
q
u
e
r
y
, f
u
n
c
t
i
o
n (
e
r
r
, v
i
e
w
) {
}
)
;
}
)
;
}
)
;
Последовательные запросы
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
0
7
.
09

View Slide

v
a
r r
o
w
s = [
]
, t
o
t
a
l = v
i
e
w
.
l
e
n
g
t
h
;
f
u
n
c
t
i
o
n f
e
t
c
h
(
e
r
r
, r
o
w
) {
i
f (
e
r
r
) r
e
t
u
r
n c
b
(
e
r
r
)
;
i
f (
r
o
w
s
.
l
e
n
g
t
h =
=
= t
o
t
a
l
) c
b
(
n
u
l
l
, r
o
w
s
)
;
}
f
o
r (
v
a
r i = 0
; i < t
o
t
a
l
; i
+
+
) {
v
i
e
w
.
g
e
t
(
i
, f
e
t
c
h
)
;
}
Параллельные запросы
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
0
7
.
0
8
.
10

View Slide

Шум
l
o
g
i
n
(
'
u
s
e
r
:
p
a
s
s
@
s
e
r
v
e
r
'
, f
u
n
c
t
i
o
n (
e
r
r
, s
e
r
v
e
r
) {
i
f (
e
r
r
) r
e
t
u
r
n c
b
(
e
r
r
)
;
s
e
r
v
e
r
.
o
p
e
n
(
'
d
b
'
, f
u
n
c
t
i
o
n (
e
r
r
, d
b
) {
i
f (
e
r
r
) r
e
t
u
r
n c
b
(
e
r
r
)
;
d
b
.
q
u
e
r
y
(
q
u
e
r
y
, f
u
n
c
t
i
o
n (
e
r
r
, v
i
e
w
) {
}
)
;
}
)
;
}
)
;
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
0
7
.
11

View Slide

● Статус ошибки
● Однообразная обработка ошибки
● Глубина вложенности
Шум
12

View Slide

d
b
.
q
u
e
r
y
(
q
u
e
r
y
, f
u
n
c
t
i
o
n (
e
r
r
, v
i
e
w
) {
}
)
;
Как отменить или игнорировать запрос в этом случае?
d
b
.
q
u
e
r
y
(
q
u
e
r
y
, f
n
)
.
a
b
o
r
t
(
)
; /
/ .
c
a
n
c
e
l
(
) ?
d
b
.
q
u
e
r
y
(
q
u
e
r
y
, f
u
n
c
t
i
o
n (
e
r
r
) {
i
f (
e
r
r
.
m
e
s
s
a
g
e =
=
= '
a
b
o
r
t
'
) r
e
t
u
r
n
;
}
)
;
Сложно отменить действие
0
1
.
0
1
.
0
2
.
0
3
.
0
4
.
13

View Slide

q
u
e
r
y
(
q
u
e
r
y
1
, f
u
n
c
t
i
o
n (
e
r
r
, v
i
e
w
) {
}
)
;
q
u
e
r
y
(
q
u
e
r
y
2
, f
u
n
c
t
i
o
n (
e
r
r
, v
i
e
w
) {
}
)
;
q
u
e
r
y
(
q
u
e
r
y
3
, f
u
n
c
t
i
o
n (
e
r
r
, v
i
e
w
) {
}
)
;
3 запроса — 3 попытки логина. Для кэша нужно еще дописать код.
Несколько обработчиков
0
1
.
0
2
.
0
3
.
14

View Slide

f
u
n
c
t
i
o
n u
b
e
r
Q
u
e
r
y
G
e
n
e
r
a
t
o
r
(
d
a
t
a
) {
/
/ Г
о
т
о
в
и
м q
u
e
r
y
F
r
o
m
D
a
t
a
r
e
t
u
r
n q
u
e
r
y
(
q
u
e
r
y
F
r
o
m
D
a
t
a
)
;
}
f
u
n
c
t
i
o
n u
b
e
r
Q
u
e
r
y
G
e
n
e
r
a
t
o
r
(
d
a
t
a
, f
n
) {
q
u
e
r
y
(
q
u
e
r
y
F
r
o
m
D
a
t
a
, f
n
)
;
}
Делегирование результата
0
1
.
0
2
.
0
3
.
0
4
.
0
1
.
0
2
.
0
3
.
15

View Slide

У callback-ов нет
единого интерфейса

View Slide

● Последний аргумент
● Свойство конфига или метод
– success
– complete
– done
– finish
– ???
Нет единого интерфейса
17

View Slide

$
(
'
d
i
v
'
)
.
a
n
i
m
a
t
e
(
{
}
, f
u
n
c
t
i
o
n (
) {
}
)
;
/
/ А м
о
ж
н
о е
щ
е в
о
т т
а
к
$
(
'
d
i
v
'
)
.
a
n
i
m
a
t
e
(
{
}
, {
c
o
m
p
l
e
t
e
: f
u
n
c
t
i
o
n (
) {
}
}
)
;
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
18

View Slide

$
.
a
j
a
x
(
{
u
r
l
: u
r
l
s
u
c
c
e
s
s
: f
u
n
c
t
i
o
n (
) {
}
}
)
;
$
.
a
j
a
x
(
{
u
r
l
: u
r
l
}
)
.
d
o
n
e
(
f
u
n
c
t
i
o
n (
) {
}
)
;
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
0
7
.
19

View Slide

Магия

View Slide

● Step.js
● Streamline.js
● Fibers
● ???
Магия
21

View Slide

S
t
e
p
(
f
u
n
c
t
i
o
n l
o
g
i
n
(
) {
l
o
g
i
n
(
'
u
s
e
r
:
p
a
s
s
@
s
e
r
v
e
r
'
, t
h
i
s
)
;
}
, f
u
n
c
t
i
o
n o
p
e
n
D
a
t
a
b
a
s
e
(
e
r
r
, d
b
) {
i
f (
e
r
r
) t
h
r
o
w e
r
r
;
d
b
.
q
u
e
r
y
(
q
u
e
r
y
, t
h
i
s
)
;
}
)
;
Step.js
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
22

View Slide

v
a
r d
b = l
o
g
i
n
(
'
u
s
e
r
:
p
a
s
s
@
s
e
r
v
e
r
'
, _
)
;
d
b
.
q
u
e
r
y
(
q
u
e
r
y
, _
)
;
Вроде бы ничего!
Streamline.js
0
1
.
0
2
.
23

View Slide

Streamline.js
(
f
s
t
r
e
a
m
l
i
n
e
_
_
.
c
r
e
a
t
e
(
f
u
n
c
t
i
o
n
(
_
) {
v
a
r d
b = (
y
i
e
l
d f
s
t
r
e
a
m
l
i
n
e
_
_
.
i
n
v
o
k
e
(
n
u
l
l
, l
o
g
i
n
, [
'
u
s
e
r
:
p
a
s
s
@
s
e
r
v
e
r
'
, _
]
, 1
)
)
;
(
y
i
e
l
d f
s
t
r
e
a
m
l
i
n
e
_
_
.
i
n
v
o
k
e
(
d
b
, "
q
u
e
r
y
"
, [
q
u
e
r
y
, _
]
, 1
)
)
;
;
y
i
e
l
d
;
}
, 0
)
.
c
a
l
l
(
t
h
i
s
, f
u
n
c
t
i
o
n
(
e
r
r
) {
i
f (
e
r
r
) t
h
r
o
w e
r
r
;
}
)
)
;
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
0
7
.
24

View Slide

View Slide

● aka Futures
● Распостранен в других языках
● Стандартизирован Promise/A+
● Стандарт «Покрыт тестами» Promises/A+ Compliance Test Suite
● Готовые абстракции над fs, http, ...
Promise
26

View Slide

l
o
g
i
n
(
'
u
s
e
r
:
p
a
s
s
@
s
e
r
v
e
r
'
)
.
t
h
e
n
(
f
u
n
c
t
i
o
n (
s
e
r
v
e
r
) {
r
e
t
u
r
n s
e
r
v
e
r
.
o
p
e
n
(
'
d
b
'
)
;
}
)
.
t
h
e
n
(
f
u
n
c
t
i
o
n (
d
b
) {
r
e
t
u
r
n d
b
.
q
u
e
r
y
(
q
u
e
r
y
)
;
}
)
Promise
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
0
7
.
27

View Slide

.
t
h
e
n
(
f
u
n
c
t
i
o
n (
v
i
e
w
) {
r
e
t
u
r
n f
e
t
c
h
R
o
w
s
(
v
i
e
w
)
;
}
, f
u
n
c
t
i
o
n h
a
n
d
l
e
E
r
r
o
r
(
e
r
r
) {
c
o
n
s
o
l
e
.
e
r
r
o
r
(
e
r
r
)
;
}
) /
/ .
.
.
Меньше шума, обработка ошибок в одном месте
Promise
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
28

View Slide

● Обещание можно сдержать, а можно не выполнять
● Состояние изменяется только 1 раз
● Результат сохраняется
● Цепочка обещаний
● Можно пообещать нескольким
Абстракция над обещанными
данными
29

View Slide

v
a
r P
r
o
m
i
s
e = f
u
n
c
t
i
o
n (
) {
t
h
i
s
.
_
v
a
l
u
e = n
u
l
l
;
t
h
i
s
.
i
s
F
u
l
f
i
l
l
e
d = f
a
l
s
e
; /
/ o
k
t
h
i
s
.
i
s
R
e
j
e
c
t
e
d = f
a
l
s
e
; /
/ f
a
i
l
t
h
i
s
.
i
s
R
e
s
o
l
v
e
d = f
a
l
s
e
; /
/ o
k |
| f
a
i
l
/
/ .
.
.
}
;
Реализация Promise
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
0
7
.
30

View Slide

P
r
o
m
i
s
e
.
p
r
o
t
o
t
y
p
e = {
/
/ @
r
e
t
u
r
n {
P
r
o
m
i
s
e
}
t
h
e
n
: f
u
n
c
t
i
o
n (
o
n
F
u
l
f
i
l
l
e
d
, o
n
R
e
j
e
c
t
e
d
) {
}
,
f
u
l
f
i
l
l
: f
u
n
c
t
i
o
n (
d
a
t
a
) {
}
,
r
e
j
e
c
t
: f
u
n
c
t
i
o
n (
e
r
r
o
r
) {
}
}
;
Реализация Promise
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
31

View Slide

/
/ @
p
a
r
a
m {
N
u
m
b
e
r
} t
i
m
e
/
/ @
r
e
t
u
r
n {
P
r
o
m
i
s
e
}
f
u
n
c
t
i
o
n t
i
m
e
o
u
t
(
t
i
m
e
) {
v
a
r p
r
o
m
i
s
e = n
e
w P
r
o
m
i
s
e
(
)
;
s
e
t
T
i
m
e
o
u
t
(
p
r
o
m
i
s
e
.
f
u
l
f
i
l
l
, t
i
m
e
)
;
r
e
t
u
r
n p
r
o
m
i
s
e
;
}
Использование Promise
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
0
7
.
32

View Slide

t
i
m
e
o
u
t
(
1
0
0
0
)
.
t
h
e
n
(
f
u
n
c
t
i
o
n (
) {
c
o
n
s
o
l
e
.
l
o
g
(
'
f
i
r
s
t
'
)
;
r
e
t
u
r
n t
i
m
e
o
u
t
(
1
0
0
0
)
;
}
)
.
t
h
e
n
(
c
o
n
s
o
l
e
.
l
o
g
.
b
i
n
d
(
c
o
n
s
o
l
e
, '
s
e
c
o
n
d
!
'
)
)
;
Пример timeout
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
Run
33

View Slide

t
i
m
e
o
u
t
(
1
0
0
0
)
.
t
h
e
n
(
r
a
n
d
o
m
L
o
g
)
.
t
h
e
n
(
c
o
n
s
o
l
e
.
l
o
g
.
b
i
n
d
(
c
o
n
s
o
l
e
, '
d
o
n
e
!
'
)
)
;
f
u
n
c
t
i
o
n r
a
n
d
o
m
L
o
g
(
) {
v
a
r r
n
d = M
a
t
h
.
r
a
n
d
o
m
(
)
;
c
o
n
s
o
l
e
.
l
o
g
(
r
n
d
)
;
i
f (
r
n
d < 0
.
5
) r
e
t
u
r
n t
i
m
e
o
u
t
(
2
0
0
0
)
;
}
Пример timeout
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
0
7
.
0
8
.
Run
34

View Slide

● Не хак и не магия
● Единый интерфейс всех промисов
● Меньше шума в коде
● Разделение логики на шаги
● ...
● PROFIT!
Promise
35

View Slide

Трюки с Promise

View Slide

/
/ $
.
w
h
e
n - а
г
р
е
г
а
т
о
р P
r
o
m
i
s
e
/
/ Р
е
з
у
л
ь
т
а
т н
е р
а
н
ь
ш
е
, ч
е
м ч
е
р
е
з 1
с
$
.
w
h
e
n
(
$
.
g
e
t
(
'
/
'
)
, $
.
g
e
t
(
'
/
?
'
)
, t
i
m
e
o
u
t
(
1
0
0
0
)
)
.
t
h
e
n
(
f
u
n
c
t
i
o
n (
r
e
s
) {
c
o
n
s
o
l
e
.
l
o
g
(
r
e
s
[
0
]
.
l
e
n
g
t
h + r
e
s
[
1
]
.
l
e
n
g
t
h
)
;
}
)
;
Склеивание Promise
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
Run
37

View Slide

n
e
w A
t
t
e
m
p
t
(
g
e
t
4
0
4
, r
e
p
e
a
t
3
T
i
m
e
s
)
.
t
h
e
n
(
o
k
, e
p
i
c
F
a
i
l
, p
r
o
g
r
e
s
s
)
;
f
u
n
c
t
i
o
n g
e
t
4
0
4
(
) {
r
e
t
u
r
n $
.
g
e
t
(
'
/
4
0
4
'
)
;
}
f
u
n
c
t
i
o
n r
e
p
e
a
t
3
T
i
m
e
s
(
e
r
r
, n
u
m
) {
i
f (
n
u
m < 4
) r
e
t
u
r
n 1
0
0
0
;
}
Повтор Promise
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
0
7
.
0
8
.
Run
38

View Slide

v
a
r c
a
c
h
e
;
f
u
n
c
t
i
o
n r
e
q
u
e
s
t
(
) {
r
e
t
u
r
n c
a
c
h
e ? c
a
c
h
e : c
a
c
h
e = $
.
g
e
t
(
'
/
'
)
;
}
r
e
q
u
e
s
t
(
)
.
t
h
e
n
(
f
u
n
c
t
i
o
n (
h
t
m
l
) {
c
o
n
s
o
l
e
.
l
o
g
(
h
t
m
l
.
l
e
n
g
t
h
)
;
}
)
;
Прозрачный кэш с Promise
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
0
7
.
Run
39

View Slide

● Браузер
– $.Deferred
– $.when, $.ajax, $.get, $.post, ...
● Node.js
– Q: q-io
– Vow: vow-fs, vow-asker
● DOM Promises! WHATWG Promise Spec
Promise уже рядом!
40

View Slide

View Slide

● Решение проблем асинхронности будущего
● Оператор y
i
e
l
d «Ставит выполнение кода на паузу»
● Когда?
– Node.js 0.11.x c -
-
h
a
r
m
o
n
y
-
g
e
n
e
r
a
t
o
r
s
– Браузеры на V8 3.19 c -
-
h
a
r
m
o
n
y
-
g
e
n
e
r
a
t
o
r
s
– Firefox 2+ (старый синтаксис)
● Можно транслировать в ES5, но лучше это не делать...
Generators
42

View Slide

v
a
r c
o = r
e
q
u
i
r
e
(
'
c
o
'
)
;
c
o
(
f
u
n
c
t
i
o
n *
(
) {
v
a
r s
e
r
v
e
r = y
i
e
l
d l
o
g
i
n
(
'
u
s
e
r
:
p
a
s
s
@
s
e
r
v
e
r
'
)
,
d
b = y
i
e
l
d s
e
r
v
e
r
.
o
p
e
n
(
'
d
b
'
)
,
v
i
e
w = y
i
e
l
d d
b
.
q
u
e
r
y
(
q
u
e
r
y
)
;
}
)
;
Скоро на экранах ваших IDE
Generators
0
1
.
0
2
.
0
3
.
0
4
.
0
5
.
0
6
.
43

View Slide

yield vs then?

View Slide

● Именно «и», а не «VS»
● Используем вместе
– Библиотека Q
– Библиотека co
● С Generators код еще чище!
● Обработка ошибок с try/catch!
Generators и Promise
45

View Slide

● Готов к использованию сегодня!
● Единый интерфейс
● Стандарт Promise/A+
● Структурирует код
● Меньше шума в коде
● Куча библиотек: Vow, Q, jQuery
Используйте Promise!
46

View Slide

View Slide

Promise — это не больно!
Михаил Давыдов
JavaScript-разработчик
@azproduction
49

View Slide

● Примеры с презентации
● Promises/A+
● Differences from Promises/A
● Design of Q library (настоятельно рекомендую)
● Iterators & Generators
● A Study on Solving Callbacks with JavaScript Generators
● A Closer Look at Generators Without Promises
Почитать
50

View Slide

c
l
c
k
.
r
u
/
8
i
9
p
r

View Slide

Promise – это не больно

Promise – это не больно

Mikhail Davydov

More Decks by Mikhail Davydov

Other Decks in Programming

Featured

Transcript