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

Posted 2023-02-16

【中文标题】为啥axios数据存储在变量中时未定义？

【英文标题】：Why is Axios data undefined when stored in a variable?为什么axios数据存储在变量中时未定义？

【发布时间】：2021-11-14 23:03:09

【问题描述】：

我正在处理以下代码。这是在 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 的错误。这是我的下一个任务！）

【参考方案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 响应中的数据是一个数字（作为您的标识符），我建议您使用 === 运算符而不是 ==。 祝你的项目好运！

【讨论】：

谢谢你——这很有帮助！我会试试看的！