javascript React在循环中发送多个请求并等待

olqngx59  于 2023-09-29  发布在  Java
关注(0)|答案(2)|浏览(125)

我正在向一个API发送多个请求,比如“myapi/id”。我的ID范围可以从[0..10000]。因为一次发送所有id的开销非常大,所以我想发送slice,等待它被获取,然后发送下一个slice。
下面是我正在使用的代码:

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)

然而,请求是异步发送的/没有等待发生。我想知道我的代码中是否有错误/是否有任何方法可以使用for循环发送多个请求,并等待它们完成后再发送下一个请求。

tzdcorbm

tzdcorbm1#

如果你想等待它完成,你需要在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*/)

另外,我认为你需要使用Promise.allSettled方法而不是Promise. all。如果你的一个请求将返回一个错误,你将得到所有块失败,如果你将使用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})

然后你会在数组中得到一些空值和结果

s5a0g9ez

s5a0g9ez2#

一种有效的方法是始终保持请求被调用(限制并行请求的最大数量),而不是您正在做的事情。
通过使用你的方式(更简单),它将总是等待所有的返回,然后检查数组中是否有更多的数据,并再次递归调用函数,或者如果完成则返回所有内容。希望有帮助。

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))

相关问题