Жизнь после promises
-
Upload
vitebsk-dsc -
Category
Software
-
view
119 -
download
0
Transcript of Жизнь после promises
Callback
‘95 ‘11 ‘15
Promise(jQuery)
GeneratorAsync/Await
Эволюция взаимодействия с асинхронным кодом. Том 1
“Пирамида зла”
getData(function(a){
getMoreData(a, function(b){
getMoreData(b, function(c){
getMoreData(c, function(d){
getMoreData(d, function(e){
...
});
});
});
});
});
“
Promise -это объект для асинхронных манипуляций.
Представляет собой асинхронную операцию, которая еще не закончена, но это предполагается в будущем.
Mozilla Developer Network“
Так выглядит стандартная цепочка “промисов”
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);
Promise изнутри
├[[PromiseStatus]]:"resolved"├[[PromiseValue]]:"It’s OK!"├__proto__:Promise└─┐ ├catch:catch() ├constructor:Promise() └then:then()
Три группы Promise API
.then() / .catch()Отвечают за цепочки Promise.
аргумент: Функция
.resolve() / .reject()Решают, когда нужно запустить цепочки Promise
аргумент: что угодно
.race() / .all()
Предоставляют возможность работать с несколькими асинхронными запросами одновременно
аргумент: массив из Promise
Ожидание - результат
function fetch(login, pass) {
// Выполняет асинхронный запрос с помощью Promises return query();
}
var result = fetch();
// Ожидание: result === {data: [ … ]}// Фактический результат: login === Promise
1
Не нравится? Есть варианты!
◉ Продолжать использовать Callbacks;
◉ Понять, как правильно пользоваться Promises;
◉ Воспользоваться Generators;
◉ Воспользоваться Async/Await.
1. generator.next(); // продолжает Generator2. generator.return(); // останавливает Generator3. generator.throw(exception); // вызывает исключение
Всегда возвращают объект с двумя значениями:
{ done: [Boolean], value: [Object] }
Методы Generator:
var result = yield auth();
1. yield возвращает Promise;2. (что-то в середине) отлавливает Promise;3. (что-то в середине) вызывает метод .next со
значением, которое Promise получает;4. переменная result записывается со значением из
Promise;
Поставь код на паузу
Каждый раз, когда вы захотите остановить выполнение кода в определенной точке - просто вызовите yield. Это мощный механизм для разделения логики на шаги.
Generator может быть асинхроннымНужно сделать асинхронный запрос? Прекрасно! С помощью небольшой надстройки реально использовать Generator таким образом, что значение будет возвращено, как только запрос будет закончен.
Важные моменты
async(function* () {
var result = yield auth('login', 'password');
if (result.status === 'OK') {
success('login');
}
})
Как это работает
ключевое слово async
Определение асинхронной функции, что возвращает Promise. Внутри этой функции, возможно подключить другие асинхронные операции используя await.
ключевое слово await
Может быть использовано только внутри асинхронных функций. Работают подобно генераторам, придерживая выполнение в контексте пока Promise работает. Если ожидаемое выражение не Promise, оно будет в него превращено.
Синтаксис
async function init() {
var info = await fetchSomething();
var result = await sendSomething(info);
return result;
}
Что вернет функция “init”?
async function init() {
var info = await fetchSomething();
var result = await sendSomething(info);
return result;
}
Что вернет функция “init”?
Promise!
◉ Ваш код станет линейным;◉ Синтаксис будет проще;◉ Вы даже можете использовать try/catch чтобы отловить
ошибку;
… Однако асинхронные функции возвращают Promise, а не фактическое значение, так что вам все равно нужно знать, как работают Promises.
Итог