Async & Await Reference Sheet

async-await-info.md

async & await

Callbacks

request('http://www.omdbapi.com/?s=star%20wars', (error, response, body) => {
  const results = JSON.parse(body);
  console.log(results);
});

---

"Callback Hell"

function getFirstMovie(callback) {
  // Make request to get ID
  request('http://www.omdbapi.com/?s=star%20wars', (error, response, body) => {
    const results = JSON.parse(body);
    //requires the ID of the previous request
    request('http://www.omdbapi.com/?i=' + results.Search[0].imdbID, (error, response, body) => {
      const movie = JSON.parse(body);
      callback(movie);
    });
  });
}

getFirstMovie(movie => {
  console.log(movie);
});

---

Promises to the rescue

// rp is the request-promise library
function getFirstMovie() {
  return rp('http://www.omdbapi.com/?s=star%20wars')
    .then(body => {
      const results = JSON.parse(body);
      return rp('http://www.omdbapi.com/?i=' + results.Search[0].imdbID)
    }).then(body => {
      const movie = JSON.parse(body);
      return movie;
    });
}

getFirstMovie()
  .then(movie => {
    console.log(movie);
  }).catch(error => {
    console.log('Error!!', error);
  });

---

Promise Basics

• Represents a value that may or may not resolve in the future
• Pass a callback to .then to be called when the promise is resolved
• Pass a callback to .catch to be called when the promise is rejected

---

Promises are just cleaner callbacks

• The rp function might be implemented like this:

function rp(url) {
  return new Promise((resolve, reject) => {
    request(url, (error, response, body) => {
      if(error) {
        reject(error);
      } else {
        resolve(body);
      }
    });
  });
}

---

Enter: async/await

• Introduced in ES2016 (ES7)

async function getFirstMovie() {
  try {
    const resultsBody = await rp('http://www.omdbapi.com/?s=star%20wars');
    const results = JSON.parse(resultsBody);
    const movieBody = await rp('http://www.omdbapi.com/?i=' + results.Search[0].imdbID);
    const movie = JSON.parse(movieBody);
    return movie;
  } catch (error) {
    console.log('Error!', error);
  }

}

getFirstMovie()
  .then(movie => {
    console.log(movie);
  });

---

How does that work?

---

Async Functions

• Add the async keyword to any function that will await a promise

async function doTheThing() {
  //stuff happens
}

• When an async function is called, it returns a Promise.

  • The value returned is "resolved"
  • Any exception thrown is "rejected"

• An async function can contain an await expression

  • This pauses the execution of the async function and waits for the passed Promise's resolution, and then resumes the async function's execution and returns the resolved value.

---

Promises

// rp is the request-promise library
function getFirstMovie() {
  return rp('http://www.omdbapi.com/?s=star%20wars')
    .then(body => {
      const results = JSON.parse(body);
      return rp('http://www.omdbapi.com/?i=' + results.Search[0].imdbID)
    }).then(body => {
      const movie = JSON.parse(body);
      return movie;
    });
}

getFirstMovie()
  .then(movie => {
    console.log(movie);
  }).catch(error => {
    console.log('Error!!', error);
  });

---

async/await

async function getFirstMovie() {
    try {
        const resultsBody = await rp('http://www.omdbapi.com/?s=star%20wars');
        const results = JSON.parse(resultsBody);
        const movieBody = await rp('http://www.omdbapi.com/?i=' + results.Search[0].imdbID);
        const movie = JSON.parse(movieBody);
        return movie;
    } catch (error) {
        console.log('Error!', error);
    }

}

getFirstMovie()
    .then(movie => {
        console.log(movie);
    });

---

async/await gotchas

• Be wary of code that is too synchronous

async function doThings() {
  for (var i = 0; i < array.length; i++) {
    await doTheThing(array[i])
  }
}

Instead, use your promise know how:

async function doThings() {
  await Promise.all(array.map(item => {
    return doTheThing(item);
  }));
}

---

Resources

• These slides: https://git.io/async-await
• You Don't Know JS: Async & Performance
• MDN: AsyncFunction
• MDN: async function
• The Evolution of Asynchronous JavaScript
• Asynchronous Adventures in JavaScript: Promises
• Ponyfoo: Understanding JavaScript’s async await
• ES7 Async Await BIBLE