CODEWITHSUNDEEP
asynchronouspromise
egh.pr
egh.pr

Reputation: 11

Promise.all does not wait till .then()

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>

Upvotes: 0

Views: 280

Answers (1)

egh.pr
egh.pr

Reputation: 11

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

Upvotes: 1

Related Questions