javascript - 等待所有嵌套的 promise 完成，但仍然对每个单独的 resolve 使用react

Question

假设 newsService.getNews() 返回一个应该解析为某个服务返回的随机新闻条目的 promise ，而 translateService.translate() 返回一个 promise 应该解析传递的文本的翻译。

var newsPromises = [];
var translatePromises = [];
for (var i = 0; i < 5; i++) {
    var p1 = this.newsService.getNews();
    newsPromises.push(p1);

    p1.then(function (data) {
        var p2 = this.translateService.translate(data);
        translatePromises.push(p2);
        p2.then(function (translatedData) {
            addNews(`${data} (${translatedData})`);

        }, function (fail) {
            console.log(fail.message);
        });

    }, function (fail) {
        console.log(fail.message);
    });
}

现在页面最初显示一个加载微调器，我想在所有 promise (包括嵌套翻译 promise )完成(成功或失败)时隐藏它:

   Promise.all(newsPromises)
        .then(function (results) {
            Promise.all(translatePromises).then(function (results) {
                    removeLoading();
                },
                function (err) {
                    removeLoading();
                }
            );

        }, function (err) {
            Promise.all(translatePromises).then(function (results) {
                    removeLoading();
                },
                function (err) {
                    removeLoading();
                }
            );
        });

此代码 a) 无法正常工作，因为加载微调器有时会在 promise 解决之前消失，并且 b) 非常复杂。

这是如何正确完成的？ (使用 Vanilla JS/ES6)

Answer 1

请记住， promise 链是管道，其中每个处理程序都可以在结果通过处理程序时转换链的结果。查看评论:

// We only need one array of promises
const promises = [];
// Build the array
for (let i = 0; i < 5; i++) {
    // Add this promise to the array
    promises.push(
        // Get the news...
        this.newsService.getNews().then(
            // ...and translate it...
            data => this.translateService.translate(data)
                .then(translatedData => {
                    // ...and show it as soon as it's available
                    addNews(`${data} (${translatedData})`);
                    // Note that here we're converting the resolution value to
                    // `undefined`, but nothing uses it so...
                    // If you want something to be able to use it,
                    // return `translatedData` (or `data` or...)
                })
        )
        .catch(fail => {
            console.log(fail.message);
            // WARNING: Here you're converting rejection to resolution with `undefined`
        })
    );
}
// Wait until all that is done before removing the loading indicator
Promise.all(promises).then(removeLoading);

请注意，我们不需要 Promise.all promise 上的 catch 的唯一原因是您忽略(除了记录)发生的错误，所以我们知道 promise 永远不会拒绝。

另请注意，上面假设 removeLoading 不关注它接收的参数，并且它不返回可能拒绝的 promise 。如果它确实关心参数并且不带参数调用它很重要，请将 Promise.all 位更改为:

Promise.all(promises).then(() => removeLoading());

如果它返回一个可能会被拒绝的 promise ，您还需要一个 catch 处理程序。