JavaScript 等待内循环

Question

I'm trying to read files inside several folders and I need the whole code goes synchronously.

I converted Callback into Promise and try to await it:

function getEntries(reader) {
    return new Promise((resolve, reject) => {
        reader.readEntries((entries) => resolve(entries))
    })
}

async function onDrop(e) {
    e.preventDefault();
    var items = e.dataTransfer.items;
    for (var i=0; i<items.length; i++) {
        
        var entry = items[i].webkitGetAsEntry();
        if (entry.isDirectory) {
            var reader = entry.createReader();
            var entries = await getEntries(reader);
            console.log(entries);
        }
    }
}

But for loop goes just for the first folder. What's wrong? How I should reorganize my code?

Answer 1

UPDATE

The reason the await did not seem to work is due to how browsers handle DataTransfers in the context of async code. See this SO post for details:

• Javascript DataTransfer items not persisting through async calls

Here is a jsfiddle that shows the problem clearly:

• https://jsfiddle.net/kaliatech/es1nqc8v/69/

My original answer below is one way to deal handle if you actually wanted an async flow.

ORIGINAL

I think you meant to say that you want to read directories asynchronously ? If so...

As it is, the loop will await on each directory. Instead, perhaps you want to collect the promises and continue only when all of them have resolved. Something like:

function getEntries(reader) {
    return new Promise((resolve, reject) => {
        reader.readEntries((entries) => resolve(entries))
    })
}

async function onDrop(e) {
    e.preventDefault();
    var items = e.dataTransfer.items;
    var promises = [];
    for (var i=0; i<items.length; i++) {
        
        var entry = items[i].webkitGetAsEntry();
        if (entry.isDirectory) {
            var reader = entry.createReader();
            promises.push(getEntries(reader));
        }
    }
    Promise.all(promises).then((entries) => {
     console.log(entries);
    });
}

Answer 2

Try using for-of loop instead of for loop only if you want the previous iteration to complete before moving to next iteration. If that is not important just push every call to getEntries in a promise and await for that promise at end.