converting functions to async await

Question

I'm in the process of converting some functions to async await and need help to solve an error.

Before

const getRequest = (url, headers) => {
    return new Promise((resolve, reject) => {
        axios.get(url, { headers })
            .then((res) => {
                return resolve(res);
            })
            .catch((err) => {
            return reject(err);
        });
});

After

async function getRequest(url, headers) {
    return new Promise(resolve, reject) {
        try {
            const res = await axios.get(url, { headers })
                return resolve(res);
            }
        catch(err){
                return reject(err);
            };
    };
};

I'm getting an error when running the new code, any help would be appreciated.

Refer this https://stackoverflow.com/questions/51862338/how-to-use-async-await-with-react-componentdidmount-method/51862358?noredirect=1#comment90677059_51862358 — Atul, Aug 15 '18 at 20:32
`axios.get` is a already awaitable you do not need all that `new Promise` stuff — lleon, Aug 15 '18 at 20:38
The error is due to syntax, there should be function inside promise — Atul, Aug 15 '18 at 20:38
Thanks for the votes, @IIeon would like to know the issue with my answer? — Atul, Aug 15 '18 at 20:44
Possible duplicate of [How to use async await with React componentDidMount() method?](https://stackoverflow.com/questions/51862338/how-to-use-async-await-with-react-componentdidmount-method) — Atul, Aug 15 '18 at 20:50
https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it — Benjamin Gruenbaum, Aug 15 '18 at 21:19

score 3 · Answer 1 · edited Aug 15 '18 at 23:07

3

async function getRequest(url, headers) {
    const res = await axios.get(url, { headers })
    return res;
};

edited Aug 15 '18 at 23:07

Gibolt

42,564
15
187
127

answered Aug 15 '18 at 20:35

Atul

420
2
10

Pedro A · Answer 2 · 2018-08-15T21:12:21.827

First of all, your original code is badly indented, so let's fix that:

const getRequest = (url, headers) => {
    return new Promise((resolve, reject) => {
        axios.get(url, { headers })
            .then((res) => {
                return resolve(res);
            })
            .catch((err) => {
                return reject(err);
            });
});

Secondly, your original code contains a whole lot of unnecessary code because axios.get is already a promise. This shows lack of understanding on how promises work, please read this list of anti-patterns. You should just return the promise directly. Fixing that:

const getRequest = (url, headers) => {
    return axios.get(url, { headers });
});

Thirdly, converting a function to async, when the function already returns a promise, means nothing more than simply adding the async keyword itself. You do not have to do anything to the function. Final result:

const getRequest = async (url, headers) => {
    return axios.get(url, { headers });
});

@Roamer-1888 oops, you're right, of course, thanks for catching. Fixed. The anti-pattern is so bad that it twisted my mind :P — Pedro A, Aug 15 '18 at 21:13

score 0 · Answer 3 · answered Aug 15 '18 at 20:50

First of all you have got a syntax error in declaring a promise.

The getRequest function should look something like this -

async function getRequest(url, headers) {
    return new Promise((resolve, reject) => {
        try {
            const res = await axios.get(url, { headers })
            return resolve(res);
        }
        catch (err) {
            return reject(err);
        };
    });
};

Second, id axios.get(url, { headers }) is waiatable, you do not need to return a promise from the parent funtion. You can simply return await axios.get(url, { headers });

async function getRequest(url, headers) {
    return await axios.get(url, { headers });
};

Example

async function parent() {
    console.log(await child(true));
}


function child(data) {
    return new Promise((resolve, reject) => {
        if (!!data) {
            resolve("resolved!");
        } else {
            reject("rejected!");
        }
    });
}

parent();

converting functions to async await

3 Answers3