Михаил Давыдов: JavaScript. Асинхронность

Михаил Давыдов Разработчик JavaScript

JavaScript Асинхронность

3

Задача

• Качаем 1 файл • После отправляем данные на 2 сервера • Синхронизируемся

4

Сделаем обертку над XMLHttpRequest

function syncXHR(method, url, data) { var xhr = new XMLHttpRequest(); xhr.open(method, url, false); xhr.send(data); return xhr.responseText; }

Синхронный код

var data = syncXHR('GET', 'http://host1/page.json'); data = processData(data); syncXHR('POST', 'http://host2/result/', data); syncXHR('POST', 'http://host3/result/', data); alert('Done!');

5

Схема загрузки

время

Блокировка Блокировка Блокировка

Запрос Запрос Запрос

Подготовка Обработка Отправка Алерт

6

Сделаем обертку над XMLHttpRequest

Асинхронный код

function asyncXHR(method, url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { callback(null, xhr.responseText); } else { callback(‘error’); } } } xhr.send(data); }

7

Сам код. Изменилось все.

Асинхронный код

asyncXHR ('GET', ‘http://host1/page.json’, null, function (err, data) { data = processData(data); var counter = 2; function done(err, data) { counter--; if (!counter) alert(‘Done!’); } asyncXHR(‘POST’, ‘http://host2/result/’, data, done); asyncXHR(‘POST’, ‘http://host3/result/’, data, done); });

8

Схема загрузки

время

Ожидание Ожидание

Запрос

Подготовка Обработка Отправка Алерт

9

Где применяется "асинхронность"

• Производительность • Интерфейс пользователя • Проблемы

–  Много лишнего шума –  Проблема синхронизации –  Куча вложенных колбэков: Pyramid of Doom

• Несколько реализаций –  Event Loop

10

Event Loop

11

Event Loop

• Основа всех событийных систем • Использует очередь событий • Ждет события • Выполняет события из очереди

–  События в очередь поступают во время выполнения событий –  События генерируют события

• Завершается когда очередь пуста

12

Event Loop

var servers = [ 'http://serv1.ru/', 'http://serv2.ru/']; getFile('filename.jpg').then(function (file){ file = jpg2png(file); sendTo(file, servers).then(function (){ alert('tada!'); }); });

Список событий

Когда придет запрос к серверу – запусти этот код

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

13

Event Loop



Пришел запрос к северу, выполняем обработчик Когда файл прочитается – запусти этот код

Файл прочитан

14

Event Loop



Файл прочитался, выполняем обработчик Когда файлы отправятся – запусти этот код

Файл отправлен

Файл отправлен

15

А что если будет несколько одновременных запросов?!

16

Фрейм 0 выполняем код программы



Старт программы + Сейчас выполняется

17

Фрейм N пришел Запрос 1

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

Список событий Сейчас выполняется

Файл прочитан 1 +

18

Фрейм N+1 пришел Запрос 2

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


Файл прочитан 1


19

Фрейм N+2 прочитался Файл 1





+ Файл отправлен 1

Файл отправлен 1 +

20

Фрейм N+3 еще Запрос 3




Файл отправлен 1




21

Фрейм N+4 Файлы 1 отправили







Затем

22

Фрейм N+5 Файлы 2 прочитали







23

Фрейм N+6 Файлы 3 прочитали








24






Затем Файл отправлен 2


25






Затем

26

Фрейм N+100500 убираем обработчик Список событий

Убрать событие

Сейчас выполняется

27

Когда очередь пуста – программа завершается

28

Таймеры в JavaScript

29

Таймеры это не sleep() – это события во времени, они используют Event Loop

30

Таймер без повтора

•  setTimeout(function, timeout): Number –  выполни эту функцию не раньше чем через это время –  таймаут - миллисекунды

•  clearTimeout(timerId) –  предотврати выполнение этого таймера –  ид таймера – обычное число

31

Таймер c повтором

•  setInterval(function, timeout): Number –  выполняй эту функцию через данный интервал –  интервал - миллисекунды

•  clearInterval(timerId) –  предотврати выполнение этого интрвала –  ид интервала – обычное число

32

Любой таймер будет вызван не раньше указанного времени

33

var time = new Date(); setTimeout(function () { console.log(new Date() - time); }, 1000); // Эта функция выполняется 1100 мсек thisFunctionTakes1100msec(); // 1102

Пример промаха таймера

34

JavaScript работает в одном потоке и не может прерывать обработчики

35

Что происходит

Получить текущее время

Подписаться на событие T+1000

Тяжелая функция (1100 мс)

Время

T+1000

Выполнение функции таймера

Запаздывание

36

Таймеры выполняются в том же потоке, что и программа

37

var time = new Date(); setTimeout(function () { console.log(new Date() - time); }, 1000); setTimeout(function () { // Эта функция выполняется 1100 мсек thisFunctionTakes1100msec(); }, 10); thisFunctionTakes1100msec(); // 2212 = 1100 + 10 + 1100 + x

Еще один пример промаха таймера

38

Таймер может никогда не выполниться

39

var time = new Date(); setTimeout(function () { console.log(new Date() - time); }, 1000); while(true);

Пример недостижимого таймера

Паттерны

Callback,

Event,

Promise,

Deferred

41

Типичный пример – обертка над XMLHttpRequest

Callback

function asyncXHR(method, url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { callback(null, xhr.responseText); } else { callback(‘error’); } } } xhr.send(data); }

42

Callback

• Самый простой вариант –  Дешевая абстракция

• В него могут приходить ошибки и данные –  cтиль node.js –  callback(err, data)

43

Общая схема

Event: EventEmitter, PubSub

function EventEmitter () { this.events = {}; } EventEmitter.prototype = { on: function (event, callback) {}, off: function (event, callback) {}, emit: function (event, data) {} };

http://nodejs.org/api/events.html

44


Event

function eventXHR(method, url, data) { var xhr = new XMLHttpRequest(), event = new EventEmitter(); xhr.open(method, url, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { event.emit('data', xhr.responseText); } else { event.emit('error'); } } } xhr.send(data); return event; }

