指定した順番にHTMLを読み込みたい

Question

実現したいこと

指定した順番にHTMLを読み込み連結したい(a.html＋b.html)

発生している問題

読み込みが絡んでるので、毎回指定した順番にHTMLを読み込めるのか確かめることができない。再読み込みを何回かしただけでは不十分かと思った。b.html+a.htmlになる可能性を調べる必要がある。

該当のソースコード

    var urls = ['a.html', 'b.html'];
    Promise.all(urls.map(url =>
        fetch(url).then(resp => resp.text())
    )).then(texts => {
        document.body.innerHTML = texts[0] + texts[1];
    });

試したこと

調べる。
https://puroguradesu.hatenadiary.jp/entry/2020/07/13/143228
によると処理が重いものでも最初に指定すれば最初に実行されるとのこと。
ただ自分のソースとは違い、awaitとasyncを使っている。

https://zenn.dev/kawaxumax/articles/0044a0e30536e2
の「// promiseの書き方」というソースを見ると、
awaitとasyncを使っていないようだがawaitとasyncを明記しなくてもいいということなのか。

Answer 1

Promise.allは配列で指定したpromise処理がすべて終了したら配列の格納順に返すので
a.htmlはtexts[0]で受けb.htmlはtexts[1]で受けます

• Promise.all() - JavaScript | MDN - 返値

「返値は、実行完了順とは関係なく、 Promise が渡された順に並びます。」

Comments

[kjshdfiuasye]

迅速なご回答ありがとうございます。