等待所有嵌套promise完成，但仍对每个单独的解决方案作出反应

Question

假设newservice.getNews（）返回一个promise，该promise应解析为某个服务返回的随机新闻条目，而translateService.translate（）返回一个promise，该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）非常复杂。

如何正确地做到这一点？（配香草JS/ES6）

Answer 1

在这种情况下，我创建全局计数器loadersCount=0

每次调用this.newservice.getNews（）调用函数loaderStart（）

每次调用addNews（）或console.log（fail.message）callloaderStop（）

function loaderStart () {
  if (loadersCount === 0) {
    addLoading();
  }
  loadersCount++;
}

function loaderStop () {
  if (loadersCount === 1) {
    removeLoading();
  }
  loadersCount--;
}

Answer 2

请记住，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上添加捕获的唯一原因。所有promise都是因为您忽略了（记录除外）发生的错误，因此我们知道promise永远不会拒绝。

还要注意的是，上面假设removeLoading不关注它收到的参数，并且它不会返回可能拒绝的promise。如果它确实关心参数，并且不带参数调用它很重要，请将promise。所有位更改为：

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

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