45

Сам код. Изменилось не так много.

Event

eventXHR('GET', 'http://host1/page.json') .on('data', function (data) { data = processData(data); var counter = 2; function done() { counter--; if (!counter) alert(‘Done!’); } eventXHR('POST', 'http://host2/result/', data) .on('data', done); eventXHR('POST', 'http://host3/result/', data) .on('data', done); }) .on('error', function(){ });

46

Event

• Абстракция более высокого уровня • Ошибки отделены от данных

–  Возможны логически разные типы данных

• Можно отписаться от события • Можно подписаться несколько раз • Можно передавать как аргумент

47

Promise

• Это Обещанные данные • Имеет 3 состояния

–  Не выполнен (выполняется) –  Выполнен (результат) –  Отклонен (ошибка)

• Меняет состояние только 1 раз –  В событиях состояние меняется сколько угодно раз

• Запоминает свое состояние –  В отличии от события в котором состояние – это поток

http://wiki.commonjs.org/wiki/Promises

48


Promise

function Promise () { this.isFulfilled = false; this.isRejected = false; this.isResolved = false; this.result = null; } Promise.prototype = { then: function (fulfilled, rejected, progressed) {}, reject: function (error) {}, resolve: function (data) {} };

49


Promise

function promiseXHR(method, url, data) { var xhr = new XMLHttpRequest(), promise = new Promise(); xhr.open(method, url, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { promise.resolve(xhr.responseText); } else { promise.reject('Error ' + xhr.status); } } } xhr.send(data); return promise; }

50

Сам код

Promise

promiseXHR('GET', 'http://host1/page.json') .then(function (data) { data = processData(data); var promises = [ promiseXHR('POST', 'http://host2/result/', data), promiseXHR('POST', 'http://host3/result/', data) ]; return when(promises); }) .then(function (data) { alert('Done!'); })

