Angularの非同期処理について

この記事はCODE BASE OKINAWA プログラミングスクールAdvent Calendar 2020 24日目の記事です

Angularの非同期処理について知りたいよー

今年の10月からWeb業界？に転職し、現場でAngularを使っているので、
理解を深めるためにも、胆となる非同期処理について調べてみました！

AngularではRxJS使ってるんですって

Angularでは、RxJSという非同期処理を簡潔に記述できるライブラリを採用しています！
キーワードとなるのは、下記3つ！
・Observable
・subscribe
・Observer

RxJSの公式？に乗ってる、サンプルソースを基に理解していきましょう！

以下は、subscribeするとすぐに（同期的に）値1,2,3をプッシュし、subscribe呼び出しから1秒経過した後に値4をプッシュして完了するObservableです。

サンプルソース

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});

console.log('just before subscribe');
observable.subscribe({
  next(x) { console.log('got value ' + x); },
  error(err) { console.error('something wrong occurred: ' + err); },
  complete() { console.log('done'); }
});
console.log('just after subscribe');

実行結果

just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done

Observable

Observableオブジェクトは、subscribeというメソッドを保持しており、
2行目の部分で、そのsubscribe実行時の処理を定義しています。

subscribe

subscribeを実行すると、Observableの購読を開始し、
引数で設定された、Observerオブジェクトのメソッドを実行します。

Observer

Observerは、next、error、completeメソッドを保持しています。
next -> 実行時に走る処理
error -> エラー発生時に走る処理
complete -> 処理完了後に走る処理

サンプルコードでは、2行目でobserverに1~3の値を引数にnextメソッドを実行し、
その1秒後にcompleteメソッドを実行しています。

ちょっと分かり辛いと思ったので、回転寿司で例えてみた

Observableは、寿司を回転させ、提供し続けて、
その回っている寿司をsubscribeで取って、Observerのnextで食べる。
取るときに手を滑らせて寿司を落とした場合はerrorが走り、
食べ終わったらcompleteで「ごちそうさま」を叫ぶ。
上記の内容で私は理解したつもりです！（違ってたら指摘ください！

次回予告

次回は実際にどのように使うのかとか書きたいなと考えていますので、こうご期待！
それでは、良いお年を！