angular - 如何在 RxJs Observable 构造函数中使用异步调用

Question

我正在设置一个 effect在使用 NgRx 的应用程序中。
在效果期间，我需要获取一些存储值，执行一些逻辑，然后根据我运行的逻辑调度一个或多个操作。
所以，为了更容易，我使用了 dispatch: false 的效果.

public getCachedOrServerValue$ = createEffect(() =>
    this.actions$.pipe(
      ofType(myActions.getCachedOrServerValue),
      switchMap((_) => this.getCachedOrServerValue())
    ), { dispatch: false }
);

所以在上面我会打电话 getCachedOrServerValue .我想用 switchMap (而不仅仅是 tap )所以如果我得到一个新的 myActions.getCachedOrServerValue在上一个完成之前，它将取消上一个订阅(根据我对 switchMap 的理解)。
我们调用的函数如下所示:

private getCachedOrServerValue(): Observable<void> {
  const result$ = new Observable<void>(async (subscriber) => { // <---- I need this to be async so I can use await
    // First see if we can get it from the store
    const cached = await this.storeUtils.getStoreValue(fromApp.getValue);
    if (cached) {
      this.store$.dispatch(myActions.getCachedOrServerValueSuccess(cached));
      subscriber.next();
      return;
    }

    // Need to request from the server
    const name = await this.storeUtils.getStoreValue(fromApp.getSiteName);

    // storeUtils.getStoreValue is just a helper we have to get a single value as a Promise
    const valueId = await this.storeUtils.getStoreValue(fromApp.getValueId);
    const serverValue = await this.myService.getValue(namevalueId);
    this.store$.dispatch(myActions.storeValue(serverValue));
    this.store$.dispatch(myActions.getCachedOrServerValueSuccess(cached));
  });
  return result$;
}

首先，我封装了一个 observable，因为我记得我们需要一个 observable 来在 switchMap 中使用这个调用。 .
第二(我的实际问题)，我希望能够使用 await在 Observable 内部 subscriber构造函数参数，但 VSCode 报告错误。

错误详情:

Argument of type '(this: Observable, subscriber: Subscriber) => Promise' is not assignable to parameter of type '(this: Observable, subscriber: Subscriber) => TeardownLogic'.Type 'Promise' is not assignable to type 'TeardownLogic'.Property 'unsubscribe' is missing in type 'Promise' but required in type 'Unsubscribable'.ts(2345)

types.d.ts(31, 5): 'unsubscribe' 在这里声明。
这里有什么问题，以及如何使用 aysnc/await如上图？
更新
从@StPaulis 的回答开始，我可以避免这样做(至少在这种情况下)。
我可以像下面这样做(尚未测试，但我肯定会没事):

public getCachedOrServerValue$ = createEffect(() =>
  this.actions$.pipe(
    ofType(myActions.getCachedOrServerValue),
    switchMap(_ => from(this.getCachedOrServerValue()).pipe( // <-- use a from here 
         map(data => myActions.getCachedOrServerValueSuccess(data)),
         catchError(error => of(myActions.getCachedOrServerValueFail(error)))
))));

private async getCachedOrServerValue(): Promise<DataState>{
 // First see if we can get it from the store
 const cached = await this.storeUtils.getStoreValue(fromApp.getValue);
 if (cached) {
    return cached;
 }

 // Need to request from the server
 const name = await this.storeUtils.getStoreValue(fromApp.getName);
 const valueId = await this.storeUtils.getStoreValue(fromApp.getValueId);
 const serverValue = await this.myService.getValue(name, valueId);
 return serverValue;
}

Answer 1

在我看来，将 observables 与 promises 混合起来从来都不是一个好主意。
我建议你使用 RxJs | from将您的 promise 转换为可观察的并在您的管道中使用它，而不是创建一个新的可观察的并将所有逻辑包装在里面。
RxJs 的目的是替换 (async | await) 功能。