promise resolve before inner promise resolved

Question

I have a promise and I want it to resolve only when inner promise has resolved. Right now it resolves before the "resolve" function has been reached in the "loadend" callback.

What am I missing? I am confused about the way you are supposed to use resolve and about how you can use a promise within another promise.

I couldn't find anything that helped on the web.

In the following example I basically load a bunch of files, for each file I get a blob and I want to pass this blob in a file reader.

Once all files have been passed to the file reader, I want to move to the next function in the promise chain.

Right now it goes to the next function in the chain without waiting for resolve to be called.

var list = [];
var urls = this.files;

urls.forEach(function(url, i) {
    list.push(
        fetch(url).then(function(response) {
            response.blob().then(function(buffer) {

                var promise = new Promise(
                    function(resolve) {

                        var myReader = new FileReader();
                        myReader.addEventListener('loadend', function(e) {
                            // some time consuming operations
                            ...
                            window.console.log('yo');
                            resolve('yo');
                        });

                        //start the reading process.
                        myReader.readAsArrayBuffer(buffer);
                    });

                promise.then(function() {
                    window.console.log('smooth');
                    return 'smooth';
                });

            });
        })
    );
});

...

// run the promise...
Promise
    .all(list)
    .then(function(message){
        window.console.log('so what...?');
    })
    .catch(function(error) {
        window.console.log(error);
    });

score 23 · Accepted Answer · edited May 23 '17 at 12:17

When you don't return anything from then callbacks, it assumes synchronous operation and goes to resolve the result promise with the result (undefined) immediately.

You need to return a promise from every asynchronous function, including then callbacks that you want to get chained.

Specifically, your code should become

var list = this.files.map(function(url, i) {
//                   ^^^^ easier than [] + forEach + push
    return fetch(url).then(function(response) {
        return response.blob().then(function(buffer) {
            return new Promise(function(resolve) {
                var myReader = new FileReader();
                myReader.addEventListener('loadend', function(e) {
                    …
                    resolve('yo');
                });
                myReader.readAsArrayBuffer(buffer);
            }).then(function() {
                window.console.log('smooth');
                return 'smooth';
            });
        })
    });
});

or even better, flattened:

var list = this.files.map(function(url, i) {
    return fetch(url).then(function(response) {
        return response.blob();
    }).then(function(buffer) {
        return new Promise(function(resolve) {
            var myReader = new FileReader();
            myReader.addEventListener('loadend', function(e) {
                …
                resolve('yo');
            });
            myReader.readAsArrayBuffer(buffer);
        });
    }).then(function() {
        window.console.log('smooth');
        return 'smooth';
    });
});

I had two functions that both returned a promise that had nested promises, (due to module design) and at the end of the nested promises, I called the containing promise's resolve but felt that this was wrong. But thanks to your example, I've been able to ditch the containing promise, and just returned the nested promise's chain. This made my code much nicer to read. I just wanted to give you thumbs up for that. — WORMSS, Jun 03 '16 at 10:48

promise resolve before inner promise resolved

1 Answers1

Linked