A Brief History of Asynchronous JavaScript
A Brief History of Asynchronous JavaScript
Tom Wey - Developer
twitter.com/tjmwy
github.com/tjmw
A Brief History of Asynchronous JavaScript
Why JavaScript?
A Brief History of Asynchronous JavaScript
It's Everywhere!
A Brief History of Asynchronous JavaScript
It's got some interesting features
Credit: https://twitter.com/anler
A Brief History of Asynchronous JavaScript
Synchronous Programming
const a = 1, b = 2;
let result = a + b;console.log(result); // => 3
result = Math.pow(result, 2);console.log(result); // => 9
A Brief History of Asynchronous JavaScript
Asynchronous Programming
setTimeout(() => { console.log("Timeout completed!");}, 1000);
console.log("Hello!");
// "Hello!"// "Timeout completed!"
A Brief History of Asynchronous JavaScript
JavaScript’s Concurrency Model
A Brief History of Asynchronous JavaScript
Single Threaded
A Brief History of Asynchronous JavaScript
Non-Blocking I/O
A Brief History of Asynchronous JavaScript
The Event Loop, Message Queue & run-to-completion
A Brief History of Asynchronous JavaScript
A Brief History of Asynchronous JavaScript
A Brief History of Asynchronous JavaScript
setTimeout(() => { console.log("Timeout completed!");}, 1000);
longRunningSynchronousTask();
A Brief History of Asynchronous JavaScript
Working with Async
A Brief History of Asynchronous JavaScript
Callbacks
A Brief History of Asynchronous JavaScript
$.ajax({ url : "example.com", type: "GET", success: data => { // Do something with the result }});
A Brief History of Asynchronous JavaScript
Error Handling with Callbacks
someAsyncFunction((err, result) => { if (err) { // Handle error } else { // Success }});
A Brief History of Asynchronous JavaScript
Drawbacks of Callbacks
A Brief History of Asynchronous JavaScript
Callback HellAKA the pyramid of doom
Credit: https://medium.com/@pranavrajs/promises-in-sails-js-remove-callback-hell-46899a2ff1b1
A Brief History of Asynchronous JavaScript
Specifying Multiple Callbacks
A Brief History of Asynchronous JavaScript
Error Handling
A Brief History of Asynchronous JavaScript
Trustability of Callbacks
A Brief History of Asynchronous JavaScript
Don't Unleash Zalgo!
A Brief History of Asynchronous JavaScript
Promises
A Brief History of Asynchronous JavaScript
"A Promise is an object representing the eventual completion or failure
of an asynchronous operation" - MDN
A Brief History of Asynchronous JavaScript
A promise either completes successfully (is resolved) or fails (is
rejected)
A Brief History of Asynchronous JavaScript
new Promise((resolve, reject) => { // Work in here, then call resolve() or reject()});
// setTimeout promise-ifiednew Promise((resolve, _reject) => { setTimeout(resolve, 5000);});
A Brief History of Asynchronous JavaScript
Handling Promise outcomes
const promise = promiseGeneratingFunction();
promise.then(result => { // Handle success});
promise.catch(error => { // Handle error});
A Brief History of Asynchronous JavaScript
Chainability
const responsePromise = fetch("https://api.example.com/todos/1");
const decodePromise = responsePromise.then(response => response.json());
decodePromise.then(decodedData => handleData(decodedData));
A Brief History of Asynchronous JavaScript
Or...
fetch("https://api.example.com/todos/1") .then(response => response.json() ). .then(decodedData => handleData(decodedData) );
A Brief History of Asynchronous JavaScript
Promise.all
Promise.all([promise, anotherPromise]).then(results => { // handle results});
A Brief History of Asynchronous JavaScript
Native Promises in JavaScript since ES6
A Brief History of Asynchronous JavaScript
Promises Support
Credit: https://caniuse.com
A Brief History of Asynchronous JavaScript
Async/await
A Brief History of Asynchronous JavaScript
function foo() { return "foo" }foo() // => "foo"
async function asyncFoo() { return "foo" }asyncFoo() // => Promise { status: "resolved", result: "foo" }
A Brief History of Asynchronous JavaScript
async function fetchAndTransformPost() { const response = await fetch(postEndpoint); const post = await response.json(); const transformedPost = transformPost(post); return transformedPost;}
A Brief History of Asynchronous JavaScript
async function withAsyncAwait() { const response = await fetch(postEndpoint); const post = await response.json();
if (post.status === "published") { const commentsResponse = await fetch(commentsEndpoint); const comments = await commentsResponse.json();
return { ...post, comments }; } else { return post; }}
A Brief History of Asynchronous JavaScript
function withPromises() { return fetch(postEndpoint) .then(response => response.json()) .then(post => { if (post.status === "published") { return fetch(commentsEndpoint) .then(commentsResponse => commentsResponse.json()) .then(comments => ({ ...post, comments })); } else { return post; } });}
A Brief History of Asynchronous JavaScript
Concurrent Async Operations
A Brief History of Asynchronous JavaScript
!
async function multi() { const result1 = await fetchResult1(); const result2 = await fetchResult2(); return [result1, result2].join(",");}
A Brief History of Asynchronous JavaScript
!
async function multi() { const results = await Promise.all([ fetchResult1(), fetchResult2(), ]); return results.join(",");}
A Brief History of Asynchronous JavaScript
Result/Error Handling
A Brief History of Asynchronous JavaScript
asyncFunction() .catch(error => { // handle error });
A Brief History of Asynchronous JavaScript
// OR within our async function
try { return await thisMayFail();} catch (e) { return DEFAULT;}
A Brief History of Asynchronous JavaScript
!
// index.js
const result = await asyncFunction();console.log(result);
A Brief History of Asynchronous JavaScript
Async/await Support
Credit: https://caniuse.com
A Brief History of Asynchronous JavaScript
Generators
A Brief History of Asynchronous JavaScript
Iterators
A Brief History of Asynchronous JavaScript
Iterator Interface
next() => { value: 1, done: false }
A Brief History of Asynchronous JavaScript
Generators are Controlled By Iterators
A Brief History of Asynchronous JavaScript
function* simpleGenerator() { yield 1; yield 2; return 3;}
const it = simpleGenerator();it.next(); // => { value: 1, done: false }it.next(); // => { value: 2, done: false }it.next(); // => { value: 3, done: true }
A Brief History of Asynchronous JavaScript
Two-way Communication
A Brief History of Asynchronous JavaScript
function* anotherGenerator() { const x = 1 + (yield "Hello SDD!"); return 2 * (yield x);}
const it = anotherGenerator();it.next(); // => { value: 'Hello SDD!', done: false }it.next(5); // => { value: 6, done: false }it.next(10); // => { value: 20, done: true }
A Brief History of Asynchronous JavaScript
Generators and Async
A Brief History of Asynchronous JavaScript
function* asyncGenerator() { const first = yield asyncDouble(2); const second = yield asyncDouble(3); return first + second;}
const it = asyncGenerator();
const res = it.next();
res.value.then(result => { const res2 = it.next(result);
res2.value.then(result => { const finalResult = it.next(result);
console.log(finalResult); // => { value: 10, done: true } });});
A Brief History of Asynchronous JavaScript
End. The
A Brief History of Asynchronous JavaScript