async/await vs raw Promises examples

async-await.js

const fetch = require('node-fetch')

const fetchUserAvatar = async (userId) => {

  const response = await fetch(`http://catappapi.herokuapp.com/users/${userId}`)
  response // actual response, not the promise
  const data = await response.json(); // without await, data will be a promise that resolves to the desired data
  data
  return data.imageUrl;

  // EQUIVALENT TO

  /*
  
  return fetch(`http://catappapi.herokuapp.com/users/${userId}`)
   .then(result => result.json())
   .then(json => json.imageUrl);
   
   */
}

const result = fetchUserAvatar(123);
result

// ==============================================================================================================

const fetchCatAvatar = async (userId) => {

  // ======================================================================================================================

  // COMBINATION OF ASYNC/AWAIT WITH RAW PROMISES

  const response = await fetch(`http://catappapi.herokuapp.com/users/${userId}`)
  const user = await response.json()

  // this example combines async/await with raw Promises, therefore it fetches the cats in paralel
  return await Promise.all(user.cats.map(async (catId) => {                          // to wait for multiple promises, we need to combine async & await
    const response = await fetch(`http://catappapi.herokuapp.com/cats/${catId}`)
    const cat = await response.json();
    return  cat.imageUrl;
  }));

  //====================================================================================================================== 

  /* ======================================================================================================================

  ASYNC/AWAIT => SLOWER

  const response = await fetch(`http://catappapi.herokuapp.com/users/${userId}`)
  const user = await response.json()

  const catsAvatars = []
  for(const catId of user.cats) {
    const catResponse = await fetch(`http://catappapi.herokuapp.com/cats/${catId}`)   // loading the cats happens in sequence
    const cat = await catResponse.json();                                             // awaiting for the cat to be resolved one after another before processing
    cat                                                                               // await only works for single promises
    catsAvatars.push(cat.imageUrl)
  }
  return catsAvatars
  
  ====================================================================================================================== */

  /* ======================================================================================================================
  
  RAW PROMISES => FASTER

  return fetch(`http://catappapi.herokuapp.com/users/${userId}`)
    .then(response => response.json())
    .then(user => {
      const promises = user.cats.map(catId =>                                        // loading the cats happens in paralel
        fetch(`http://catappapi.herokuapp.com/cats/${catId}`)
          .then(response => response.json())
          .then(catData => catData.imageUrl)
      )
      return Promise.all(promises)
    })
    
  ====================================================================================================================== */
}
    
const res = fetchCatAvatar(123);
res