英文:
Javascript promise.all axios request not working correctly
问题
我正在尝试使用以下代码进行多个axios GET调用：
console.log("getting here");
const promises = Data?.stuff.map(async (id: any) => {
axios.get('http://127.0.0.1:8080/api/v1/stuff/' + id)
.then(response => {
console.log(response.data);
return response.data;
});
const tempLesson: any = await Promise.all(promises);
console.log("never getting here");
});
但它直到最后才执行。问题是什么？
英文:
I am trying to make a bunch of axios get calls with this code:
console.log("getting here")
const promises = Data?.stuff.map(async(id: any) => {
axios.get('http://127.0.0.1:8080/api/v1/stuff/' + id)
.then(response => {
console.log(response.data)
return response.data;
});
const tempLesson: any = await Promise.all(promises);
console.log("never getting here")
but it does not execute until the end. Whats the problem?
答案1
得分: 0
Your code are missing return statement and closing brackets
Your previous code should not compile. I don't know how the first console.log can run.
console.log("getting here")
const promises = Data?.stuff.map((id: any) => { // Removed async
// Missing return statement
return axios.get('http://127.0.0.1:8080/api/v1/stuff/' + id)
.then(response => {
console.log(response.data)
return response.data;
})
}) // Missing }) here
const tempLesson: any = await Promise.all(promises);
console.log("getting here")
英文:
Your code are missing return statement and closing brackets
Your previous code should not compile. I don't know how the first console.log can run.
console.log("getting here")
const promises = Data?.stuff.map((id: any) => { // Removed async
// Missing return statement
return axios.get('http://127.0.0.1:8080/api/v1/stuff/' + id)
.then(response => {
console.log(response.data)
return response.data;
})
}) // Missing }) here
const tempLesson: any = await Promise.all(promises);
console.log("getting here")
答案2
得分: 0
Promise.all(promises) 应该在 .map() 函数的外部等待。Promise.all() 的作用是接受一个包含多个 promise 的数组（在你的情况下是 Axios 请求的数组），只有当数组中的所有 promise 都解决或有一个被拒绝时才会解决。
所以，如果你想这样做：
const promises = Data?.stuff.map((id: any) => {
return axios.get('http://127.0.0.1:8080/api/v1/stuff/' + id)
.then(response => {
console.log(response.data);
return response.data;
});
});
Promise.all(promises)
.then((results) => {
console.log("所有 promises 都已解决");
console.log(results);
})
.catch((error) => {
console.log("一个 promise 被拒绝并出现错误", error);
});
就是这样。
英文:
The Promise.all(promises) should be awaited outside of the .map() function. What Promise.all() does is it takes an array of promises (in your case, an array of Axios requests) and only resolves when all the promises in the array have resolved, or one has rejected.
so, if you want to do it:
const promises = Data?.stuff.map((id: any) => {
return axios.get('http://127.0.0.1:8080/api/v1/stuff/' + id)
.then(response => {
console.log(response.data);
return response.data;
});
});
Promise.all(promises)
.then((results) => {
console.log("All promises resolved");
console.log(results);
})
.catch((error) => {
console.log("A promise rejected with error", error);
});
That's all.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论