Function returning undefined

Question

I have a function that calls an API and returns some data:

async function getDataAxios(){
        await axios.get("http://localhost:8080/cards/1").then(response => {
                console.log("RESP: ", response.data[0])
                return response
            })
            .catch(err => {
            console.log("Error: ", err)
            return err
        })
}

When I log response.data[0] inside getDataAxios() the expected data is present. But when I try and return the data to my calling function and log the return data it logs undefined:

getDataAxios().then(r => console.log(r))

I have also tried the following:

 const resp = getDataAxios().then(resp => console.log("Data 2: ", resp)).catch(
    err => {
        console.log("An error has occurred: ", err)
        return err;
    }
  )
    console.log(resp)

Full code:

function App() {
    getDataAxios().then(r => console.log(r))
}

async function getDataAxios(){
        await axios.get("http://localhost:8080/cards/1").then(response => {
                console.log("RESP: ", response.data[0])
                return response
            })
            .catch(err => {
            console.log("Error: ", err)
            return err
        })
}

export default App;

Your getDataAxios does not return anything. No need for it to be async, just do return axios.get(...).. — Gabriele Petrioli
– Gabriele Petrioli, Commented Dec 17, 2022 at 22:54
That does work, but i'm not really sure why. How is doing return axios.get("http://localhost:8080/cards/1") different from axios.get("http://localhost:8080/cards/1").then(resp => { console.log("RESP: ", resp.data[0]) return resp }) — HLT
– HLT, Commented Dec 17, 2022 at 23:02
The latter returns the value from the then callback, not from getDataAxios. The former will return the entire promise from getDataAxios, allowing it to be used outside. — FZs
– FZs, Commented Dec 18, 2022 at 0:29

Gabriele Petrioli · Accepted Answer · 2022-12-18 08:32:40Z

1

Just adding here some more details, since the comment was not very detailed.

You have

async function getDataAxios(){
  await axios.get(...).then(...).catch(...);
}

and

function App() {
  getDataAxios().then(r => console.log(r))
}

The getDataAxios method does not return anything. The then inside it does return a value, but that is not returned from the actual getDataAxios function.

Nothing wrong with that on its own, if the then code is all you wanted to perform.

But you then call it in the App and use then on it, getDataAxios().then(r => console.log(r)). The r here will contain whatever was returned from the getDataAxios which is nothing, so the r will be undefined.

Adding the return to the getDataAxios will return the promise. And since the return value type of axios is a promise you do not have to specify async, nor await for it.

So you can use

function getDataAxios(){
  return axios.get(...).then(...).catch(...);
}

and now you can use it as you already do, as

function App() {
  getDataAxios().then(r => console.log(r))
}

answered Dec 18, 2022 at 8:32

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

2 Comments

HLT Over a year ago

Thanks for the reply, but I am then unable to use the data returned from the getDataAxios() outside of the then(). If I try and get the assign the return value to a variable it returns a promise: const z = getDataAxios().then(r => console.log(r)) console.log(z)

Gabriele Petrioli Over a year ago

@HLT for that you will have to return the r and the outside code will have to await the getDataAxios. So somthing like const z = await getDataAxios().then(r => { console.log(r); return r; }); console.log(z);

Samanja Cartagena · Accepted Answer · 2022-12-17 23:19:52Z

0

Turn the response into a constant and than store data in it and than return it. Do this instead.

async function getDataAxios(){
    await axios.get("http://localhost:8080/cards/1").then(response => {
            console.log("RESP: ", response.data[0])
            const response = response.data[0]
            return response
        })
        .catch(err => {
        console.log("Error: ", err)
        return err
    })
  }

Or you can do this

       async function getDataAxios(){
     await axios.get("http://localhost:8080/cards/1").then(response => {
            console.log("RESP: ", response.data[0])
            return response.data[0]
        })
        .catch(err => {
        console.log("Error: ", err)
        return err
    })
   }

answered Dec 17, 2022 at 23:19

Samanja Cartagena

1481 silver badge11 bronze badges

1 Comment

danh Over a year ago

Both of these functions return undefined.

Collectives™ on Stack Overflow

Function returning undefined

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related