how to return response of axios in return

Question

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.

Answer 1

console.log won't wait for the function to fully complete before logging it. This means that you will have to make wallet.registerUser asynchronous, there are two main ways to do this:

1. Callback - this is when you pass a function as a parameter into your existing function which will be executed once your axios call has finished. Here is how it would work with your code:

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

2. Promise - The easiest way to do this is to put async in front of your function name. This will make anything returned from the function return in the form of a promise. This is how it would work in your code:

    wallet.registerUser=async 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);   }) }  wallet.registerUser(data).then(function(response) {   console.log(response); }); 

Here is some more information on asynchronous functions:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

Answer 2

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