51

Promise

• Запоминает свое состояние • Всегда возвращает один результат

–  В отличие от события где данные – поток –  Не зависит от времени опроса

• Можно передавать как аргумент • Можно выполнять операции

–  then

52

Deferred

• Это защищенный Promise • Разграничивает слушателя и Promise • Слушатель не может вмешаться

–  С чистыми промисами можно завершить промис на слушателе –  Меньше логических ошибок

http://api.jquery.com/category/deferred-object/

53


Deferred

function Deferred () { this._promise = { then: function (fulfilled, rejected, progressed) {} }; } Deferred.prototype = { promise: function (error) { return this._promise; }, reject: function (error) {}, resolve: function (data) {} };

54


Deferred

function defferedXHR(method, url, data) { var xhr = new XMLHttpRequest(), deferred = new Deffered(); xhr.open(method, url, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { deferred.resolve(xhr.responseText); } else { deferred.reject('Error ' + xhr.status); } } } xhr.send(data); return deferred.promise(); }

55

Сам код

Deferred

defferedXHR('GET', 'http://host1/page.json') .then(function (data) { data = processData(data); var promises = [ defferedXHR('POST', 'http://host2/result/', data), defferedXHR('POST', 'http://host3/result/', data) ]; when(promises, function (data) { alert('Done!'); }); }) .reject(‘Mua-ha-ha!’); // Это сделать нельзя

Библиотеки

Streamlinejs,

Step,

Q

57

Streamline – попытка избавится от асинхронного шума Используют callback(err, data)

Streamline

var data = asyncXHR('GET', '/', null, _); asyncXHR('POST', '/', data, _); asyncXHR('POST', '/', data, _); alert('Done!');

https://github.com/Sage/streamlinejs

58

Happy Debug!

Streamline – результат генерации

(function main(_) { var data; var __frame = { name: "main”, line: 1 }; return __func(_, this, arguments, main, 0, __frame, function __$main() { return asyncXHR("GET", "/", null, __cb(_, __frame, 17, 11, function ___(__0, __1) { data = __1; return asyncXHR("POST", "/", data, __cb(_, __frame, 18, 0, function __$main() { return asyncXHR("POST", "/", data, __cb(_, __frame, 19, 0, function __$main() { alert("Done!"); _(); }, true)); }, true)); }, true)); }); }).call(this, __trap);

59

Streamlinejs

• Генерация кода – результат ужасен! • Шум из массы _ • Его цель – выполнять асинхронный код последовательно

60

Позволяет выполнять асинхронный код в синхронном стиле Работает с callback(err, data)

Step

Step( function () { asyncXHR('GET', '...', null, this); }, function (err, data) { return processData(data); }, function (err, data) { asyncXHR('POST', '...', data, this.parallel()); asyncXHR('POST', '...', data, this.parallel()); }, function (err, result1, result2) { alert('Done!'); } );

https://github.com/creationix/step

61

Работает с Promise Представляет интерфейс для работы с промисами

Q

var data = promiseXHR('GET', '...'); data.than(processAndSendData).than(function () { alert(‘Done!’); }); function processAndSendData(data) { data = processData(data); return sendData(data); } function sendData(data) { return Q.all([ promiseXHR('POST', '...', data), promiseXHR('POST', '...', data) ]); }

https://github.com/kriskowal/q

62

Асинхронность

• Событийный ввод-вывод • Работа с GUI • Паттерны

–  Callback –  EventEmitter –  Promise –  Deferred

• Хаки –  Streamline –  Fibers

• Библиотеки –  Step –  Q

Михаил Давыдов

Разработчик JavaScript

[email protected] azproduction

Спасибо

Михаил Давыдов: JavaScript. Асинхронность

Documents

Transcript of Михаил Давыдов: JavaScript. Асинхронность