I have a piece of code that executes a long list of http requests, and I've written the code in such a way that it always has 4 requests running parallel. It just so happens that the server can handle 4 parallel requests the fastest. With less the code would work slower and with more the requests would take longer to finish. Anyway, here is the code:
const itemsToRemove = items.filter(
// ...
)
const removeItem = (item: Item) => item && // first it checks if item isn't undefined
// Then it creates a DELETE request
itemsApi.remove(item).then(
// And then whenever a request finishes,
// it adds the next request to the queue.
// This ensures that there will always
// be 4 requests running parallel.
() => removeItem(itemsToRemove.shift())
)
// I start with a chunk of the first 4 items.
const firstChunk = itemsToRemove.splice(0, 4)
await Promise.allSettled(
firstChunk.map(removeItem)
)
Now the problem with this code is that if list is very long (as in thousands of items), at some point the browser tab just crashes. Which is a little unhelpful, because I don't get to see a specific error message that tells me what went wrong.
But my guess is that this part of the code:
itemsApi.remove(item).then(
() => removeItem(itemsToRemove.shift())
)
May be creating a Maximum call stack size exceeded issue? Because in a way I'm constantly adding to the call stack, aren't I?
Do you think my guess is correct? And regardless of if your answer is yes or no, do you have an idea how I could achieve the same goal without crashing the browser tab? Can I refactor this code in a way that doesn't add to the call stack? (If I'm indeed doing that?)
The issue with your code is in
await Promise.allSettled(firstChunk.map(removeItem)
The argument passed to Promise.allSettled needs to be an array of Promises as per the documentation:
The Promise.allSettled() method returns a promise that fulfills after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.
Your recursive function then runs all of the requests one after the other throwing a Maximum call stack size exceeded error and crashing your browser.
The solution I came up with (it could probably be shortened) is like so:
let items = []
while (items.length < 20) {
items = [...items, `item-${items.length + 1}`]
}
// A mockup of the API function that executes an asynchronous task and returns once it is resolved
async function itemsApi(item) {
await new Promise((resolve) => setTimeout(() => {resolve(item)}, 1000))
}
async function f(items) {
const itemsToRemove = items
// call the itemsApi and resolve the promise after the itemsApi function finishes
const removeItem = (item) => item &&
new Promise((resolve, reject) =>
itemsApi(item)
.then((res) => resolve(res))
.catch(e => reject(e))
)
// Recursive function that removes a chunk of 4 items after the previous chunk has been removed
function removeChunk(chunk) {
// exit the function once there is no more items in the array
if (itemsToRemove.length === 0) return
console.log(itemsToRemove)
// after the first 4 request finish, keep making a new chunk of 4 requests until the itemsToRemove array is empty
Promise.allSettled(chunk.map(removeItem))
.then(() => removeChunk(itemsToRemove.splice(0, 4)))
}
const firstChunk = itemsToRemove.splice(0, 4)
// initiate the recursive function
removeChunk(firstChunk)
}
f(items)I hope this answers your question