为什么axios数据存储在变量中时未定义？

Question

我正在处理以下代码。这是在 Vue 应用程序上实现的，并使用了许多方法，每个方法都返回一个 Axios 承诺。我试图链接这些，所以当提交新评论时，服务器会检查电影是否已经存在。如果没有，它会创建一部新电影。然后它应该使用带有 movieId 参数的 postReview 创建一个新评论。需要 movieId 才能创建新评论。 checkMovieExists() 和 postMovie() 方法都返回一个 movieId 作为响应。

问题是当我将 x.data() 或 y.data() 记录到控制台时，movieId 显示正确。但是，如果我将 x.data 或 y.data 分配给 movieId，则它是未定义的。这意味着我不能将其用作发布电影的参数。

submit() {
      let movieId = 0;
      this.checkMovieExists(this.movie.imdb_id)
        .then((x) => {
          console.log(x.data);
          if (x.data == 404) {
            this.postMovie(this.movie.imdb_id, this.movie.original_title).then(
              (y) => {
                console.log(y.data); //Displays correctly
                movieId = y.data;
                console.log(movieId); //Displays as undefined
              }
            );
          } else {
            movieId = x.data;
          }
        })
        .then(this.postReview(movieId));
    },

（顺便说一句，我知道电影 id 为 404 的错误。这是我的下一个任务！）

Answer 1

我建议你远离回调地狱并使用 async/await。

async submit() {
  let movieId = 0;
  const checkMovieResponse = await this.checkMovieExists(this.movie.imdb_id);
  if (checkMovieResponse.data == 404) {
    const postMovieResponse = await this.postMovie(this.movie.imdb_id, this.movie.original_title);
    movieId = postMovieResponse.data;
  }
  else {
    movieId = checkMovieResponse.data;
  }
  await this.postReview(movieId);
}

我的解决方案应该可以解决您的问题（您的代码存在异步问题）。
您的 postMovie 回调是在您的 checkMovie 回调之后执行的（在您的 postReview 方法中导致“未定义”（通过阅读您的代码应该为 0）movieId）。
如果由于某些原因，您不能使用 async/await，这里是您的“固定”代码：

submit() {
  this.checkMovieExists(this.movie.imdb_id)
    .then((x) => {
      if (x.data == 404) {
        this.postMovie(this.movie.imdb_id, this.movie.original_title).then(
          (y) => {
            this.postReview(y.data)
          }
        );
      } else {
        this.postReview(x.data);
      }
    });
}

顺便说一句，如果您的 Axios 响应中的数据是一个数字（作为您的标识符），我建议您使用 === 运算符而不是 ==。
祝你的项目好运！