Listr：在阵列图上可观察到

Question

I want to download a group o files and reporting the progress using Listr and RxJs but when i run it loops and display incorrect index of the array.

That's the code of the task [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()
                }
            })
        })
}

That's the result (is not the exact same function, but the problem is the same)

Answer 1

.forEach will run synchronously even though the callback to it is using async / await . To be honest I think this is a better approach since it allows multiple downloads to happen at once and you don't have to depend on the order of the downloads. If you want this to display in order you can just maintain your own counter:

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