Rethinking Async Workflows
http://science.howstuffworks.com/environmental/energy/question136.htm
Jordan Kasper | @jakerella
A Solveable Problem...
const fs = require('fs');
fs.readFile('data-1.json', function(err, one) {
if (err) {
// Handle the error somehow
}
// Do something with the data...
});A Solveable Problem...
const fs = require('fs');
fs.readFile('data-1.json', function(err, one) {
if (err) {
// Handle the error somehow
}
fs.readFile('data-' + one.nextIndex + '.json', function(err, more) {
// ...
});
});A Solveable Problem...
const fs = require('fs');
fs.readFile('data-1.json', function(err, one) {
if (err) {
// Handle the error somehow
}
// Do something with the data...
fs.readFile('data-' + one.nextIndex + '.json', function(err, more) {
if (err) {
// Handle the error somehow
}
if (more.nextIndex) {
fs.readFile('data-' + more.nextIndex + '.json', function(err, extra) {
// ...
});
}
});
});
We could just make this code synchronous...
const one = JSON.parse(fs.readFileSync('data-1.json').toString());
// Do something with the data...
const more = JSON.parse(fs.readFileSync('data-' + one.nextIndex + '.json').toString());
if (more.nextIndex) {
const extra = fs.readFileSync('data-' + extra.nextIndex + '.json');
}
We want to write code
in a synchronous fashion,
but with the runtime benefits
of asynchronicity.
So that's what promises do?
Not quite.
Promises are a mechanism for managing callbacks.
Using a Promise
Using a Promise
fetch('/api/users', { /* options */ })
.then(function(response) {
console.log(response.status);
})
.catch(function(err) {
// handle any error properly!
console.error('API error:', err);
});Multiple Promises
fetch('/api/users', { /* options */ })
.then(function(response) {
console.log(response.status);
response.json()
.then(function(userData) {
// now we can use the data...
console.log(userData);
});
})Multiple Promises
fetch('/api/users', { /* options */ })
.then(function(response) {
console.log(response.status);
return response.json();
})
.then(function(userData) {
// now we can use the data...
console.log(userData);
})Multiple Promises
fetch('/api/users', { /* options */ })
.then(function(response) {
console.log(response.status);
return response.json();
})
.then(function(userData) {
// now we can use the data...
console.log(userData);
})
.catch(function(err) {
// handle any error properly!
console.error('API error:', err);
});Making a Promise
https://en.wikipedia.org/wiki/One_Ring
Async Callbacks
function apiCall(id, callback) {
ajaxCall({
url: '/api/user/' + id,
success: function(data) {
callback(null, data);
},
error: function(err) {
callback(err);
}
});
}Creating a Promise
function apiCall(id) {
const thePromise = new Promise(function(resolve, reject) {
ajaxCall({
url: '/api/user/' + id,
success: function(data) {
resolve(data);
},
error: function(err) {
reject(err);
}
});
});
return thePromise;
}What's the Difference?
apiCall(42, function(err, data) {
if (err) {
// Handle the error
}
console.log(data);
});
apiCall(42)
.then(function(data) {
console.log(data);
})
.catch(function(err) {
// Handle the error
})That's nice...
...but it doesn't really get us where we want to be.
Two Paths
https://www.americaninno.com/boston/switch-review-site-for-alternative-learning-programs-and-developer-bootcamps/What are generators?
A mechanism for pausing (and resuming)
function execution.
Generators are NOT
asynchronous.
Let's look at some asynchronous code...
setTimeout(function() {
console.log('100 ms timeout!');
}, 100);// Let's assume this takes ~1000 ms
for (let i=0; i<50000000; ++i) {
let obj = new Object();
}
console.log('Long run complete');Long run complete
100 ms timeout!JavaScript follows a
"run to completion" paradigm...
...along with an event-based asynchronous loop.
This code runs without stopping to the end...
setTimeout(function() {
console.log('100 ms timeout!');
}, 100);
// Let's assume this takes ~1000 ms
for (let i=0; i<50000000; ++i) {
let obj = new Object();
}
console.log('Long run complete');setTimeout() causes an asynchronous callback after 100 ms...
setTimeout(function() {
console.log('100 ms timeout!');
}, 100);
// Let's assume this takes ~1000 ms
for (let i=0; i<50000000; ++i) {
let obj = new Object();
}
console.log('Long run complete');...but this for loop will block the event loop until it's done.
setTimeout(function() {
console.log('100 ms timeout!');
}, 100);
// Let's assume this takes ~1000 ms
for (let i=0; i<50000000; ++i) {
let obj = new Object();
}
console.log('Long run complete');
Generators do not
solve this problem.
Generators allow functions to pause and resume execution!
Remember our synchronous code?
const one = JSON.parse(fs.readFileSync('data-1.json').toString());
// Do something with the data...
const more = JSON.parse(fs.readFileSync('data-' + one.nextIndex + '.json').toString());
if (more.nextIndex) {
const extra = fs.readFileSync('data-' + extra.nextIndex + '.json');
}Async with generators...
run(function* readAllFiles() {
const one = JSON.parse(yield readFile('data-1.json'));
const more = JSON.parse(yield readFile('data-' + one.nextIndex + '.json'));
const extra = JSON.parse(yield readFile('data-' + more.nextIndex + '.json'));
console.log( one, more, extra );
});I don't see any generators.
Wait for it...
Let's step back...
This is a generator.
function* foo() {
console.log('Inside foo');
yield 'a';
console.log('Back inside foo');
yield { 'b': 2 };
}And this is how you execute it...
const genObj = foo();
const one = genObj.next();
console.log('Outside foo');
const two = genObj.next();This is a generator.
function* foo() {
console.log('Inside foo');
yield 'a';
console.log('Back inside foo');
yield { 'b': 2 };
}And this is how you execute it...
const genObj = foo();
const one = genObj.next();
console.log('Outside foo');
const two = genObj.next();This is a generator.
function* foo() {
console.log('Inside foo');
yield 'a';
console.log('Back inside foo');
yield { 'b': 2 };
}And this is how you execute it...
const genObj = foo();
const one = genObj.next();
console.log('Outside foo');
const two = genObj.next();This is a generator.
function* foo() {
console.log('Inside foo');
yield 'a';
console.log('Back inside foo');
yield { 'b': 2 };
}And this is how you execute it...
const genObj = foo();
const one = genObj.next();
console.log('Outside foo');
const two = genObj.next();This is a generator.
function* foo() {
console.log('Inside foo');
yield 'a';
console.log('Back inside foo');
yield { 'b': 2 };
}And this is how you execute it...
const genObj = foo();
const one = genObj.next();
console.log('Outside foo');
const two = genObj.next();This is a generator.
function* foo() {
console.log('Inside foo');
yield 'a';
console.log('Back inside foo');
yield { 'b': 2 };
}And this is how you execute it...
const genObj = foo();
const one = genObj.next();
console.log('Outside foo');
const two = genObj.next();This is a generator.
function* foo() {
console.log('Inside foo');
yield 'a';
console.log('Back inside foo');
yield { 'b': 2 };
}And this is how you execute it...
const genObj = foo();
const one = genObj.next();
console.log('Outside foo');
const two = genObj.next();This is a generator.
And this is how you execute it...
This is a generator.
And this is how you execute it...
Inside foo
Outside foo
Back inside fooThis does not break the
"run to completion" paradigm!
Notice that my generator "yielded" two values:
Call the next() one last time...
{ value: 'a', done: false }
{ value: { b: 2 }, done: false }
{ value: undefined, done: true }Adding a return statement:
const genObj = foo();
console.log( genObj.next() );
console.log( genObj.next() );
console.log( genObj.next() );{ value: 'a', done: false }
{ value: { b: 2 }, done: false }
{ value: 'c', done: true }Generators are Iterators
In fact, we can iterate (or loop) over them!
a
{ b: 2 }A generator can receive
input with each yield
Receiving input from a yield
Error handling is easy.
Error handling is easy!
We just throw and catch Error objects.
function* luckyNumber() {
try {
yield 13;
} catch( err ) {
console.log( 'Oops!', err.message );
}
}If an error occurs outside the generator...
Oops! I did it again.If an error occurs inside the generator...
Caught outside generator: Nope nope nope.And finally...
Async with Generators
Tools We'll Need:
Generators (Obviously) and Promises
Yes, Promises.
Remember: generators are not asynchronous...
But what if I have callbacks everywhere?
Easy, just promisify the function!
Promisification Breakdown
(simplified)
function promisify( callbackStyleFn ) {
return function promiseStyleFn(originalArg) {
return new Promise(function( resolve, reject ) {
callbackStyleFn(originalArg, function(err, value) {
if (err) { return reject(err); }
resolve(value);
});
});
};
}(Warning: do not use this code!)
Generators are cumbersome...
- Create the generator object
- Call
next()to start it - Get the
valueoff the yielded object - Call
next()over and over - Remember to use
gen.throw()
Async generators
We want to abstract away their "Iterable" nature...
We need a . . .
Our simplified generator runner must...
- Accept a generator function
- Create the generator object
- Call
next() - Check if our generator is
done - Wait for
yielded Promise to resolve / reject - Throw errors on Promise rejection
- Rinse & repeat (3-6)
function run(generator) {
const genObj = generator();
function runGen(result) {
const item = genObj.next(result);
if (!item.done) {
item.value
.then(function(data) {
runGen(data);
})
.catch(function(err) {
genObj.throw(err);
runGen();
});
}
}
runGen();
}(Warning: do not use this code! It is not complete.)
(Warning: do not use this code! It is not complete.)
(Warning: do not use this code! It is not complete.)
(Warning: do not use this code! It is not complete.)
(Warning: do not use this code! It is not complete.)
(Warning: do not use this code! It is not complete.)
(Warning: do not use this code! It is not complete.)
(Warning: do not use this code! It is not complete.)
(Warning: do not use this code! It is not complete.)
Let's see it in action
{ "foo": "bar", "nextIndex": 2, "message": "Generators" }
{ "foo": "bat", "nextIndex": 5, "message": "are" }
{ "foo": "baz", "nextIndex": null, "message": "cool" }But is it really asynchronous?
{ "foo": "bar", "nextIndex": 2, "message": "Generators" }
100 ms timeout!
{ "foo": "bat", "nextIndex": 5, "message": "are" }
{ "foo": "baz", "nextIndex": null, "message": "cool" }What about errors?!
ERROR! ENOENT, open 'data-infinity.json'
Retrieved data: [ '{ "foo": "bar", "nextIndex": 2 }',
'{ "foo": "bat", "nextIndex": 5 }' ]
async and await
async function getData() {
try {
const one = JSON.parse(await readFile('data-1.json'));
const two = JSON.parse(await readFile('data-' + one.nextIndex + '.json'));
const three = JSON.parse(await readFile('data-' + two.nextIndex + '.json'));
} catch(err) {
// Handle the error...
}
}This looks familiar...
Because it is!
async functions are based on "pausing" in generators
and await requires a Promise!
So you're thinking...
... aaaah, but how long until I can use this?
async/await are supported in:
- Chrome (stable)
- Firefox (stable)
- Edge (stable)
- Safari (stable + mobile)
- Node (7+)
- And if all else fails... use Babel or Traceur!
And Internet Explorer?
ಠ_ಠ
Want to use generators?
Don't reinvent sliced bread!
Thank You!
Rethinking Async Workflows
Jordan Kasper | @jakerella
Rethinking Async Workflows
http://science.howstuffworks.com/environmental/energy/question136.htm