promiseチェーンをfor文でループさせたい

Question

PDF.jsでPDFビュワーを作っています。

PDF1ページを読み込む処理は非同期処理で書かれていて、これをドキュメント全てのページを表示できるように書き換えたいです。

元のコード:

pdfDocument.getPage(i)
.then(function (p) {
  page = p;
  console.log('page #: ' + i);
  viewport = page.getViewport({ scale: PAGE_SCALE, });
  return page.getTextContent()
}).then(function (textContent) {
  // building SVG and adding that to the DOM
  var svg = buildSVG(viewport, textContent);
  document.getElementById('pageContainer').appendChild(svg);
});

for文で回してうまくいかなかったコード:

let promise = Promise.resolve();
for (let i = 1; i <= pdfDocument.numPages; i++) {
  promise.then(function () {
    pdfDocument.getPage(i)
    .then(function (p) {
      page = p;
      console.log('page #: ' + i);
      viewport = page.getViewport({ scale: PAGE_SCALE, });
      return page.getTextContent()
    }).then(function (textContent) {
      // building SVG and adding that to the DOM
      var svg = buildSVG(viewport, textContent);
      document.getElementById('pageContainer').appendChild(svg);
    });
  })
}

コンソールに出力される順番は1, 2, 3, ...　となりましたが、ページのロードは以前として順番通りになりません。
おそらく二つめのthenがあることが原因だと思いますが、どのように ...then()... で繋がっているコードをループで回せるように書き換えたらいいかわかりません。

追記: async/awaitを使って書いてみましたが、結果は変わりませんでした

async function renderPage(pageNum) {
      var page = await pdfDocument.getPage(pageNum);
      console.log('page #: ' + pageNum);
      viewport = page.getViewport({ scale: PAGE_SCALE, });
      var textContent = await page.getTextContent();
      var svg = buildSVG(viewport, textContent);
      document.getElementById('pageContainer').appendChild(svg);
    }

    for (let i = 1; i <= pdfDocument.numPages; i++) {
      renderPage(i);
    }
}

Comments

[Lhankor_Mhy]

await を使ってもいいのですか？

[jesuissuyaa]

async/awaitをfor文の中で使うということですか？

[Lhankor_Mhy]

そんな感じです。

[Lhankor_Mhy]

追記拝読。asyncはループの外に置く形でしょうね。
というか、使っていいのですね？

Answer 1

awaitを使う方法

(async ()=>{

for (let i = 1; i <= pdfDocument.numPages; i++) {
    let page = await pdfDocument.getPage(i);
    console.log('page #: ' + i);
    let viewport = page.getViewport({ scale: PAGE_SCALE, });
    let textContent = await page.getTextContent();
    // building SVG and adding that to the DOM
    var svg = buildSVG(viewport, textContent);
    document.getElementById('pageContainer').appendChild(svg);
}

})()

Promise.all()を使う方法

let arr = [];
for (let i = 1; i <= pdfDocument.numPages; i++) {
  arr.push(
    pdfDocument.getPage(i)
    .then(function (p) {
      page = p;
      console.log('page #: ' + i);
      viewport = page.getViewport({ scale: PAGE_SCALE, });
      return Promise.all([viewport, page.getTextContent()]);
    })
  );
}
Promise.all(arr).then(function(resultArr){
  contentArr.forEach(x=>{
    var svg = buildSVG(...x);
    document.getElementById('pageContainer').appendChild(svg);
  })
});

どちらも動作確認してません。

Comments

[Lhankor_Mhy]

あ、Promise.allの方、配列返す形じゃ動かないか。まるっとPromiseでまとめないとだ。
それはださいなー

[Lhankor_Mhy]

こうかな？

[jesuissuyaa]

無事動作しました！ありがとうございます！！

Answer 2

コードまで書きませんが

1. 非同期で１ページずつpdfの読み込みを行っている以上、1→2→3の順に処理を開始しても2→1→3のように完了する順番が違うのは当たり前
2. 全ページの変換処理を行った結果をソートしたいなら、変換をする箇所ではページ番号と中身のデータが対になったデータを返してやり、全ページの処理の完了を待って変換が終わったデータをソートしてから次の処理（表示）に流す必要がある
3. 2が嫌なら同期的に処理をするしかない（1ページずつwaitするみたいな）

というわけで、Promiseの使い方を調べて修正してみてはどうでしょう。