React JS中Axios put请求返回undefined问题排查与修复

问题复现 #

在React项目中使用Axios发起PUT请求更新数据时，调用封装的请求方法拿到的响应结果为undefined，执行alert打印响应时输出 undefined。

涉及的错误代码如下：
封装的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;
    });
}

业务层调用逻辑：

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

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

错误原因 #

• 封装的exUpdateMovie函数没有返回Axios请求生成的Promise实例，函数默认返回值为undefined
• 调用异步请求方法时没有使用async/await处理异步逻辑，代码不会等待请求完成就直接执行后续取值操作，拿不到实际响应结果

修复步骤 #

1. 修改封装的请求函数，在Axios.put()前添加return，返回请求对应的Promise实例：

export function exUpdateMovie(movie) {
  // 新增return，返回Promise实例供外层调用
  return Axios.put(baseURL + "/api/update", {
    movieName: movie.movieName,
    movieReview: movie.movieReview,
    id: movie.id,
  })
    .then((response) => {
      return response;
    })
    .catch((e) => {
      console.log(e);
      return e;
    });
}

2. 修改业务层调用函数，添加async/await关键字等待异步请求返回结果：

// 函数前添加async标记为异步函数
const handleUpdateMovie = async (movie) => {
    console.log("UpdateMovie Passed!");

    try {
      // 调用请求方法前加await，等待请求完成后再赋值
      const res = await exUpdateMovie(movie);   
      alert(res?.data);
    } catch (error) {
      console.log(error);
    }
  };

修改完成后即可正常获取接口返回的响应数据。

内容的提问来源于stack exchange，提问作者Nazri AMZ