web-dev-qa-db-fra.com

Comment désactiver la mise en cache avec HttpClient, entrez Angular 6

J'écris une Angular SPA, qui utilise HttpClient pour obtenir des valeurs de mon backend.

Quel est le moyen facile de dire de ne pas mettre en cache? La première fois que je lui demande d'obtenir la valeur, il refuse ensuite de poser des questions.

Merci Gerry

angularcachinghttpclient
11
Gerry

Désactivez la mise en cache du navigateur à l’aide des balises méta HTML: -

<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

ou,

Ajouter headers dans http demander en tant que: -

headers = new Headers({
        'Cache-Control':  'no-cache, no-store, must-revalidate, post- 
                            check=0, pre-check=0',
        'Pragma': 'no-cache',
        'Expires': '0'
    });
19
Mahi

HTTPInterceptors est un excellent moyen de modifier les requêtes HTTP se produisant dans votre application. Il s'agit d'un service injectable pouvant être appelé lorsque HttpRequest se produit.

Intercepteur HTTP:

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

@Injectable()
export class CacheInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const httpRequest = req.clone({
      headers: new HttpHeaders({
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache',
        'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
      })
    });

    return next.handle(httpRequest);
  }
}

En utilisant Interceptor:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { CacheInterceptor } from './http-interceptors/cache-interceptor';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true }
  ]
})
export class AppModule { }
7
Pramod Mali