如何在 React Native 中下载图像期间避免“过多数量的挂起回调：501”错误？

IT技术 reactjs react-native async-await react-redux react-native-fs
2021-05-16 20:53:20

我需要在按下按钮时下载一组图像。目前，我正在使用以下方式这样做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();
};

从我的减速器中为 3 种类型的项目调用函数：

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

我的问题是有时我会收到一条错误消息，内容为： 待处理的回调数量过多：501

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

2个回答

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

那里描述的问题是排队太多的Promise呼叫可能会出现问题。评论者建议使用来自bluebird库的Promise实用程序函数Promise.map()，该函数具有开箱即用的并发控制功能。

不要在 for 里面使用 await，而是尝试使用 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();
};
其它你可能感兴趣的问题
上一篇未捕获的 ReferenceError：regeneratorRuntime 未在 react 17、webpack 5 中定义，同时通过操作进行 api 调用 下一篇如何使用 setState 更新对象数组中的对象