Saltar al contenido

¿Cómo cancelar la solicitud http en Angular 6?

Esta es la respuesta más correcta que te podemos dar, pero obsérvala pausadamente y valora si se puede adaptar a tu trabajo.

Solución:

Larga historia corta:

La forma más fácil de manejar tales situaciones es usando el operador switchMap. Lo que esto hace es cancelar la suscripción interna tan pronto como aparece un nuevo evento.

Una implementación sería:

class MainComponent 
  products: any[];
  private _filters$ = new Subject();

  constructor(private dataService: DataService_, private filtersService: FiltersService) 

  

  ngOnInit() 
    this.setProducts()
  

  setProducts() 
    this._filters$
        .switchMap((filters)=> this.dataService.getProducts(filters)) // or .let(switchMap...) if you are using rxjs >5.5
        .subscribe(products => this.products = products);
  

  onFiltersChange() 
    this._filters$.next(this.filtersService.filters);
  

Larga historia:

Lo que sucede aquí es: cuando cambia el filtro, se activa onFilterChange. A continuación, emite los filtros más recientes (dentro de this.filtersService.filters) a través del Asunto _filters$ (un asunto es casi idéntico a un EventEmitter).

En el pasado, durante la inicialización del componente, el método ngOnInit llamó a setProducts, que se suscribió al asunto _filters$ para eventos futuros (ninguno ha ocurrido en este momento). Cuando llega un evento a _filters$, activamos el método getProducts del servicio de datos y le pasamos los filtros que estaban contenidos en el evento. Estaremos esperando en esta línea hasta que se complete la llamada http. Tan pronto como se complete, el resultado de la llamada http se asignará a los productos del componente.

Si mientras estamos esperando el respuesta http para regresar, onFiltersChange se activa nuevamente, luego llegará un nuevo evento en switchMap y cancelará la solicitud http anterior para que pueda manejar el nuevo evento.

Este es un enfoque muy poderoso ya que al cambiar un solo operador, puede cambiar fácilmente el comportamiento de su aplicación. Por ejemplo, cambiar switchMap a concatMap hará que la solicitud espere a que se complete la anterior (ocurrirá en serie). Cambiarlo a flatMap tendrá el mismo comportamiento que el código original que publicaste (solicitud https ocurrirá tan pronto como cambien los filtros, sin afectar a los anteriores, el orden de las respuestas no será predecible) y así sucesivamente.

valoraciones y comentarios

Si haces scroll puedes encontrar los comentarios de otros gestores de proyectos, tú asimismo tienes la libertad de dejar el tuyo si lo crees conveniente.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *