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](https://stackoverflow.com/a/52320988/3083470) for an explanation or [the mdn docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) — Taxel, Mar 07 '22 at 08: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, Mar 07 '22 at 09:37

score 1 · Answer 1 · answered Mar 07 '22 at 08:52

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 07 '22 at 08:52

Nicholas Barfknecht

176
6

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 Mar 07 '22 at 09:37
1

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 Mar 07 '22 at 09:47
@Suijo, if you agree with my answer please accept it. – Nicholas Barfknecht Mar 07 '22 at 10:00

score 0 · Answer 2 · answered Mar 07 '22 at 08:51

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 07 '22 at 08:51

Mir

50
5

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 Mar 07 '22 at 09:36
@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. – Mir Mar 07 '22 at 18:48

score 0 · Answer 3 · answered Mar 07 '22 at 08:59

// 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.
})

get request with multiple returns Javascript Axios

3 Answers3