ES2017 async/await

ES2107 has new methods for handling promises: async & await.  Due to the asynchronous nature of Javascript, when I call an api, it will likely return the api data last, even if it is called at the beginning of the code.  I’m taking this example from Colt Steele’s Advanced JS Bootcamp on Udemy.

  1. Return one movie from OMDB using async/await

This is a call to the omdb movie database to return info on the movie Titanic.  As you can see, on line 1, I add the async keyword in front of ‘function’, and then on line 3 I add await in front of the api call.  When I use await in front of the api call, it returns a promise with the status of ‘pending’ (line 11).  Once the promise is resolved, the function then console.logs the movieData, and then the ‘all done!’ message.

async function getMovieDataAwait() {
    var movieData = await $.getJSON('');
    console.log('movie data - ', movieData);
    console.log('all done!');

// data returned to console //
Promise {<pending>}
movie data -  {Title: "Titanic", Year: "1997", Rated: "PG-13", Released: "19 Dec 1997", Runtime: "194 min", …}
all done!

2. Return multiple movies from OMDB using async/await

If I am doing multiple async calls, I can use  await Promise.all.  As above, I add the async keyword in front of function.  Then on line 2, instead of using await for a single api call, I can wrap multiple api calls in an array using Promise.all.

It prints out the plot of “This Disaster Artist”, a great film I just saw today, and “About a boy” which is one of my all-time favorite movies.

async function getMultipleMovieData(first, second) {
    let moviesList = await Promise.all([

getMultipleMovieData('the disaster artist','about a boy')

// OUTPUT - console.log(moviesList[0].Plot) - 'the disaster artist'
When Greg Sestero, an aspiring film actor, meets the weird and mysterious 
Tommy Wiseau in an acting class, they form a unique friendship and travel to 
Hollywood to make their dreams come true.

// OUTPUT - console.log(moviesList[1].Plot) - 'about a boy'
A cynical, immature young man is taught how to act like a grown-up by a little boy.

3. Find github user with most followers from unspecified number of users

async function getMostFollowers(...usernames) {
    let baseUrl = "";
    let urls = => $.getJSON(baseUrl + username));
    let results = await Promise.all(urls);
    let max = results.sort((a,b) => a.followers < b.followers)[0];
    console.log(`${} has the most followers with ${max.followers}`);
    return `${} has the most followers with ${max.followers}`;

.then(function(topUser) {

Ray Villalobos has the most followers with 2882

3. Find Star Wars character from

async function starWarsString(id) {
    let str = '';
    let results = await $.getJSON(`${id}/`);
    str += `${} is featured in `;
    let movies = results.films[0];
    let moreResults = await $.getJSON(movies);
    str += `${moreResults.title}, directed by ${moreResults.director}`;
    let planetData = moreResults.planets[0];
    let finalResults = await $.getJSON(planetData);
    str += `and it takes place on ${}`;
    return str;

.then(function(character) {
    console.log('Star Wars Character - ', character);

Star Wars Character -  C-3PO is featured in The Empire Strikes Back, directed by 
Irvin Kershnerand it takes place on Hoth


Leave a Reply

Your email address will not be published. Required fields are marked *