how to return response of axios in return

Viewed 82833

I want to return the response of axios but always the response that returned is undefined:

wallet.registerUser=function(data){
axios.post('http://localhost:8080/register',{
phone:data.phone,
password:data.password,
email:data.email
}).then(response =>{
  return response.data.message;
  console.log(response.data.message);
}).catch(err =>{
  console.log(err);
})
}

console.log(wallet.registerUser(data));

The console always logs as undefined. Is their any way returning this response.

6 Answers

You can use Promises:

I am new to react so you can give suggestions to me to improve my code.

For example I want to call checkVerified() function which is in other file:

Utils.js

export function checkVerified(val, values) {
    return new Promise((resolve, reject) => {
        axios
            .get(`${getInitialServerUrl}/core/check_verified/${val}/`)
            .then(res => {
                resolve(res)
            })
            .catch(err => reject(err))
    })
}

And I am calling this function from an another file:

someFile.js

const handleSubmit = e => {
        e.preventDefault();
        checkVerified(values.mobile, props)
            .then(res => {
               console.log(res);
         })
        .catch(err => console.log(err.response))
    }

You will need to wrap the call to axios in an async function. You can then return the response as you normally would.

As long as you call the wrapper method with await, you will be fine. Unfortunately, in order to call it with await, the calling method will also have to be marked async, and so on and so on, until every function in your application must be marked async and you will need to call ALL of your functions with await.

This is the magic and the beauty of the async / await keywords - utter garbage. You may see examples that create an async lambda to wrap the await axios, in an attempt to not have to refactor their entire app, but its not going to work.

So, the wrapper looks like the following...

async public post(URL, data) {

axios.post(URL, data)
    .then( (result) => {
        return result;
    });

}

If you are using typescript, that will add several more frustrating issues, such as how to cast an any to the type you want to return. I might suggest union types.

Anyway, good luck!

P.S. axios won't work if your environment requires using a proxy. In that case, and probably all others, use node-fetch - you will be up and running with node-fetch in a day. Axios will have you scratching your head a week later, wondering why its not working.

The main point here is to access the promise value. For that, we just need to log the response in the below format.

static getSearchAPI = () => {
return axios.post(URl);
}

getRestaurents() {
Helpers.getSearchAPI().then(function (response) {
  console.log(response.data);
})}

I would implement the axios call like this with a compact syntax:

  myAxiosCall = async () => {
    return await axios.get('/the-url');
  }

It can be called like this:

myAxiosCall.then(data) {
   // Process the axios response
}

I used async and await methods and wrapped my axios call and function calling the axios call in these methods. I returned axios value as well as returned response object within it. I have shared the snippet in the below link.

Returning data from Axios API

Related