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