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

Videos that inspired the above:

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