javascript - 列表 : Observable on array map

Question

我想下载一组文件并使用 Listr 报告进度和 RxJs但是当我运行它时，它会循环并显示不正确的数组索引。

这是任务的代码 [source code] :

{
        title: 'Downloading...',
        task: (ctx) => rx.Observable.create((observer) => {
            const count = ctx.photos.length;
            const urls = ctx.photos.map((photo) => photo.urls.raw)
            urls.forEach(async (url, index) => {
                let data = await download(url);
                if ( index !== count - 1 ) {
                    observer.next(index);               
                } else {
                    observer.complete()
                }
            })
        })
}

这就是结果(不是完全相同的函数，但问题是相同的)

Answer 1

.forEach 将同步运行，即使其回调使用 async/await 也是如此。老实说，我认为这是一种更好的方法，因为它允许同时进行多个下载，并且您不必依赖下载的顺序。如果您希望按顺序显示，您可以维护自己的计数器:

let downloadedCount = 0;
urls.forEach(async (url, index) => {
  let data = await download(url);
  if ( index !== count - 1 ) {
    observer.next(++downloadedCount);               
  } else {
    observer.complete()
  }
})