axios.get always returning a Promise

Question

I found different solutions here, but none worked for me. I have this simple code:

const Element = () => {
        async function getEndData() {
            const data = (await getEnd());
            return data;
        }
}

const getEnd = async () => {
    return await axios.get('http://localhost:8080/end').then(res => res.data);
}

And it always return a Promise "pending" with inside a [[PromiseResult]] with the value i need, when i call getEndData(). I tried also to call directly getEnd() removing the then(), returning only the data, but nothing. If i print res.data in console.log, it will return the right value i need.

Yes, `async` functions always return promises. To interact with the eventual value, you need to call `.then` on the promise and put your code in the callback, or, equivalently, you need to put your code in an `async` function and `await` the promise. — Nicholas Tower, Mar 13 '22 at 11:38
`I did it, but the result is a Promise in every case.` Correct, it will always be a promise. There is no other option. The value does not exist yet, so the only thing that it's possible to return is a promise. Since axios.get returns a promise, anything that depends on that promise will also return a promise. Its promises all the way down. — Nicholas Tower, Mar 13 '22 at 14:03
Ah ok, so i can't get the Promise's result value in some way? To use this value in other functions. — Anto Arts, Mar 13 '22 at 14:47
Only `.then` and `await` can get access to the value. `To use this value in other functions.` If those functions need a guarantee that the value exists, then they must use the promise. If the functions are ok with the possibility that the value may not exist yet, then perhaps you could have some global variable that they check, but it's rare to have functions that care about a value, but only care a little bit. — Nicholas Tower, Mar 13 '22 at 14:57

score 1 · Answer 1 · answered Mar 13 '22 at 12:23

1

this should work:

const Element = () => {
        async function getEndData() {
            const data = await getEnd();
            return data;
        }
}
const getEnd = async () => {
    const response = await axios.get('http://localhost:8080/end');
    return response;
}

answered Mar 13 '22 at 12:23

walid sahli

406
3
11

Same problem, using this. If i call `getEndData()` in another function it will return a Promise with a "Object" in "PromiseResult". – Anto Arts Mar 13 '22 at 13:30
1

`If i call getEndData() in another function it will return a Promise` Yes, that's expected. In that other function, you either need to call `.then` and put your code in the callback, or you need to make that other function be an `async` function and `await` the promise. – Nicholas Tower Mar 13 '22 at 14:07

score 1 · Answer 2 · answered Mar 13 '22 at 13:51

1

I'm not sure you are doing it the right way. You can try this:

const Element = () => {
        return async function getEndData() {
            const data = await getEnd();
            return data;
        }
}

const getEnd = () => {
    return new Promise((resolve, reject) => {
     axios.get('http://localhost:8080/end')
     .then(res => {
      resolve(res.data)
     })
     .catch(err => {
         reject(err);
      })
    }) 
}

Also, What is the use of element function if you are not returning anything.

answered Mar 13 '22 at 13:51

Apoorva Chikara

8,277
3
20
35

It works only in console.log, following your code. If i want to create a string with that data, i will have "[object Promise]". Element, here, is a simplified function, in my real code there is a return and other things. – Anto Arts Mar 13 '22 at 15:23
1

Can you add the full file and the code where it logs on the console. – Apoorva Chikara Mar 13 '22 at 15:48

Smriti Shikha · Answer 3 · 2022-03-14T07:26:48.423

your getEndData() in returning a promise . add await or then where ever you are receiving the getEndData() response .

// const Element = () => {
    async function getEndData() {
        const data = (await getEnd());
        return data;
    }
// }

const getEnd = async () => {
    return await axios.get('http://localhost:8080/end').then(res => res);
}



async function callEndData(){
    let x = await getEndData()
    console.log(x)
}
callEndData()

since it is returning promise and you are not using await or then it is showing promise pending

why do you need Element() ?

In case you need to call ELement function and also wants the data part of response you can try like this .


const Element = async() => {
    async function getEndData() {
       return await getEnd();
    }

    let fromEndData  = await getEndData()
    return fromEndData 
}

const getEnd = async () => {
    return axios.get('http://localhost:8080/end').then(res => {
       return res.data
    });
}



async function callEndData(){
    let x = await Element()
    console.log(x)
}
callEndData()

in console.log(x) i am getting the value being passed .

I have a return for "Element" in my real code, with some code. The problem is the same, in console.log(), with your code, now i will get the value, but i can't assign it to a string, or a var, because the result will be "[object Promise]" or a "Promise". — Anto Arts, Mar 13 '22 at 15:26
Printing your data.data the result is the exact value i want, but if i return data.data, the value is "[object Promise]". — Anto Arts, Mar 13 '22 at 15:35

axios.get always returning a Promise

3 Answers3