Promise.all does not wait till .then()

Question

I have problem with using Promise.all. If I understand correctly - someArrayUpdate1 resolve few promises to an array (someArray1) asynchronously - so when Promise.all(someArray1) hit, sooner or latter it has all data. And the same thing happen with someArrayUpdate2 - so it start immediately building it's data (someArray2).

I thought that .then() will work like a brake so Promise.all(someArray2) will start to build it promises array AFTER Promise.all(someArray1) and thanks to that TEST1 (mainArray) object status will be turn ON.

Now the problem is that TEST1 (mainArray) object status is OFF. And I don't know how to change that. Any ideas?

<doctype>
<html>
<head>
    <title>TEST</title>
</head>
<body>

<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />

<script>

    // ARRAYS and FUNCTIONS:
    var mainArray = [{
        TEST1 : {
            status : ''
        },
        TEST2 : {
            status : ''
        },
        TEST3 : {
            status : ''
        }
    }];

    var someArray1 = []; // for imgs
    var someArray2 = []; // for objects

    function someArray1Update(imgSrc, imgCounter) {
        return new Promise(function (resolve, reject) {
            setTimeout(function() {// - for marking asynchronous data flow

                    // this is where the problem is (lets assume that this code must be placed here) - we update second array here for Promise.all(someArray2) but nothing happen... status is OFF
                    someArray2.push(someArray2Update('TEST1', 'on'));

                    return resolve({counter : imgCounter, url : imgSrc});
            }, 1000);
        });
    }

    function someArray2Update(object, status) {
        return new Promise(function(resolve, reject) {
            return resolve({
                [object] : {
                    status : status,
                }
            });
        });
    }

    // CODE:
    someArray2.push(someArray2Update('TEST2', 'on')); // working fine

    var imgs = document.images || document.getElementsByTagName('img');
    var imgsLength = imgs.length;
    var imgSrc = '';
    var imgsInfo = '';

    if (imgsLength !== 0) {
        for (var i = 0; i < imgsLength; i++) {
            imgSrc = imgs[i].getAttribute('src');

            var imgCounter = i + 1;

            someArray1.push(someArray1Update(imgSrc, imgCounter));

            console.log('Image ' + [i + 1] + ' - ' +  imgSrc);
            imgsInfo  += 'Image ' + [i + 1] + ' - ' +  imgSrc + '<br />';
        }
    }
    else;

    someArray2.push(someArray2Update('TEST3', 'on')); // working fine

    Promise.all(someArray1).then(function(all) {
        console.log('\n');
        all.forEach(function(i) {
            console.log('someArray1 - ok');
        });
        console.log('\n');
    }).then(Promise.all(someArray2).then(function(array) {
            array.forEach(function(i) {
                mainArray[0] = Object.assign(mainArray[0], i);
            });
            console.log('\n=========================================================');
            console.log(mainArray);
            console.log('=========================================================\n');
        }));

</script>


</body>
</html>

You must pass a callback function to `then`, not the result of `Promise.all(someArray2).then(…)` — Bergi, May 01 '18 at 16:16
Honestly I have no idea how it should looks like (in asynchronous way with many someArray2Update functions in the code. Could you bring an example somewhere? Thanks. — egh.pr, May 01 '18 at 16:24
ohhh got it... it was a code mistake, thanks for pointing it out @Bergi. — egh.pr, May 01 '18 at 17:28

score 1 · Answer 1 · answered May 01 '18 at 17:35

).then(Promise.all(someArray2).then(function(array) {
            array.forEach(function(i) {
                mainArray[0] = Object.assign(mainArray[0], i);
            });
            console.log('\n=========================================================');
            console.log(mainArray);
            console.log('=========================================================\n');
        }));

this should looks like:

).then(*function()*{Promise.all(someArray2).then(function(array) {
            array.forEach(function(i) {
                mainArray[0] = Object.assign(mainArray[0], i);
            });
            }console.log('\n=========================================================');
            console.log(mainArray);
            console.log('=========================================================\n');
        }));

Thanks goes to @Bergi for pointing that out.

You'll also want to [`return` the promise](https://stackoverflow.com/a/25756564/1048572) from the callback so that you can [further chain on it](https://stackoverflow.com/a/22562045/1048572). — Bergi, May 01 '18 at 18:08

Promise.all does not wait till .then()

1 Answers1