为什么 Axios 数据存储在变量中时未定义?
Why is Axios data undefined when stored in a variable?
我正在处理以下代码。这是在 Vue 应用程序上实现的,并使用了许多方法,每个方法 return 都有一个 Axios 承诺。我试图链接这些,以便在提交新评论时,服务器检查电影是否已经存在。如果没有,它会创建一部新电影。然后它应该使用参数为 movieId 的 postReview 创建一个新评论。创建新评论需要 movieId。方法 checkMovieExists() 和 postMovie() 都 return 一个 movieId 作为响应。
问题是当我将 x.data() 或 y.data() 登录到控制台时,movieId 正确显示。但是,如果我将 x.data 或 y.data 分配给 movieId,则它是未定义的。这意味着我不能将它用作 post 电影的参数。
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 的错误。这是我的下一个任务!)
我建议您远离回调地狱并使用 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 响应中的数据是一个数字(作为您的标识符),我建议您使用 === 运算符而不是 ==。
祝你的项目好运!
我正在处理以下代码。这是在 Vue 应用程序上实现的,并使用了许多方法,每个方法 return 都有一个 Axios 承诺。我试图链接这些,以便在提交新评论时,服务器检查电影是否已经存在。如果没有,它会创建一部新电影。然后它应该使用参数为 movieId 的 postReview 创建一个新评论。创建新评论需要 movieId。方法 checkMovieExists() 和 postMovie() 都 return 一个 movieId 作为响应。
问题是当我将 x.data() 或 y.data() 登录到控制台时,movieId 正确显示。但是,如果我将 x.data 或 y.data 分配给 movieId,则它是未定义的。这意味着我不能将它用作 post 电影的参数。
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 的错误。这是我的下一个任务!)
我建议您远离回调地狱并使用 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 响应中的数据是一个数字(作为您的标识符),我建议您使用 === 运算符而不是 ==。
祝你的项目好运!