angular - 我如何在 rxjs 订阅函数中传递 value ?

我正在将代码切换到 rxjs

这是我的原始代码。

userAuth$: BehaviorSubject<ArticleInfoRes>;

  async loadArticleList(articleId: number) {
    try {
      const data = await this.articleApi.loadArticleList(articleId);
      this.userAuth$.next(data);
      return data;
    } catch (error) {
      return error;
    }
  }

随后,尝试转换为 rxjs,但未正确传递 value。 value 或错误必须传递到使用 loadArticleList 函数的位置。请告诉我怎么了

这是我尝试转换的代码。

userAuth$: BehaviorSubject<ArticleInfoRes>;

loadArticleList(articleId: number) {
  from(this.articleApi.loadArticleList(articleId)).subscribe(
    data => {
      this.userAuth$.next(data);
      return data;
    },
    error => {
      return error;
    }
  )
}

回答1

必须将 value 或错误传递到使用 loadArticleList 函数的位置。请告诉我怎么了

要直接回答您的问题,结果(即 value 或错误)未传递到您使用 loadArticleList() 的位置的原因是因为您的 RxJS pipeline 构建不正确。一方面,在订阅处理程序中添加 return data;return error; 实际上不会返回 dataerror

要获得结果,您可能希望将结果“涓涓细流”(流线型)到 RxJS pipeline 的下方,以便对该结果的订阅发生在您所说的位置,即使用 loadArticleList() 的位置。这意味着将您的呼叫移动到 loadArticleList() 之外的 .subscribe(),而不是内部。

所以,这是一个正确的 RxJS 修订:

import { tap } from "rxjs/operators";

userAuth$: BehaviorSubject<ArticleInfoRes>;

loadArticleList(articleId: number) {
  return from(this.articleApi.loadArticleList(articleId)).pipe(
    tap((data) => this.userAuth$.next(data)) // ? tap into the result to update the next userAuth$
  );
}

使用 tap RxJS 运算符,我们可以获取 loadAarticleList(articleId) 的结果,根据 tap 内部的回调函数对其进行处理(在这种情况下,只需更新 userAuth$ 的下一个 value),然后然后使用相同的抓取结果,未经修改,将其传递给订阅 loadArticleList() 的任何人。

最后,要将 dataerror 实际“传递”到使用 loadArticleList 函数的位置,只需在此处订阅即可。

// in your component's .ts somwehere, probably
loadArticleList(123).subscribe(
  data  => { /* do as you want with the result     */ },
  error => { /* add your error-handling logic here */ }
);

相似文章