Examples of asynchronous patterns to achieve: 1. Parallel requests 2. Print each resolved value as soon as possible 3. Preserve order when printing

async-examples.js

/// 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);
  }
}

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

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

Videos that inspired the above:

• https://www.youtube.com/watch?v=Qg1SvpIau6U
• https://www.youtube.com/watch?v=ategZqxHkz4