get request with multiple returns Javascript Axios

Question

I was following a tutorial when I came across this bit of code:

export function fetchUserData () {
    return axios.get('https://randomuser.me/api')
    .then(res => {
        return res;
    })
    .catch(err => {
        console.error(err);
    })
}

When this function is called with:

    const getUserData = async () => {
        let ud = await fetchUserData()
        setUserData(ud);
        console.log(ud);
    }

I get the data I want but I am confused with how the first function works. If I remove return from return axios.get('https://randomuser.me/api') it no longer works, and is parameter of the callback function of .then always the return of the previous function?

I assume its because of some of javascript short hand I'm not aware of so could someone explain to me? Thank you.

This JS feature is called Promises. check out this answer for an explanation or the mdn docs — Taxel
– Taxel, Commented Mar 7, 2022 at 8:46
I guess I'm wondering why ud from the second function gets the data from the callback and not the promise object from the first return statement — Sujio
– Sujio, Commented Mar 7, 2022 at 9:37

Nicholas Barfknecht · Accepted Answer · 2022-03-07 08:52:13Z

1

ES6 introduced the idea of a Promise, which is made up of the producing and consuming code. Producing code does something and takes time, like retrieving information from an external service. The consuming code returns the result of the producing code. In this case axios.get is the producing code, whereas .then is the consuming code. .then is the pattern Javascript uses to resolve promises and produce a result.

answered Mar 7, 2022 at 8:52

Nicholas Barfknecht

1767 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sujio Over a year ago

I guess I'm wondering why ud from the second function gets the data from the callback and not the promise object from the first return statement

Nicholas Barfknecht Over a year ago

You are getting the data because you are resolving the Promise by using .then. It essentially waits for the task to be completed before returning the information. If you had to only return axios.get without resolving, then ud would be a Promise object.

Nicholas Barfknecht Over a year ago

@Suijo, if you agree with my answer please accept it.

Mir · Accepted Answer · 2022-03-07 08:51:09Z

0

Axios is a promise based HTTP client. You need return statement here because axios request essentially returns a promise. Also, you can use .then only for promise based return calls.

Look more here - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

answered Mar 7, 2022 at 8:51

Mir

505 bronze badges

2 Comments

Sujio Over a year ago

I guess I'm wondering why ud from the second function gets the data from the callback and not the promise object from the first return statement

Mir Over a year ago

@Sujio That is because you are resolving the promise and then returning data from the then or catch block. If you simple use - return axios.get('https://randomuser.me/api') in the first function, then it will return promise.

Hafid Denguir · Accepted Answer · 2022-03-07 08:59:33Z

0

// set requests
const reqOne = axios.get(endpoint);
const reqTwo = axios.get(endpoint);

axios.all([reqOne, reqTwo]).then(axios.spread((...responses) => {
  const responseOne = responses[0]
  const responseTwo = responses[1]
})).catch(errors => {
  // react on errors.
})

answered Mar 7, 2022 at 8:59

Hafid Denguir

9628 silver badges12 bronze badges

Collectives™ on Stack Overflow

get request with multiple returns Javascript Axios

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related