RxJSとはなんぞや？④promise から observable を作成する
なんとなくですがRxJSとも仲良くなってきた気がします。
その上であえて言いたいのですが、Angular日本語ドキュメント｜RxJSライブラリの『Observable 作成関数』のサンプルの順番、「promise から observable を作成する」を最後にした方が良いんじゃないかなと思います。
準備のほぼ不要な簡単な例からやった方が躓きが少ないと思うんです。
初心者はRxJSなんて触らないかもしれませんが、初心者には(そして私には)荷が重い感じです。
Ajaxもそうですが、他の2つのサンプルみたいにほぼ準備なしで試せるコードは本当にありがたいし、それを試してからならpromise？fetch？と言う人にも多少は敷居が低いんじゃないでしょうか？
(AJAX リクエストから作成(説明割愛予定)もそんな感じですよね？)
ボヤキはこれくらいにして、サンプル試します。
Angular日本語ドキュメント｜RxJSライブラリ
promise から observable を作成する
https://angular.jp/guide/rx-library#observable-%E4%BD%9C%E6%88%90%E9%96%A2%E6%95%B0
---------------------------------------------------------------
import { from, Observable } from 'rxjs';
// Create an Observable out of a promise
const data = from(fetch('/api/endpoint'));
// Subscribe to begin listening for async result
data.subscribe({
next(response) { console.log(response); },
error(err) { console.error('Error: ' + err); },
complete() { console.log('Completed'); }
});
---------------------------------------------------------------
import以下の部分を適当な関数の中にしまうとエラーは無いようですが、Import内のObservableが使用されていないになっている点が若干気にかかります。
その関数を実行すると、以下のように少し予想外の結果です。
・'/api/endpoint'は用意していないので404（Not Found)エラーがコンソールログに表示
(ここまでは予想通り)
・LocalHostからレスポンスが(404エラーであっても)返ってきているので正常終了処理実行
・したがってerror(err) { console.error('Error: ' + err); }処理はスルー
・当然complete() { console.log('Completed'); }は実行
URL'/api/endpoint'を存在するファイルにすれば、問題なく処理されます。
つまりこのケースでのerrは、サーバ側のプログラムが決めると考えて良いのかも？
(追記：ドメインをまたいだCORSエラーはErrorとして処理されます)
ただしWebサーバ(この場合はLocalHostですが)が返すresponseをどう処理するかについては、勉強する機会がなかったので、今後、機会があれば・・・という事にさせていただきます。
どこかで見た感想ですが、複数のpromise(この場合で言えばサーバからの値の取得)を組み合わせたりするのでなければ、RxJS使う必要はあまりないかもです。
(一つしかイベントの無いストリームな訳ですから)
逆に連鎖的に色々させたりするような色々な関数が用意されているようですので、用途と知識によっては便利なのだと思います。
次回は、私なりのまとめとしてゲームブックでサイコロを連続して振った時の統計情報の記録を試してみたいと思います。(Cookie Clickerみたいな感じ?)
