Axios - Consuming Get Request Returns Promise Object

Hi, Having some difficulty consuming the data from this Axios get request…

I am learning Axios get requests and having a little trouble, wonder if anyone would be kind enough to help?

As per the below, my get request returns a Promise object as fulfilled, with the required data.

I want it to simple return the data and not the Promise object.

How do I get this done? I tried with .then((resp) => { return resp; } ) but that made no difference…

@adamrichardturner198 You are trying to use the data result synchronously but you can’t. Promise function results always must be consumed calling the .then(). You cannot access the result of the promise . You have to wait for it, then the promise will pass it to your callback:

When using async / await, the async function will always return a promise. In your code, whoever is the final user of Cases() will need to wait for and consume the data as a promise if the data itself is the result of an asynchronous activity.

With that being said there are few issues with your example. The key one is that you are executing main() twice. Once with the .catch expression. This result of main is not saved anywhere. Then you are doing a second main() call when you return. This second call may fail and throw an error that you are not catching as the await will always throw if the promise rejects.

I suggest you use a try/catch inside main where you call the await in a more standard way to handle the error. Here is a simplified version of your code with my suggestion. Note that Cases doesn’t need to be an async function as each individual async function is already handling its own await scenarios:

const Cases = () => {

  //axios variables

  const getData = async (url) => {
     const data = await axiosGet(url);
     //if statement checking response code
     return data;
  }

  const main = async () => {
    try{
      const result = await getData("URL");
      return result;

    }catch(err){
      console.error(err);
      process.exitCode = 1;
    }
  }
  
  return main();
}

Cases().then(output => console.log(output));

Yet, given that the user of Cases will still have to consume the data as a promise, assuming this is all your code needs to do, you can simplify and get rid of the whole main function which is really just a pass through of getData(). Like this:

const Cases = () => {

  const axiosEndPoint = "URL"

  const getData = async (url) => {
    try{
      const data = await axiosGet(axiosEndPoint);
      //if statement checking response code
      return data;

    }catch(err){
      console.error(err);
      process.exitCode = 1;
    }
  }

  return getData(axiosEndPoint);
}

Cases().then(output => console.log(output));

For my own learning, and to help you visualize better what is going on, I created the following version of your flow printing out console statements at each step. Running this will help you see things from the perspective of the caller of your Cases() module.

I mocked the axios API call as a promise that takes just 1ms to resolve.

function axiosGet(x) { console.log("Begin axiosGet") return new Promise(resolve => { setTimeout(() => { console.log("axios Promise Resolves") resolve("DATA FROM AXIOS"); }, 1); }); } const Cases = () => { console.log("Begin Cases") //axios variables const getData = async (url) => { console.log("Begin getData") const data = await axiosGet(url); //if statement checking response code console.log("Finish getData") return data; } const main = async () => { console.log("Begin main") try{ const result = await getData("URL"); console.log("Finish main") return result; }catch(err){ console.error(err); process.exitCode = 1; } } return main(); } console.log("##Code Before Cases is Called##") Cases().then(output => console.log("Cases promise resolves with data: " + output)); console.log("##Code After Cases is Called##")

The result is this one:

##Code Before Cases is Called##
Begin Cases
Begin main
Begin getData
Begin axiosGet
##Code After Cases is Called##
axios Promise Resolves
Finish getData
Finish main
Cases promise resolves with data: DATA FROM AXIOS

Note that when the async function encounters the await. The execution of that function block is effectively paused until the promise is resolved. But the code after the function block continues executing!
So the code past the line of the consumer of your module has long kept executing by the time your module gets all the data and finishes execution.

If the code using your module depends on this data to continue execution then it itself must also handle the await of data respectively. In the case of web development there are usually many other things that can continue while this data is received (user input of the browser, refresh of the screen, other parts of the website updating, handling other events, etc). Same in other contexts like node.js and server code.

If the code using your data can’t function without the data from your module (like in a script). Then your module should not be coded to run asynchronously. The full execution should pause for each step to finish properly.