Why does Axios (with async/await) return a full promise?

Question

I have a problem with async/await. Here is my code:

import axios from 'axios'

export default async function getRequestedData (requestAddress, params) {
   return await axios.get(requestAddress, {params: params})
}

But instead of the result it returns a full promise, so the data is heavily nested inside a promise:

A client to get the requested data must invoke the `async` function so s/he has to await for the response `async func() { [...] const data = await getRequestedData(requestAddress, params); // processing 'data' - js object .... }` — gvlax, Sep 21 '18 at 11:47

score 8 · Accepted Answer · answered Jul 25 '17 at 01:57

Like Ha Ja said, I think you still need to resolve the promise. If you just return the await you're going to get a promise.

const fs = require ('fs')

function getText () {

    return new Promise( (resolve, reject) => {

        fs.readFile('./foo.txt', 'utf8', (err, data) => {
            if (err) {
                reject(err)
            }
                resolve(data)
            })
        })
}

async function output () {
    try {
        let result = await getText()
        console.log("inside try: ", result)
        return result
    }
    catch (err){
        console.log(err)
    }
}

console.log("outside: ", output())
output().then( result => console.log("after then: ", result))

// outside:  Promise { <pending> }
// inside try:  foo text
// inside try:  foo text
// after then:  foo text

score 3 · Answer 2 · answered Jul 07 '17 at 12:23

3

You have to return the data:

const response = await axios.get(requestAddress, {params: params})
return response.data;

answered Jul 07 '17 at 12:23

hjrshng

1,675
3
17
30

1

Still a Promise but with diffrence [[PromiseValue]] has only content of data object – Hellhiem Jul 07 '17 at 12:26
How about ```return await axios.get(requestAddress, {params: params}).then(response => response.data)``` ? – hjrshng Jul 07 '17 at 12:30
The same result as the last one – Hellhiem Jul 07 '17 at 12:34
Could you share how you called the function ```getRequestedData```? – hjrshng Jul 07 '17 at 14:17
This is a great response .. what does it look like, taking into account the reject block (I mean `catch`)? – roberto tomás Sep 07 '17 at 12:29
@robertotomás put those 2 lines inside a try block `try { let response = await axios.get(API_URL, API_PARAMS); return response.data; } catch (error) { console.log(error); }` – pmiguelpinto90 Jan 18 '18 at 10:57

score 2 · Answer 3 · answered Dec 08 '19 at 19:03

2

One liner:

return (await axios.get(url)).data;

answered Dec 08 '19 at 19:03

Victor

349
4
7

score 0 · Answer 4 · answered Jul 20 '18 at 16:57

In React component you can do with this trick:

function InitProduct() {
    // Get your product from database
    var productId = 'abc';
    axios.get('/api/products/' + productId).then(response => {
        $('.' + productId).text(response.data.ProductTitle);
    });

    return (<div className={productId}></div>)
}

export class TestNow extends Component {
    render() {
        return (
            <div>
                {InitProduct()}
            </div>
        )
    }
}

score 0 · Answer 5 · edited Jan 08 '22 at 13:07

An async function will always wrap what it returns in a promise so you should chain the caller with a then() method thereby resolving that promise for example: getRequestedData (requestAddress, params).then ( (data) => { ...do something... });

Or you could await the call to getRequestedData function, in which case the data inside the returned promise would be extracted for example:

let requestedData = await getRequestedData (requestAddress, params):

Why does Axios (with async/await) return a full promise?

5 Answers5