当一个拒绝时取消嵌套的 Promise.all答案

【问题标题】：Cancelling nested Promise.all when one rejects当一个拒绝时取消嵌套的 Promise.all
【发布时间】：2018-06-26 18:51:03
【问题描述】：

我有一个反应组件，它负责将文章列表下载到 localStorage。

每篇文章都有一个端点，我可以点击它来获取一组图片链接，我还需要保存这些链接。

const getImageLinkPromise = link => {
    return Api.fetch(link)
    .then(image => {
        if (!this.mounted) {
            return Promise.reject();
        }
        return image;
     });
}

const getArticlePromise = article => {
    return Api.fetch(article.imageCollectionId)
    .then(imageLinks => imageLinks.map(getImageLinkPromise)
    .then(linkPromises => Promise.all(linkPromises))
    .then(images => //fetch some more data for the article)
}

const articlePromises = articleData.map(getArticlePromise);

Promise.all(articlePromises).then(completeArticles => // do stuff);

这里有一些粗略的代码说明我的意思

问题是，当用户离开页面并卸载组件时，我想停止任何当前正在运行的承诺。我通过在 getImageLinkPromise 中添加对 isMounted 的检查来做到这一点，如果是，则返回 Promise.reject()。

即使我拒绝了这个承诺，其余的承诺仍然适用于所有文章中的所有图像。

如果其中一个未通过 isMounted 检查，我如何阻止嵌套图像承诺运行？

（如果我在获取它们之前检查 isMounted，它们都会立即返回 true）

【问题讨论】：

标签： javascript node.js reactjs asynchronous es6-promise

【解决方案1】：

.fetch() 返回 Promise，而不是 XHR 对象。 Promise 是请求的只读化身，所以没有办法停止请求。请参阅How do I cancel an HTTP fetch() request? 和一堆链接。

由于Promise.all() 将在给定的承诺之一被拒绝后立即拒绝，因此您不应该对“我们在等待其他请求时浪费时间”有任何问题。我相信您可能遇到的唯一问题是“在列表中的另一个承诺确实得到解决后，它会继续将响应保存在某个变量中，而不再需要它”。如果是这样，您可以处理Promise.all(....).then(....) 中的响应。只有全部成功后，您才会在此处获得所有响应的列表。

【讨论】：