Question

我有一个反应组件，负责处理将文章列表下载到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);

这里有一些粗略的代码，显示我的意思

问题是，当用户离开页面并卸载组件时，我想暂停任何当前正在运行的promises。我通过在getImageLinkPromise中添加了对isMounted的检查，然后返回Promise.reject()来执行此操作。

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

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

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

Answer 1

.fetch()返回Promise，而不是XHR对象。 Promise是请求的只读头像，因此无法停止请求。请参阅How do I cancel an HTTP fetch() request?一堆链接。

由于Promise.all()会在一项承诺被拒绝后立即拒绝，因此您不应该在等待其他请求时浪费时间＆＃34;。我相信你可能遇到的唯一问题是，如果列表中的另一个承诺真的得到了解决，它会继续保存一些变量中的响应，而不再需要它＃34;如果是这样，您可以在Promise.all(....).then(....)中处理回复。只有在所有响应都成功的情况下，您才能获得所有响应的列表。

当拒绝时取消嵌套的Promise.all

1 个答案: