承诺在内在承诺之前解决 [英] promise resolve before inner promise resolved

问题描述

我有一个承诺，只有内在的承诺得到解决，我才想要解决。现在它在loadend回调中达到resolve功能之前解决。

我缺少什么？我很困惑你应该如何使用决心，以及如何在另一个承诺中使用诺言。

我找不到任何在网络上有帮助的东西

在下面的示例中，我基本上加载了一堆文件，对于每个文件，我得到一个blob，我想在文件读取器中传递这个blob。 >

将所有文件传递给文件阅读器后，我想转到承诺链中的下一个功能。

现在，它转到链中的下一个函数，而不等待解析被调用。

  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）{
 //一些耗时的操作
 ... 
 window.console.log（'yo'）; 
 resolve（'yo'）; 
}）; 
 
 //开始阅读过程
 myReader.readAsArrayBuffer（buffer）; 
}）; 
 
 promise.then（function（）{
 window.console.log（'smooth'）; 
 return'smooth'; 
 }）; 
 
}）; 
}）
）; 
}）; 
 
 ... 
 
 //运行承诺... 
承诺
 .all（list）
 .then（function消息）{
 window.console.log（'so what ...？'）; 
}）
 .catch（function（error）{
 window.console.log （错误）; 
}）; 
  

解决方案

当你不返回从然后回调的任何东西，它假定同步操作，并用结果解析结果承诺（ undefined ）立即。

您需要 返回每个异步函数的承诺，包括您要链接的然后回调。

具体来说，您的代码应该成为

  var list = this.files.map（function（url，i）{
 // ^^^^ [] + forEach + push 
 return fetch（url）.then（function（response）{
 return response.blob（）。then（function（buffer）{
 return new Promise （解析）{
 var myReader = new FileReader（）; 
 myReader.addEventListener（'loadend'，function（e）{
 ... 
 res olve（'yo'）; 
}）; 
 myReader.readAsArrayBuffer（buffer）; 
}）然后（function（）{
 window.console.log（'smooth'）; 
 return'smooth'; 
}）; 
}）
}）; 
}）; 
  

甚至更好， flattened ：

  var list = this.files.map（function（url，i）{
 return fetch（url）.then（function（response）{
 return response.blob（）; 
}）然后（function（buffer）{
 return new Promise （解析）{
 var myReader = new FileReader（）; 
 myReader.addEventListener（'loadend'，function（e）{
 ... 
 resolve（'yo'）; 
}）; 
 myReader.readAsArrayBuffer（buffer）; 
}）; 
}）然后（function（）{
 window.console.log ）; 
 return'smooth'; 
}）; 
}）; 
  

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);
    });

解决方案

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';
    });
});

这篇关于承诺在内在承诺之前解决的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！