Mastering Promises, Async/Await for managing the flow of execution

Question

Mastering Promises, Async/Await for managing the flow of execution

Exploring the concepts of promises, await, and async functions has been a fascinating journey for me. As I delved into promises, I discovered an interesting aspect - the unpredictable order in which requests were resolved when multiple requests were sent out simultaneously. Due to network routing and packet handling, the requests did not necessarily return in the same sequence as they were written in the code.

const getCountry = async country => {
  await fetch(`https://restcountries.com/v2/name/${country}`)
    .then(res => res.json())
    .then(data => {
      console.log(data[0]);
    })
    .catch(err => err.message);
};

getCountry('portugal');
getCountry('ecuador');

Before diving into the world of async and await, I found a solution that suited my needs perfectly. By incorporating these features, each request now waits for the previous one to complete before proceeding.

I wonder if there is a simpler way to achieve this? Are there any unnecessary redundancies that can be eliminated from the code? I am open to suggestions but prefer to stick with what works well for me.

  await fetch(`https://restcountries.com/v2/name/${country}`)
    .then(res => res.json())
    .then(data => {
      console.log(data[0]);
    })
    .catch(err => err.message);
};

const getCountryData = async function () {
  await getCountry('portugal');
  await getCountry('ecuador');
};

getCountryData();

Appreciate your input,

javascript asynchronous async-await

Answer 1

Answer №1

Absolutely, that method is spot on. Just bear in mind that by blocking each request you're sacrificing efficiency as they will run sequentially. One of the key advantages of JavaScript lies in its asynchronous nature, so it's best to leverage this feature. By running requests concurrently, you can significantly boost the speed of your requests. Consider the following example:

// fetching data...
const getCountry = async country => {
  const res = await fetch(`https://restcountries.com/v2/name/${country}`);
  const json = res.json();
  return json;
};

const getCountryData = async countries => {
  const proms = countries.map(getCountry); // generate an array of promises
  const res = await Promise.all(proms); // wait for all promises to resolve

  // extract the first value from the resulting array
  return res.map(r => r[0]);
};

// demonstration:
getCountryData(['portugal', 'ecuador']).then(console.log);
// sequenced based on input order
getCountryData(['ecuador', 'portugal']).then(console.log);
// retrieve multiple countries swiftly
getCountryData(['mexico', 'china', 'france', 'germany', 'ecaudor']).then(console.log);

Update: It has come to my attention that Promise.all handles promise ordering automatically, eliminating the need for an additional sorting function. Nevertheless, here is the sort function in case you opt for a different approach:

myArr.sort((a, b) => 
  (countries.indexOf(a.name.toLowerCase()) > countries.indexOf(b.name.toLowerCase())) ? 1 :
  (countries.indexOf(a.name.toLowerCase()) < countries.indexOf(b.name.toLowerCase())) ? -1 :
  0
);

Answer 2

Absolutely, that method is spot on. Just bear in mind that by blocking each request you're sacrificing efficiency as they will run sequentially. One of the key advantages of JavaScript lies in its asynchronous nature, so it's best to leverage this feature. By running requests concurrently, you can significantly boost the speed of your requests. Consider the following example:

// fetching data...
const getCountry = async country => {
  const res = await fetch(`https://restcountries.com/v2/name/${country}`);
  const json = res.json();
  return json;
};

const getCountryData = async countries => {
  const proms = countries.map(getCountry); // generate an array of promises
  const res = await Promise.all(proms); // wait for all promises to resolve

  // extract the first value from the resulting array
  return res.map(r => r[0]);
};

// demonstration:
getCountryData(['portugal', 'ecuador']).then(console.log);
// sequenced based on input order
getCountryData(['ecuador', 'portugal']).then(console.log);
// retrieve multiple countries swiftly
getCountryData(['mexico', 'china', 'france', 'germany', 'ecaudor']).then(console.log);

Update: It has come to my attention that Promise.all handles promise ordering automatically, eliminating the need for an additional sorting function. Nevertheless, here is the sort function in case you opt for a different approach:

myArr.sort((a, b) => 
  (countries.indexOf(a.name.toLowerCase()) > countries.indexOf(b.name.toLowerCase())) ? 1 :
  (countries.indexOf(a.name.toLowerCase()) < countries.indexOf(b.name.toLowerCase())) ? -1 :
  0
);

Answer 3

Answer №2

Following @deceze's suggestion, I decided to take a different approach and it seems to be working smoothly: instead of using .then, I replaced them with await which makes the code much more concise. This way, I can now implement regular try and catch blocks for error handling.

// ARRANGE COUNTRIES IN SEQUENCE
const getCountry = async country => {
  try {
    const status = await fetch(`https://restcountries.com/v2/name/${country}`);
    const data = await status.json();
    renderCountry(data[0]); // Data is available. Let's Render HTML
} catch (err) {
    console.log(err.name, err.message);
  }
};

const getAllCountryData = async function () {
  await getCountry('portugal');
  await getCountry('Ecuador');
};

btn.addEventListener('click', function () {
  getAllCountryData();
});

A big thank you to everyone involved!

Answer 4

Following @deceze's suggestion, I decided to take a different approach and it seems to be working smoothly: instead of using .then, I replaced them with await which makes the code much more concise. This way, I can now implement regular try and catch blocks for error handling.

// ARRANGE COUNTRIES IN SEQUENCE
const getCountry = async country => {
  try {
    const status = await fetch(`https://restcountries.com/v2/name/${country}`);
    const data = await status.json();
    renderCountry(data[0]); // Data is available. Let's Render HTML
} catch (err) {
    console.log(err.name, err.message);
  }
};

const getAllCountryData = async function () {
  await getCountry('portugal');
  await getCountry('Ecuador');
};

btn.addEventListener('click', function () {
  getAllCountryData();
});

A big thank you to everyone involved!

Mastering Promises, Async/Await for managing the flow of execution

Answer №1

Answer №2

Similar questions

``Passing a database value from a controller to a table popup through AJAX: A step-by

Dynamically submitting a form generated within the AJAX success callback in CodeIgniter

Error: React/Express - The renderToString() function encountered an unexpected token '<'

Fetching data using Axios from a specified URL

Implementing Next.js in a live production environment

The communication between the Next.js and Node.js servers is being obstructed as the request body fails

What is the correct way to invoke a function from a different file?

What causes an object to declare itself as undefined only in the event that I attempt to access one of its properties?

Saga Redux fails to pass parameters during post requests

Sorting information in the React Native Section List

Having trouble accessing PDF files on Electron framework

Encountering a problem when trying to pass a PHP array variable to a JavaScript function

Retrieve the product IDs by selecting the checkboxes, then compile a fresh array consisting of the identified IDs

I will not be accessing the function inside the .on("click") event handler

JSON data is returned as Object Object

Transmitting PHP variable to JavaScript using Callback Method

Is the initial carousel element failing to set height to 100% upon loading?

Having trouble processing a JSON object using Jquery?

Can you please identify the TypeScript type associated with the return value of the match() method in String prototype?

A step-by-step guide on showcasing the content from a textfield onto a dynamic column chart