データを非同期で受け取れるようにする

このレッスンでは、 サービスからコンポーネントへの データの受け取りを 非同期の処理にしたいと思います。 今サービスはこの heroineService と いうクラスなんですけれども、 このクラスを providers に デコレータ関数で指定して、 constructor で引数に受け取ります。 それを private なプロパティに 設定しているのですが、 その service のオブジェクトに対して getHeroines という メソッドを呼び出して プロパティにその取得した値を 設定しているわけです。 そして一方で この service なんですけれども service の方は mock-heroines という このファイルから 定数に入った配列のデータを持って来て それを getHeroines で返しています。 ここにありますからすぐに返せるのですが、 後々サーバからデータを受け取って返すと いうふうに処理しても構わないように 非同期の処理にしたいと思います。 そこでまずこの service の方なんですが いきなりリターンをせずに リターンをするのは このデータを要求している promiseObject というふうにしたいと思います。 そのためにはこの return はちょっと コメントアウトします。 そして返すのは Promise の resolve。 ここで今はサーバのデータではありませんが 定数 HEROINES と。 そしてこれをコンポーネントの方に返します。 そしてコンポーネントの方では このデータがきちんと受け取れたときに どうするかという処理を 書くことにするわけです。 何か赤い波線が付きました。 というのは戻り値が 配列ではなくなったからですね。 PromiseObject になりました。 ですのでここで Promise と。 そしてでも Promise のオブジェクトが データを受け取ると この Heroine の配列になるわけですね。 それを山形の括弧の中に指定します。 ちょっと変わった指定ですね、 こちらを保存しておきましょう。 ファイルを保存します。 そうしたら今度は Component の方です。 赤い波線が早速付きました。 というのは返されるものが 変わったからですね。 ということでここもコメントにします。…