Axios put return undefined [React JS Axios]-CodePudding

Hi all im doing an axios put to update my data. However im getting an undefined response. Thank you in advance

function that call the Axios:

export function exUpdateMovie(movie) {
 
  Axios.put(baseURL   "/api/update", {
    movieName: movie.movieName,
    movieReview: movie.movieReview,
    id: movie.id,
  })
    .then((response) => {
      // console.log(response);
      return response;
    })

    .catch((e) => {
      console.log(e);
      return e;
    });
}

function in app.js that calls the exUpdateMovie(movie) function:

const handleUpdateMovie = (movie) => {
    console.log("UpdateMovie Passed!");

    try {
      const res = exUpdateMovie(movie);   
      alert(res?.data);
    } catch (error) {
      console.log(error);
    }
  };

Output when I alert my response is: undefined

SETTLE:

need to add async and await at the handleUpdateMovie
need to return the Axios by doing return Axios.put()

Cheers mate for helping me. Thanks alot

CodePudding user response：

Because exUpdateMovie doesn't return anything. Return the Promise:

export function exUpdateMovie(movie) {

  return Axios.put(/* all your Axios code */);

}

Then when consuming the result, treat it as a Promise:

exUpdateMovie(movie).then(res => {
  alert(res?.data);
});

CodePudding user response：

Yes because your api call is returning a promise where you need to wait until the promise execution completes so make your function async and wrap the API call with await.


export async function exUpdateMovie(movie) {
  const result = await  Axios.put(baseURL   "/api/update", {
    movieName: movie.movieName,
    movieReview: movie.movieReview,
    id: movie.id,
  })
    return result
}

const handleUpdateMovie = async (movie) => {
    console.log("UpdateMovie Passed!");

    try {
      const res = await exUpdateMovie(movie);   
      alert(res?.data);
    } catch (error) {
      console.log(error);
    }
  };

CodePudding user response：

please put return outside of axios because when you put return inside functions then or catch it return from there function and outside the axios there is no return you can do it like the below :

export function exUpdateMovie(movie) {
  var resultInfo = {};
  Axios.put(baseURL   "/api/update", {
    movieName: movie.movieName,
    movieReview: movie.movieReview,
    id: movie.id,
  })
    .then((response) => {
      // console.log(response);
      resultInfo  = response;
    })

    .catch((e) => {
      console.log(e);
      resultInfo  = e;
    });

   return resultInfo;
}

or you can use this code :

export function async exUpdateMovie(movie) {
      var resultInfo =  await Axios.put(baseURL   "/api/update", {
        movieName: movie.movieName,
        movieReview: movie.movieReview,
        id: movie.id,
      }) 

       return resultInfo;
    }