Javascript 承诺在下一个 Then() 之前不等待解决



>有人知道为什么它不能同步运行吗?最后一个承诺似乎在第一个承诺之前解决

...
var promise = Promise.resolve();
promise.then( () => {
    return new Promise((resolve, reject) => {
        var file1 = fileChooserCSV.files[0];
        var reader1 = new FileReader();
        reader1.onload = function(){
            var csv = reader1.result;
            csvJson = csvJSON(csv);
            resolve();
        };
        reader1.readAsText(file1);
    });
});

promise.then( () => {
    return new Promise((resolve, reject) => {
        var file2 = fileChooserConfig.files[0];
        var reader2 = new FileReader();
        reader2.onload = function(){
            var config = reader2.result;
            configJson = JSON.parse(config);
            resolve();
        };
        reader2.readAsText(file2);
    });
});

promise.then( () => {
    return new Promise((resolve, reject) => {
        console.log('end');
        resolve();
    });
});

读取器 onload 方法似乎从未执行过,尽管它们确实应该执行(有传递给它们的数据),并且在它们移动到承诺之前就这样做了。由于 onload 没有运行,resolve() 永远不会触发以太币进入下一个 then(),但最后一个 then() 确实执行...

如果这有什么区别,此代码在 chrome 扩展程序弹出窗口中运行?

非常感谢!

更新。。

以经典的嵌套方式重组它工作正常

var file1 = fileChooserCSV.files[0];
    var reader1 = new FileReader();
    reader1.onload = function(){
        var csv = reader1.result;
        csvJson = csvJSON(csv);
        var file2 = fileChooserConfig.files[0];
        var reader2 = new FileReader();
        reader2.onload = function(){
            var config = reader2.result;
            configJson = JSON.parse(config);
            console.log('end');
        };
        reader2.readAsText(file2);
    };
    reader1.readAsText(file1);

你试过Promise.All().then...诸如此类

var promise = Promise.resolve(3);
Promise.all([true, promise])
    .then(function(values) {
        console.log(values); // [true, 3]
});

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

在 JS 运行时,"then"被移动到另一个堆栈,并且仅在调用堆栈为空时才执行。

例如,在这里你创建一个像你一样Promise.resolve()。但请注意,它仅在执行整个代码后执行。您将在屏幕上看到"53"而不是预期的"35":

const promise = Promise.resolve(3)
promise.then(res => {
  document.write(res)
})
document.write(5)

"then"存储在附加堆栈中,仅在以后执行。

欲了解更多信息,请查看巴拉克化疗的完美解释表格。观看至30:40。

希望对你有帮助

最新更新