es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Angular 12 caché de API automática

29 Jul, 2023 Programación

Acabo de actualizar la versión de Angular de 10 a 12 y noté que cuando la página A se carga por primera vez y luego, de alguna manera, regreso a la página A a través de un enlace, no se muestra ninguna API en la pestaña de red. Coloqué console.log('prueba') y rastreé el problema, descubrí que se realiza la solicitud HTTP y se devuelve la respuesta, pero de alguna manera Angular 12 está almacenando en caché automáticamente la solicitud y no llama nuevamente a la API.
Quiero desactivar esta característica pero no puedo encontrar qué hacer.

Reproduce:

ngOnInit(): void {
  this.service.getDashboardInfo().subscribe(
    result => {console.log(result)},
    error => {console.log(error)}
  );
}

y this.service.getDashboardinfo() es:

return this.http.get(this.api.DASHBOARD, { observe: 'response', headers: new HttpHeaders({ 'Content-Type': 'application/json' }) });

Para la segunda visita de esta página, se llama a console.log(result), pero en la pestaña de red no se muestra nada en XHR y la respuesta de la API se devuelve al instante en lugar de tomar los 500ms normales, y supongo que esto tiene algo que ver con la caché automática de mi solicitud en Angular 12.

Esto solo ocurre con ng serve y en la versión de compilación o SSR todo funciona bien.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema aquí está relacionado con el mecanismo de caché en Angular 12. Angular 12 tiene una nueva estrategia de caché predeterminada para las solicitudes HTTP que puede hacer que los datos cargados previamente se sirvan desde la caché en lugar de hacer una nueva solicitud al servidor. Esto puede causar comportamientos inesperados como el que estás experimentando, donde tu solicitud de API no se muestra en la pestaña de red al volver a la página.

    Para desactivar la caché para tus solicitudes HTTP, puedes establecer la opción cache en false en las opciones de tu solicitud. Por ejemplo:

    return this.http.get(this.api.DASHBOARD, { 
  observe: 'response', 
  headers: new HttpHeaders({ 'Content-Type': 'application/json' }), 
  cache: false 
});

    Esto le indicará a Angular que no almacene en caché la respuesta para esta solicitud en particular. También puedes establecer esto a nivel global configurando HttpClientModule en tu archivo app.module.ts:

    import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { NoCacheInterceptor } from './interceptors/no-cache.interceptor';

@NgModule({
  imports: [
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: NoCacheInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

    Aquí, estamos proporcionando un nuevo interceptor NoCacheInterceptor que elimina la cabecera de caché de todas las solicitudes HTTP salientes. Puedes implementar el NoCacheInterceptor de la siguiente manera:

    import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class NoCacheInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<><any>> {
    const noCacheReq = req.clone({ headers: req.headers.set('Cache-Control', 'no-cache') });
    return next.handle(noCacheReq);
  }

}

    Este interceptor agrega una cabecera Cache-Control con el valor no-cache a todas las solicitudes HTTP salientes, lo que indica al servidor que no almacene en caché la respuesta.

    Implementar cualquiera de estas soluciones debería desactivar la caché para tus solicitudes HTTP en tu aplicación Angular 12.

Comments are closed.