What is the right way to handle nested async calls using axios

Question

Ok, so I have the following problem. I have an api that in order to display the appropiate data to the front end I need to make three calls. The first call produces a number that the second call needs to retrieve the information necessary to access the data on the third call. The way I worked my way around this goes as follows:

const nastyAsyncFunc = () => {

  //First call responds with necessary parameter for second call
  
  axios.get("/api/endpoint1").then((response) => {
    const endpoint1Data = response.data;
    
    // Second call takes first parameter and produces second parameter as a response to access third call
    
    axios.get(`/api/${endpoint1Data}/endpoint2`).then((response) => {
      const endpoint2Data = response.data;
      
      // With second response we can access third response data.
      
      axios.get(`/api/${endpoint2Data}/endpoint3`).then((response) => {
        const finalResponse = response.data;
        return finalResponse;
      });
    });
  });
};

This approach gets me the data that I need but as you can see it's hellish and it makes error handling a pain in the neck, to put it mildly. Have any of you encountered such a call and what was your approach to make it cleaner and easier to debug? as well as what is the standard approach in which to handle such requests. Thank you all in advance.

Eric · Accepted Answer · 2020-07-13 20:54:02Z

2

There are four solutions to callback hell, more info here nested callbacks

Write comments
Split functions into smaller functions
Using Promises
Using Async/await

Example:

const makeBurger = async () => {
  const [beef, buns] = await Promise.all(getBeef, getBuns);
  const cookedBeef = await cookBeef(beef);
  const burger = await putBeefBetweenBuns(cookedBeef, buns);
  return burger;
};

// Make and serve burger
makeBurger().then(serve);

answered Jul 13, 2020 at 20:54

Eric

1,3771 gold badge11 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali Bigdeli · Accepted Answer · 2020-07-24 20:25:11Z

1

you can use await to handle axios promisses, in your sample code you can handle code with :

const endPoint1Reponse= await axios.get("/api/endpoint1");
const apiResponse = await axios.get(`/api/${endpoint1Data}/endpoint2`); 
// ...

obviously this code is cleaner than your code, beside this you can use try/catch block with async function and await operators

for more information see MDN documentation

edited Jul 24, 2020 at 20:25

answered Jul 13, 2020 at 20:47

Ali Bigdeli

1,4053 gold badges18 silver badges36 bronze badges

3 Comments

Caliman Over a year ago

Gave this a spin....beautiful, almost brought a tear to my eye. Small follow up, I wrapped this in a try/catch block as you suggested and my other elementary question is. When any of those calls fail, my catch will throw an error associated with that specific call and my function will stop, correct?

Ali Bigdeli Over a year ago

@Caliman yes exactly catch connection errors is the beautiful part, but don't forget to check browser compatibility in mentioned MDN link,,

Caliman Over a year ago

oh my goodness, now there are real tears in my eyes :). Thank you so much, my man.

Collectives™ on Stack Overflow

What is the right way to handle nested async calls using axios

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related