Este es el código original.
// info.service.ts. this.info$ = new BehaviorSubject<Info>(null); async getInfo() { try { const info = await this.infoApi.getInfo(); console.log(info) // info {name: 'sdf', 'age': 12} this.info$.next(info); } catch { this.info$.next(null); } } // infoApi Class getInfo() { return this.apiService.get<Info>(`/info`, this.infoService....); } Para el procesamiento asíncrono con rxjs, modificamos el código de la siguiente manera. Otros códigos de procesamiento asincrónico en mi proyecto también se modificaron a rxjs de la siguiente manera y funcionan bien. Sin embargo, solo el servicio getinfo no funciona correctamente. El procesamiento asincrónico no avanza correctamente. Como resultado de la verificación del panel de red, la solicitud de datos de información se verifica en el estado administrado. Por favor, hágamelo saber si hay algún problema esperado.
(Asíncrono, la espera no está disponible, así que estoy tratando de usar Rxjs).
Ambas versiones de código no funcionan como se esperaba.
primera versión
// info.service.ts getInfo() { from(this.infoApi.getInfo()).subscribe( info => {this.info$.next(info); console.log(info) // null error => {this.info$.next(error) } ) } // infoApi Class getInfo() { return this.apiService.get<Info>(`/info`, this.infoService....); } // api.service.ts get<T>(url: string, opts?: options) { return this.request<T>('GET', url, null, opts); }segunda versión
// info.service.ts getInfo() { this.infoApi.getInfo().subscribe( info => {this.info$.next(info); console.log(info) // null error => {this.info$.next(error) } ) } // infoApi Class getInfo() { return from(this.apiService.get<Info>(`/info`, this.infoService....); } // api.service.ts get<T>(url: string, opts?: options) { return this.request<T>('GET', url, null, opts); }getInfo() devuelve un Observable, no hay necesidad de usar from() en su info.servive.ts.
También el formato en la sección de suscripción podría ser:
getInfo() { this.infoApi.getInfo() .subscribe({ next: (info => {this.info$.next(info); console.log(info)}), // null error: (error => this.info$.next(error)) } ) }He construido un pequeño ejemplo usando randomAPI
info.servicio.ts
import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; import { tap } from 'rxjs/operators'; // Using random data api for example export type Info = { blend_name: string; }; @Injectable({ providedIn: 'root', }) export class infoApiService { info$: BehaviorSubject<Info> = new BehaviorSubject<Info>(null); constructor(private http: HttpClient) { // Use subscription for making BehaviorSubject work... this.getInfo().subscribe() } getInfo() { return this.http .get<Info>('https://random-data-api.com/api/coffee/random_coffee') .pipe( tap({ next: (info) => { this.info$.next(info); console.log('logging in tap', info); }, error: (error) => this.info$.error(error), }) ); } }aplicación.componente.ts
import { Component, OnInit, VERSION } from '@angular/core'; import { Observable } from 'rxjs'; import { Info, infoApiService } from './info.service'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { infoObs$!: Observable<Info>; constructor(private info: infoApiService) { this.infoObs$ = this.info.info$.asObservable(); } }aplicación.componente.html
<div *ngIf="infoObs$ | async"> <h3>The info is here : {{ (infoObs$ | async).blend_name }}</h3> </div>Está disponible en StackBlitz: https://stackblitz.com/edit/angular-ivy-wgjsfa?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Finfo.service .ts