为什么在Vue中Axios返回的数据赋值给变量后显示为undefined？

核心问题 #

• 异步时序错误：你在.then()中直接写this.postReview(movieId)属于同步执行，会在submit函数触发时立刻调用，此时前面的接口请求还没返回，movieId还没被赋值
• 嵌套Promise未返回：postMovie是内部异步请求，你没有把它返回给外层Promise链，导致外层then不会等待postMovie执行完成就提前执行
• 用外部变量承接异步返回值的写法本身就不符合Promise的执行逻辑，异步赋值的结果无法在同步代码中拿到

修复方式1：保持Promise链式写法 #

submit() {
  this.checkMovieExists(this.movie.imdb_id)
    .then((x) => {
      console.log(x.data);
      if (x.data == 404) {
        // 返回内部Promise，让外层链等待执行
        return this.postMovie(this.movie.imdb_id, this.movie.original_title)
          .then(y => y.data)
      }
      // 直接返回已存在的movieId
      return x.data
    })
    // 传入函数，等前面的Promise完成后再执行postReview
    .then(movieId => this.postReview(movieId))
}

修复方式2：用async/await简化（更推荐，可读性更高） #

async submit() {
  // 等待检查电影是否存在的接口返回
  const checkRes = await this.checkMovieExists(this.movie.imdb_id)
  console.log(checkRes.data)
  let movieId
  if (checkRes.data == 404) {
    // 电影不存在则先新建电影，等待接口返回
    const postRes = await this.postMovie(this.movie.imdb_id, this.movie.original_title)
    console.log(postRes.data)
    movieId = postRes.data
  } else {
    movieId = checkRes.data
  }
  // 最后调用创建影评接口
  await this.postReview(movieId)
}

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