Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Examples of asynchronous patterns to achieve: 1. Parallel requests 2. Print each resolved value as soon as possible 3. Preserve order when printing
/// base functions
const files = {
file1: "first text",
file2: "middle text",
file3: "last text"
};
function readFile(file, success) {
const delay = parseInt(Math.random() * 2000 + 500, 10);
console.log("started fetching:", file);
console.log("delay:", delay);
setTimeout(() => success(files[file]), delay);
}
function readFilePromise(file) {
return new Promise(resolve => readFile(file, resolve));
}
/// GOALS:
// 1. parallel requests
// 2. print as soon as possible
// 3. print in correct order
/// Callback based solution
// (uncomment following to run solution)
// printFilesCallback();
function printFilesCallback() {
let file1 = false;
let file2 = false;
let file3 = false;
readFile("file1", content => {
file1 = content;
console.log("callback:", file1);
if (file2) console.log("callback:", file2);
if (file2 && file3) console.log("callback:", file3);
});
readFile("file2", content => {
file2 = content;
if (file1) console.log("callback:", file2);
if (file1 && file3) console.log("callback:", file3);
});
readFile("file3", content => {
file3 = content;
if (file1 && file2) {
console.log("callback:", file3);
}
});
}
/// Promise based solution
// (uncomment following to run solution)
// printFilesPromise();
function printFilesPromise() {
const file1 = readFilePromise("file1");
const file2 = readFilePromise("file2");
const file3 = readFilePromise("file3");
file1
.then(content => {
console.log("promise:", content);
return file2;
})
.then(content => {
console.log("promise:", content);
return file3;
})
.then(content => console.log("promise:", content));
}
/// Generator based solution
// (uncomment following to run solution)
// run(printFilesGenerator);
function *printFilesGenerator() {
const file1 = readFilePromise("file1");
const file2 = readFilePromise("file2");
const file3 = readFilePromise("file3");
console.log("generator:", yield file1);
console.log("generator:", yield file2);
console.log("generator:", yield file3);
}
function run(generator) {
const iterator = generator();
return iterate(iterator.next());
function iterate({done, value}) {
return done ? value : value.then(
val => iterate(iterator.next(val))
);
}
}
/// Async/Await based solution
// (uncomment following to run solution)
// printFilesAsync();
async function printFilesAsync() {
const file1 = readFilePromise("file1");
const file2 = readFilePromise("file2");
const file3 = readFilePromise("file3");
console.log("async:", await file1);
console.log("async:", await file2);
console.log("async:", await file3);
}
/// Async/Await using loop based solution
// (uncomment following to run solution)
// printFileAsyncLoop();
async function printFileAsyncLoop() {
const files = ["file1", "file2", "file3"].map(readFilePromise);
for (const file of files) {
console.log("async loop:", await file);
}
}
/// Async Iterator based solution
// (uncomment following to run solution)
// printFileAsyncIterator();
async function printFileAsyncIterator() {
const files = ["file1", "file2", "file3"].map(readFilePromise);
for await (const file of files) {
console.log("async iterator:", file);
}
}
@Maximilianos

This comment has been minimized.

Copy link
Owner Author

@Maximilianos Maximilianos commented Jun 30, 2016

Testable example of the above available at: http://www.es6fiddle.net/iq2oa1gk/

@Maximilianos

This comment has been minimized.

Copy link
Owner Author

@Maximilianos Maximilianos commented Jun 30, 2016

Problem being solved by above would be something like:

Given an asynchronous function that resolves the requested value from a map of 3 values (file1, file2, file3) after a random amount of time, write a function that will print the values to the console while adhering to the following rules:

  1. Send the requests for all files in parallel (at the same time)
  2. Print each resolved value as soon as possible, but
  3. Print the resolved values in the following order: value of file1, then of file2, then of file3
@Maximilianos

This comment has been minimized.

Copy link
Owner Author

@Maximilianos Maximilianos commented Jun 30, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment