Listr：配列マップで観測可能

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() 
    } 
})