CODEWITHSUNDEEP
javascript
HLT
HLT

Reputation: 607

Function returning undefined

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;

Upvotes: 1

Views: 1115

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196276

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))
}

Upvotes: 1

Samanja Cartagena
Samanja Cartagena

Reputation: 148

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
    })
   }

Upvotes: 0

Related Questions