Estoy trabajando para cambiar el código a rxjs
aquí está mi código original.
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; } }Posteriormente, se intentó convertir a rxjs, pero el valor no se entregó correctamente. Se debe pasar un valor o error a la ubicación donde se usa la función loadArticleList. por favor dime que esta mal
Este es el código que traté de convertir.
userAuth$: BehaviorSubject<ArticleInfoRes>; loadArticleList(articleId: number) { from(this.articleApi.loadArticleList(articleId)).subscribe( data => { this.userAuth$.next(data); return data; }, error => { return error; } ) }Se debe pasar un valor o error a la ubicación donde se usa la función loadArticleList. por favor dime que esta mal
Para responder a su pregunta directamente, la razón por la cual el resultado (es decir, el valor o el error) no se pasa a donde usa loadArticleList() es porque su tubería RxJS no está construida correctamente. Por un lado, agregar return data; y return error; en sus controladores de suscripción en realidad no devolverán data ni error .
Para obtener el resultado, es posible que desee "filtrar" (optimizar) ese resultado más abajo en la canalización de RxJS, de modo que la suscripción a ese resultado ocurra en la ubicación de la que habla, donde se usa loadArticleList() . Esto se traduce en mover su llamada a .subscribe() fuera de loadArticleList() , no dentro.
Entonces, aquí hay una revisión adecuada de 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$ ); } Usando el operador tap RxJS, podemos obtener el resultado de loadAarticleList(articleId) , procesarlo de acuerdo con su función de devolución de llamada dentro de tap (en este caso, simplemente actualice el siguiente valor de userAuth$ ), y luego con ese mismo resultado capturado, sin modificar , páselo a quien se suscriba a loadArticleList() .
Finalmente, para "pasar" data o error a la ubicación donde se usa la función loadArticleList , simplemente suscríbase allí.
// 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 */ } );