Async Javascript
Callbacks, Promises, Async/Await
- Name
- Andreas Schacht
- Company
- kaliber5
- Job title
- Web Developer
- schacht@kaliber5.de
Excursion: Event Loop
Async executed code also blocks UI
Talk from Philip Roberts @JSConf EU 2014:
Excursion: Event Loop
TOC
what will I talk about
- sync example
- callback example
- promise example
- async/await example
- async with generators
Sync
function doSomething() {
let data = foo();
data = bar(data);
return baz(data);
}
let result = doSomething();
console.log(result);
Sync
function doSomething() {
let data = foo();
data = bar(data);
return baz(data);
}
try {
let result = doSomething();
console.log(result);
} catch(err) {
console.error(err);
}
- handle errors
Callbacks
function bar(value) {
console.log(value);
}
function foo(cb) {
setTimeout(function() {
// do some work
cb(2);
}, 0);
}
foo(bar);
console.log(1);
//-> 1
//-> 2
Callbacks
const fs = require('fs');
fs.readFile('./README.md', (err, data) => {
// do some work here
});
- "error-first"- / "errback"-convention
- err is null on success
Callbacks
const fs = require('fs');
fs.readFile('./README.md', (err, data) => {
if (err) {
// handle error
} else {
// process data
}
});
Callbacks
const fs = require('fs');
try {
fs.readFile('./README.md', (err, data) => {
if (err) {
throw err;
}
console.log('done');
});
} catch(err) {
console.error(err);
}
- try / catch won't work
Callbacks
function doSomething(cb) {
foo((err, data) => {
bar(data, (err, data) => {
baz(data, cb);
});
});
}
doSomething((err, data) => {
console.log(data);
});
Callbacks
function doSomething(cb) {
foo((err, data) => {
if (err) {
cb(err);
} else {
bar(data, (err, data) => {
if (err) {
cb(err);
} else {
baz(data, cb);
}
});
}
});
}
doSomething((err, data) => {
if (err) {
console.error(err);
} else {
console.log(data);
}
});
- error handling
Callbacks
function doSomething(cb) {
foo((err, data) => {
if (err) {
return cb(err);
}
bar(data, (err, data) => {
if (err) {
return cb(err);
}
baz(data, cb);
});
});
}
doSomething((err, data) => {
if (err) {
return console.error(err);
}
console.log(data);
});
- exit as soon as possible
Callbacks vs Sync
function doSomething(cb) {
foo((err, data) => {
if (err) {
return cb(err);
}
bar(data, (err, data) => {
if (err) {
return cb(err);
}
baz(data, cb);
});
});
}
doSomething((err, data) => {
if (err) {
return console.error(err);
}
console.log(data);
});
function doSomething() {
let data = foo();
data = bar(data);
return baz(data);
}
try {
let result = doSomething();
console.log(result);
} catch(err) {
console.error(err);
}
Promises
- objects represents an eventual result/failure
new Promise(function(resolve, reject) { ... } );
- states
pending := !fulfilled && !rejected
fulfilled
rejected
Promises
new Promise((resolve, reject) => {
// executes immediatly
// do some work
// pending state
if (foo) {
resolve(foo);
// fulfilled state
} else {
reject(reason);
// rejected state
}
});
Promises
Promise.reject('reason');
// state rejected
Promise.resolve('value');
// state fulfilled
Promise.resolve(Promise.reject('reason'));
// return passed Promise, state rejected
Promises
Promise.all([
Promise.resolve('val1'),
Promise.resolve('val2')
]); // resolves async, state pending, will fulfill
Promise.all([]); // resolves sync, state fulfilled
Promise.all([
'val1',
'val2'
]); // resolves async (sync on Chrome 58), state pending (fulfilled), will fulfill
Promise.all([
Promise.resolve('value'),
Promise.reject('reason')
]); // resolves sync, state rejected
Promises
Promise.race([
Promise.resolve('val1'),
Promise.reject('val2')
]); // state pending, will fulfill with value: 'val1'
Promise.race([
Promise.reject('val2'),
Promise.resolve('val1')
]); // state pending, will reject with reason: 'val2'
Promise.race([]); // will pending forever
Promises
Promise.prototype.then(onFulfilled[, onRejected]);
Promise.resolve('value').then((data) => {
console.log(data);
});
Promise.reject('reason').then((data) => {},
(reason) => {
console.error(reason);
});
Promise.prototype.catch(onRejected);
Promise.reject('reason').catch((reason) => {
console.error(reason);
});
Promises
let promise = Promise.reject(Error('test'));
// -> Uncaught (in promise) Error: test
Promises
let promise = Promise.reject(Error('test'));
promise.catch((error) => {
// handle error
});
// -> No output
Promises
let promise = Promise.reject(Error('test'));
promise.catch((error) => {
// handle error
});
promise.then((value) => {
// will never executed
});
// -> Uncaught (in promise) Error: test
Promises
let promise = Promise.reject(Error('test'));
promise.catch((error) => {
// handle error
});
promise.then((value) => {
// will never executed
}, (err) => {});
promise.then((value) => {
// will never executed
}).catch((err) => {});
// -> No output
Promises
let promise = Promise.resolve({ name: 'Andreas'});
promise.then((value) => {
console.log('1: '+value.name);
value.name = 'Andi';
return value;
}).then((value) => {
console.log('2: '+value.name);
});
// -> 1: Andreas
// -> 2: Andy
Promises
let promise = Promise.resolve({ name: 'Andreas'});
promise.then((value) => {
console.log('1: '+value.name);
value.name = 'Andi';
return value;
}).then((value) => {
console.log('2: '+value.name);
});
// ....
promise.then((value) => {
console.log('1.5: '+value.name);
value.name = 'Andy';
});
// -> 1: Andreas
// -> 1.5: Andi
// -> 2: Andy
Promises
chainable
Promise.resolve().then((data) => {
return Promise.resolve('data');
}).then((data) => {
console.log(data); // -> 'data'
return 42;
}).then(undefined, (error) => {
// this will never been reached
}).then((data) => {
console.log(data); // -> 42
throw Error('message');
}).then((data) => {
// this will never been reached
}).catch((error) => {
// handle error;
});
Promises
function doSomething() {
return Promise.resolve(foo())
.then((data) => {
return bar(data);
})
.then((data) => {
return baz(data);
});
}
doSomething().then((data) => {
console.log(data);
}).catch((error) => {
console.error(error);
});
Promises
function doSomething() {
return Promise.resolve()
.then(foo)
.then(bar)
.then(baz);
}
doSomething().then((data) => {
console.log(data);
}).catch((error) => {
console.error(error);
});
Promises vs Sync
function doSomething() {
return Promise.resolve()
.then(foo)
.then(bar)
.then(baz);
}
doSomething().then((data) => {
console.log(data);
}).catch((error) =>
console.error(error);
});
function doSomething() {
let data = foo();
data = bar(data);
return baz(data);
}
try {
let result = doSomething();
console.log(result);
} catch(err) {
console.error(err);
}
async / await
- RC ES7
async function-declaration- defines an asynchronous function
- async function call returns a promise
awaitoperator- can only be used in async functions
- suspending execution
- until following expression is resolved
async / await
async function foo() {
return 'value';
return Promise.resolve('value');
return Promise.reject(Error('reason'));
throw Error('reason');
await Promise.reject(Error('reason'));
}
let fooPromise = foo();
async / await
async function foo() {
try {
let value = await Promise.resolve('value');
await Promise.reject(Error('reason'));
// never reached
return value;
} catch(error) {
// handle error
// return fallbackValue;
// or
// throw error;
}
...
}
async/await vs Sync
async function doSomething() {
let data = await foo();
data = await bar(data);
return await baz(data);
}
doSomething().then((data) => {
console.log(data);
}).catch((error) =>
console.error(error);
});
function doSomething() {
let data = foo();
data = bar(data);
return baz(data);
}
try {
let result = doSomething();
console.log(result);
} catch(err) {
console.error(err);
}
async / await
parallel execution
async function () {
let promA = new Promise(...);
let promB = new Promise(...);
return await promA + await promB;
}
async function () {
let [resultA, resultB] = await Promise.all([
new Promise(...),
new Promise(...)
]);
return resultA + resultBB;
}
generator function
- declaration: function keyword followed by an asterisk
function* genFunc([param[, ... param]]) { statements }
let genObj = genFunc();
generator object
Generator.prototype.next()
Generator.prototype.return()
Generator.prototype.throw()
generators
- next()
function* fibonacci() {
let current = 0;
let next = 1;
while (true) {
yield current;
[current, next] = [next, current + next];
}
}
let sequence = fibonacci();
console.log(sequence.next()); // { done: false, value: 0}
console.log(sequence.next().value); // 1
console.log(sequence.next().value); // 1
console.log(sequence.next().value); // 2
generators
- next()
function* fibonacci() {
let reset = true, current, next;
while (true) {
if (reset){
current = 0;
next = 1;
}
reset = yield current;
[current, next] = [next, current + next];
}
}
let sequence = fibonacci();
console.log(sequence.next()); // { done: false, value: 0}
console.log(sequence.next().value); // 1
console.log(sequence.next().value); // 1
console.log(sequence.next(true).value); // 0
generator
- return()
function* gen() {
yield 1;
yield 2;
yield 3;
}
var g = gen();
g.next(); // { value: 1, done: false }
g.return(); // { value: undefined, done: true }
g.return('foo'); // { value: "foo", done: true }
g.next(); // { value: undefined, done: true }
generator
- throw()
function* gen() {
while(true) {
try {
yield 42;
} catch(e) {
console.log('Error caught!');
}
}
}
var g = gen();
g.next();
// { value: 42, done: false }
g.throw(new Error('Something went wrong'));
// "Error caught!"
// { value: 42, done: false }
async generator
let runGenerator = function(generatorFunction) {
// recursive next()
let next = function (arg) {
let result = it.next(arg);
// are we done?
if (result.done) return;
if (typeof result.value == 'function') {
result.value(next);
}
else {
// if the response isn't a function, pass it to next()
next(result.value);
}
}
// create the iterator
let it = generatorFunction();
return next();
}
// initiliase and pass in a generator function
runGenerator(function* () {
let val = yield fetch(url);
let val2 = yield fetch(url2);
});
ember-concurrency
export default Ember.Component.extend({
result: null,
actions: {
async getProducts() {
let products = await this.get('store').get('products');
this.set('result', products);
}
},
});
ember-concurrency
export default Ember.Component.extend({
result: null,
fetching: false,
actions: {
async getProducts() {
if (this.get('fetching')) { return; }
this.set('fetching', true);
try {
let products = await this.get('store').get('products');
if (this.get('isDestroyed')) { return; }
this.set('result', products);
} finally (err) {
if (this.get('isDestroyed')) { return; }
this.set('fetching', false);
}
}
},
});
ember-concurrency
export default Ember.Component.extend({
result: null,
getProducts: task(function* () {
let products = yield this.get('store').get('products');
this.set('result', product);
}).drop()
});
Thank you
1
Async Javascript
Callbacks, Promises, Async/Await