How to make promise wait till all requests in a loop are completed?

Question

In project I use React+redux+fetch. I need to update 15 users and in order to update them I send request with user ids. On api side I have limit - 10 user can be updated per request, so I need to make 2 requests in order to update all users. in first request I send 10 ids in second 5 ids. After users updating I need to request userlist in order to update users info on the page. I perform promise:

let promise = new Promise(resolve => resolve(1));
let _this = this;
promise
                .then(() => {
                    let preparedIds = DataHelper.getArrayOfArrays(userIds, 10) ;
                   
                            for (let i = 1; i<preparedIds.length; i++) {
                                _this.props.dispatch(requestMeasurePermissions(preparedIds[i]))
                            }
                })
                .then(() => {
                    _this.props.dispatch(getUsersList())

                })

service method:

export function getArrayOfArrays(initialArray, subarraySize) {
    let subArrays = [];

    for (let i = 0; i<Math.ceil(initialArray.length/subarraySize); i++) {
        subArrays[i] = initialArray.slice((i*subarraySize), (i*subarraySize) + subarraySize)
    }

    return subArrays;
}

So I need to complete all requests in for-loop, and only after that to go to the next .then(), but my code does not work as _this.props.dispatch(getUsersList()) 'fires' after first cycle iteration, as a result I receive user list where 10 users are updated but another 5 not. How can I make promise to wait for the moment when all requests in the loop are performed?

You'll need to return a promise from the first `then()` callback in order to wait. Does `dispatch()` return a promise? If so collect them in an array and pass them to `Promise.all()` Then return the resulting promise. — 3limin4t0r, Aug 12 '20 at 12:27
Pardon me if am wrong but what good is a `Promise` if it does not do any task apart from `Promise(resolve => resolve(1))`? I am a `JS` `noob` but I can tell this code can work better if you created a function instead that did all the work and returned a value then passed it to the `Promise` instead...Also, if you want a Promise to wait you are better off using `Promise.all`, it will wait until all tasks are done before it returns. — Nemo, Aug 12 '20 at 12:30
@3limin4t0r yes you are right, dispatch is a fetch, which returns promise, after using .all() I solved this issue. can you duplicate your comment to answers, I'll mark it as answer? — Sam Fisher, Aug 12 '20 at 13:03
@SamFisher I can't add an answer because the question is marked as duplicate. For a more detailed explanation check out [MDN Using Promises - Chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises#Chaining) — 3limin4t0r, Aug 12 '20 at 13:11

Lionel Rowe · Accepted Answer · 2020-08-12T15:17:24.230

4

Asynchronous execution in parallel (order of execution is unimportant, better performance):

Use Promise.all.

Asynchronous execution in series (order of execution is important, only start each request after the previous one resolves):

Use for await...of.

edited Aug 12 '20 at 15:17

answered Aug 12 '20 at 12:16

Lionel Rowe

5,164
1
14
27

How to make promise wait till all requests in a loop are completed?

1 Answers1