async function in react component isn't working when triggered from the axios request

Question

network.services.js

axiosCall = (axiosURL) => {
        // const axiosURL = "https://api.github.com/user"
        axios.get(axiosURL, {
            headers: {
              'Authorization': `qwdvryjutmnevw`,
            }
        }).then((res) => {
            console.log(res.data);
            return res.data;
        }).catch((error) => {
            throw error.message;
            // console.error(error);
            // toast.error(error.message);
        })
    }

component.js

const getData = async () => {
            const asyncExample = async () => {
                const result = await networkServices.axiosCall("/api/v1/calendars");
                
                const responseData = await result;
                console.log(responseData);
                return responseData;
            }

            const data = asyncExample()

            data.then(function(result) {
                console.log(result); // "Some User token"
            })
        }

Trying to get data from service to my component in const result, console form service is consoling data but component is always returning undefined instead of data from the service file. SetTimeout function is also not working in component.

try using await in "const data= await asyncExample()" since it is the code waiting for the response — Naveenkumar M, Nov 15 '21 at 16:06
Does this answer your question? [How to return the response from an asynchronous call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — Brian Thompson, Nov 15 '21 at 16:11
I advise you to take a look at documentation about Promises: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise — Fiodorov Andrei, Nov 15 '21 at 16:28
The `axiosCall` function isn't returning the `axios` promise. Add a `return` statement before calling `axios`, i.e. `return axios.get(...)`. — juliomalves, Nov 15 '21 at 22:52
Can you provide the rest of the component? As @juliomalves said you may not be returning values, but even if you fix it there can be problems with the way you display the values — Giorgio Tempesta, Nov 17 '21 at 08:28

score 0 · Answer 1 · answered Nov 15 '21 at 16:45

You have many mistakes. I advise you to take a look at documentation about Promises

First one:

You don't return data in axiosCall A way to return data:

axiosCall = (axiosURL) => new Promise((resolve, reject) => {
    axios.get(axiosURL, {
        headers: {
            'Authorization': `yourTokenHere`,
        }
    }).then((res) => {
        // return a response data
        resolve(res.data);
    }).catch((error) => {
        // return only error message
        reject(error.message);
    })
})

to use axiosCall:

try {
                                 // don't forgot to configure axios with base url
    const data = await axiosCall('/api/v1/calendars');

    // do something with your data

} catch (e) {

    // do something with error message
    console.log(e);
}

Second:

Your make mistakes when call async function

Look at this example:

const getData = () => {
    networkServices
        .axiosCall("/api/v1/calendars")
        .then(function(result) {
            // when promise resolve
            console.log(result);
        })
        .catch(error => {
            // when promise reject
            console.log(error)
        })
}

async function in react component isn't working when triggered from the axios request

1 Answers1