Axios HTTP calls in pipeline without nesting

Issue

I need to perform a number of HTTP calls to external API as part of the initialisation of my Node.js back-end (collect data from external API and initialize local data).
Ideally something like this

function callOne() {...}
function callTwo(input) {...}
function callThree(input) {...}

result1 = callOne();
result2 = callTwo(result1);
result3 = callThree(result2);

with each step separated from the other.

The straightforward solution with nested .then() guarantees the pipeline sequence, but doesn’t look very nice to me (poor readability, hard to debug, complicated management of errors with .catch() at each step…).
I tried to follow the async/await pattern, something like this:

...
function async callOne() {
   const promise = await axios.get(url1);
   return promise.data;
}
function async callTwo(params) {
   const promise = await axios.get(url2,params);
   return promise.data;
}
function async callThree(data) {
   const promise = await axios.get(url3,params);
   return promise.data;
}
result1 = callOne();
result2 = callTwo(result1);
result3 = callThree(result2);
console.log(result3);
...

but somehow didn’t work (.data is specified on a pending Promise, which leads to "property of undefined object"). What’s wrong with the example above?
What’s the purpose of await if it still returns a pending Promise?
How could I have the function actually returning the final value?

–Thomas

Solution

Every async function always returns a Promise. Since you don’t use await or .then() when calling the three functions, they don’t wait for each other. You should rather do it like this:

async function callApi(){
  const result1 = await axios.get(url1)
  const result2 = await axios.get(url2, result1.data)
  const result3 = await axios.get(url3, result2.data)
}

The same thing would also apply if you want to keep the functions.

result1 = await callOne();
result2 = await callTwo(result1);
result3 = await callThree(result2);

Just keep in mind: To use await keyword you need to be inside a function marked async.

Answered By – Tobias S.

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.