如何避免在 React Native 中下载图像时出现"Excessive number of pending callbacks: 501"错误？

Question

我需要在按下按钮时下载一组图像。目前，我使用react-native-fs:以这种方式进行

const downloadImageItem = async (imgUrl, id) => {
const path = `${RNFS.DocumentDirectoryPath}/${id}.jpg`;
RNFS.downloadFile({
fromUrl: imgUrl,
toFile: path,
});
};

const downloadImages = async (items) => {
for (const item of items) {
if (item.images.length) {
await downloadImageItem(item.images[0].thumb, item.images[0].id);
}
}
return Promise.resolve();
};

从我的reducer中调用3种类型项目的函数：

await downloadImages(items_one);
await downloadImages(items_two);
await downloadImages(items_three);

我的问题是，有时我会收到一条错误消息，上面写着：挂起回调数量过多：501

有没有更好的方法来做同样的事情，这样就不会出现错误？

Answer 1

2019年12月，react-native存储库上也出现了类似的问题，但仍未关闭或解决，但我认为您可能会发现此评论很有用。

这里描述的问题是，对过多的Promise调用进行排队可能会产生问题。评论者建议使用一个名为Promise.map()的Promise实用函数，该函数具有来自bluebird库的开箱即用的并发控制功能。

Answer 2

不要在for内部使用wait，而是尝试使用for await

for await (variable of iterable) {
sentence
}

const downloadImages = async (items) => {
for await(const item of items) {
if (item.images.length) {
downloadImageItem(item.images[0].thumb, item.images[0].id);
}
}
return Promise.resolve();
};

Answer 3

我遇到了同样的问题；对我来说，这是因为我在一个组件中有一长串的承诺。

一旦我将函数移到另一个文件中，警告就消失了。