0
125
VistasLos datos para la suscripción están llegando tarde para otro servicio
Estoy trabajando en un proyecto de comercio electrónico, donde he creado dos servicios. Servicio de Autenticación y Pedidos. A medida que el usuario inicia sesión, los datos se almacenan en la clase Usuario y se puede acceder a ellos a través de AuthService. Pero cuando suscribo los datos del usuario para el servicio de autenticación, llega tarde (asincrónico) y, a veces, la identificación del usuario no está disponible para el servicio de pedido.
¿Cómo puedo esperar una suscripción hasta que llegue el resultado? A continuación se muestra mi ejemplo de código. Cualquier ayuda sería apreciada.
A continuación se muestra el código del archivo HTML:
<div *ngIf="userOrders.length>0"> <h2>Your Orders</h2> <p>Below are the orders and status</p> <table class="table table-hover"> <thead> <tr> <th>Order Id</th> <th>Contact</th> <th>Address</th> <th>Amount</th> <th>Updated At</th> </tr> </thead> <tbody> <tr> <td>{{userOrders.orderId}}</td> <td>Doe</td> <td>john@example.com</td> </tr> </tbody> </table> </div>A continuación se muestra el código del archivo ts:
this._authService.user.subscribe(res=>{ this.userId=res.id; console.log(res) }) console.log(this.userOrders) this._orderService.getUserOrders(this.userId).subscribe(res=>{ this.userOrders=res; console.log(res) }) }A continuación se muestra el error al que me enfrento desde la interfaz. Como su respuesta viene asíncrona mientras HTML se carga con 0 de longitud.
2 Respuestas
Responde la pregunta0
Quizás su problema se resolvió, pero no es el enfoque correcto, para este caso puede usar switchMap de la biblioteca y tubería rxjs .
Con este ejemplo resolverás la asincronía entre los dos endpoints, el primer observable emitirá su valor y el "switchMap" recibirá el valor y devolverá un observable en este caso con el id del usuario.
Finalmente solo tienes una suscripción.
Más información sobre SwitchMap
import { switchMap } from 'rxjs/operators' this._authService.user .pipe( switchMap(data => { // this data comes from this._authService.user obseravble this.userId = data.id; return this._orderService.getUserOrders(data.id); // or this.userId }) ) .subscribe(response => { this.userOrders = response; });0
Hay un par de soluciones aquí. Siendo el más sencillo el siguiente. Aquí solo llamaría a la función getUserOrders(...) después de que authService haya devuelto una variable.
this._authService.user.subscribe(res=>{ this.userId=res.id; this._orderService.getUserOrders(this.userId).subscribe(res=>{ console.log(res) }) }) console.log(this.userOrders) }