Observableを用いた待ち合わせ処理の記法について

[T-Ayumu]

AnguralのserviceからAWSにリクエストを送り、その結果をObservable、subscribeを用いて待ち合わせ処理を実現して、帰ってきたファイル一覧をwebの一覧に表示しする処理を書こうとしています。
promiseを用いた処理は正しく動作したのですが、angularとしてはObservableの仕様が推奨されていると認識しております。
以下のsampleのソースではsubscribe以降の処理が動かない状況です。

serviceに記載している関数

  // S3からのオブジェクトのリスト取得
  public listObjects() { 
    const params = {
      Bucket: environment.s3Bucket,
    };
    let res;
    return res = new Observable((observer) => {
      this.s3.send(new ListObjectsV2Command(params))
      console.log(this.s3.send(new ListObjectsV2Command(params)));
　 // こちらの出力でAWSから正しくオブジェクト一覧を取得できていることは確認できました。
    });
  }

componentに記載している呼び出し処理

      this.s3Service.listObjects().subscribe((list) => {
        console.log(list);

subscribe以降の行のconsole.logなどが正しく動いていないです。そのため、service側の記法に問題があるのではないかと推測していますが、どのように修正すればよろしいでしょうか？

[lacolaco]

new Observable() の使い方ですが、コールバック引数の subscriber のメソッドを呼び出さないと購読しても値が流れません。（ new Promise() の resolve と同じです）

const obs = new Observable((subscriber) => {
      subscriber.next('value');
});

obs.subscribe(v => {
    console.log(v); // => 'value'
});

参考になるであろう公式ドキュメントです
https://rxjs.dev/guide/observable

書かれているサンプルコードだと observer という名前の引数をとってはいるものの何も呼び出していないのがうまく動かない原因だと思います。

[ghost]

@lacolaco、@T-Ayumu、

AWS S3 インスタンスが new Promise() を返し、new Observable() コールバックに subscriber パラメータがある場合、コールバックは次のように変更できます:

- this.s3.send(new ListObjectsV2Command(params))
+ this.s3.send(new ListObjectsV2Command(params)).then(subscriber.next).catch(subscriber.error)
+ subscriber.complete()

RxJS にも、そのタスクを実行する from() 演算子があります。

[T-Ayumu]

@lacolaco @IRod22
有難うございます！本件解決しました。
自分が非同期処理など初心者だった為、すごい簡単な質問だったかもしれませんが親身に回答していただきありがとうございました！

[ghost]

@T-Ayumu もちろん！ 喜んでお手伝いします！ 結局のところ、それが GitHub ディスカッションの目的です。

[lacolaco]

@T-Ayumu 解決済みでよければ "Mark as answer" ボタンを押しておいてもらいたいです！