React 循环发送多个请求并等待
React send multiple requests in a loop and wait
我正在向 API 说 "myapi/id" 发送多个请求。我的 ID 范围可以是 [0..10000]。因为一次发送所有id非常昂贵,所以我想发送切片等待它被提取然后发送下一个切片。
这是我使用的代码:
async function getSlice(data) {
let promises = []
data.map((key) => {
promises.push(fetch("myapi/"+key)
.then(res => res.json())
.then((result) => console.log(result))) //I want to store the result in an array
}
await Promise.all(promises)
}
function getAll(data) {
for(let i=0; i<= data.length; i+=10) {
getSlice(data.slice(i,i+10));
//I want to wait for the previous slice to complete before requesting for the next slice
}
}
getAll(ids)
但是,正在发送请求 asynchronously/there 无需等待。我想知道我的代码是否有错误/是否有任何方法可以使用 for 循环发送多个请求并等待它们完成后再发送下一个请求。
你需要在 async
函数之前使用 await
如果你想等待它
完成
async function getAll(data) {
for(let i=0; i<= data.length; i+=10) {
await getSlice(data.slice(i,i+10));
}
}
getAll(ids).then(()=>console.log('all data processed')).catch(err=>/*handle
error*/)
Ps。我认为您需要使用 Promise.allSettled 方法而不是 Promise.all。如果您的请求之一将 return 出错,如果您将使用 Promise.all,您将得到所有块失败。 Promise.allSettled 将等待所有结果 - 正面或负面。
另一个旧的解决方案是对每个请求使用 catch 方法,比如
promises.push(fetch("myapi/"+key)
.then(res => res.json())
.then((result) => console.log(result))
.catch((err)=>{/*handle error if needed*/; return null})
之后,结果数组中会有一些空值
一种有效的做法是始终保持请求被调用(限制并行请求的最大数量)而不是你正在做的方式。
通过使用您的方式(更简单),它将始终等待所有内容 return 然后检查数组中是否有更多数据并再次递归调用该函数或 return 如果有则一切完毕。希望对你有帮助。
async function getSlice(data) {
let promises = []
data.map((key) => {
promises.push(fetch("myapi/"+key)
.then(res => res.json())
.then((result) => console.log(result))) //I want to store the result in an array
}
await Promise.all(promises)
}
function getAll(data, index=0, length=10) {
const allResponse = [];
return getSlice(data.slice(index,q)).then(response => {
allResponse.push(response);
newLength = length + 11 > data.length ? data.length : length + 11;
if (index + 10 > data.length) //it's over
return allResponse;
return getAll(data, index + 10, length +11);
})}
Promise.all(getAll(ids).then(arrayResponse=>console.log('dowhatever',arrayResponse))
我正在向 API 说 "myapi/id" 发送多个请求。我的 ID 范围可以是 [0..10000]。因为一次发送所有id非常昂贵,所以我想发送切片等待它被提取然后发送下一个切片。
这是我使用的代码:
async function getSlice(data) {
let promises = []
data.map((key) => {
promises.push(fetch("myapi/"+key)
.then(res => res.json())
.then((result) => console.log(result))) //I want to store the result in an array
}
await Promise.all(promises)
}
function getAll(data) {
for(let i=0; i<= data.length; i+=10) {
getSlice(data.slice(i,i+10));
//I want to wait for the previous slice to complete before requesting for the next slice
}
}
getAll(ids)
但是,正在发送请求 asynchronously/there 无需等待。我想知道我的代码是否有错误/是否有任何方法可以使用 for 循环发送多个请求并等待它们完成后再发送下一个请求。
你需要在 async
函数之前使用 await
如果你想等待它
完成
async function getAll(data) {
for(let i=0; i<= data.length; i+=10) {
await getSlice(data.slice(i,i+10));
}
}
getAll(ids).then(()=>console.log('all data processed')).catch(err=>/*handle
error*/)
Ps。我认为您需要使用 Promise.allSettled 方法而不是 Promise.all。如果您的请求之一将 return 出错,如果您将使用 Promise.all,您将得到所有块失败。 Promise.allSettled 将等待所有结果 - 正面或负面。 另一个旧的解决方案是对每个请求使用 catch 方法,比如
promises.push(fetch("myapi/"+key)
.then(res => res.json())
.then((result) => console.log(result))
.catch((err)=>{/*handle error if needed*/; return null})
之后,结果数组中会有一些空值
一种有效的做法是始终保持请求被调用(限制并行请求的最大数量)而不是你正在做的方式。
通过使用您的方式(更简单),它将始终等待所有内容 return 然后检查数组中是否有更多数据并再次递归调用该函数或 return 如果有则一切完毕。希望对你有帮助。
async function getSlice(data) {
let promises = []
data.map((key) => {
promises.push(fetch("myapi/"+key)
.then(res => res.json())
.then((result) => console.log(result))) //I want to store the result in an array
}
await Promise.all(promises)
}
function getAll(data, index=0, length=10) {
const allResponse = [];
return getSlice(data.slice(index,q)).then(response => {
allResponse.push(response);
newLength = length + 11 > data.length ? data.length : length + 11;
if (index + 10 > data.length) //it's over
return allResponse;
return getAll(data, index + 10, length +11);
})}
Promise.all(getAll(ids).then(arrayResponse=>console.log('dowhatever',arrayResponse))