前回の記事で非同期処理の基本を学んだので、今回は実践してみようと思います。
fetchメソッドでファイルを取得して、それを元にデシアライズみたいなことをしてみます。
前回作ったプロジェクトでソースにべた書きでインスタンス生成している箇所があるので、そこをfetchで取得したファイルを元に作成するということをやってみます。
https://github.com/jirentaicho/typescript-figurecollection/blob/main/src/main.ts
<div class="remark-highlight"><pre class="language-ts"><code class="language-ts">public init() : void{

 // 初期画面に必要なものを揃えます
 PageLogic.init();

 const shelfa = new Shelf("ラブライブ", Array.of(
 new Item("kanon.jpg"),
 new Item("chisato.jpg"),
 new Item("ren.jpg"),
 new Item("keke.jpg"),
 new Item("sumire.jpg"),
 ));
 shelfa.setBackImage("lovelivetitle.png");

 const shelfb = new Shelf("とある", Array.of(
 new Item("misaka.jpg"),
 new Item("kuroko.jpg"),
 new Item("toaru.jpg"),
 ));
 shelfb.setBackImage("toarutitle.jpg");


 const shelfc = new Shelf("俺妹", Array.of(
 new Item("kirino.jpg"),
 new Item("oreimo.jpg"),
 new Item("ayase.jpg"),
 ));
 shelfc.setBackImage("oreimotitle.png");

 const shelfd = new Shelf("鬼滅", Array.of(
 new Item("rengoku.jpg"),
 new Item("giyu.jpg"),
 new Item("nezuko.jpg"),
 ));
 shelfd.setBackImage("kimetutitle.jpg");


 //ここsingletonにする
 const setting = Setting.getInstance();
 setting.addShelf("toaru",shelfa);
 setting.addShelf("lovelive",shelfb);
 setting.addShelf("oreimo", shelfc);
 setting.addShelf("kimetu", shelfd);
 
 const shelfarea = Dom.getElementByIdWithException(DomConst.SHELF_AREA_ID); 
 setting.drawDomShelfs(shelfarea);

}
</code></pre></div>
<h2>async/awaitを利用してファイルの内容を取得する</h2>
まずは以下のようなファイルをロードするクラスを作成します。
<div class="remark-highlight"><pre class="language-ts"><code class="language-ts">export default class FileManager{
 public static getDataWithFile(filename : string) : Promise&#x3C;Response>{
 return fetch(`/${filename}`);
 }
}
</code></pre></div>
fetchはPromiseを返却します。
これを利用してファイルの中身をコンソールに出力します。
<div class="remark-highlight"><pre class="language-ts"><code class="language-ts">private async loadSettings(): Promise&#x3C;void>{
 const response = await FileManager.getDataWithFile('mylist.yaml');
 const data = await response.text();
 console.log(data);
 }
</code></pre></div>
ちなみにこの場合はawaitをつけないとコンパイルが通りません。awaitつけ忘れてね？って教えてくれます。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">Property 'text' does not exist on type 'Promise&#x3C;Response>'.ts(2339)
main.ts(46, 31): Did you forget to use 'await'?
</code></pre></div>
yamlファイルの内容が表示されました。
<img src="/979/1.png" alt="画像">
次回はyamlファイルを利用します。

TypeScriptの非同期処理を実践する