web-dev-qa-db-ja.com

Angular 6で取得するHttpClientでキャッシュを無効にする方法

HttpClientを使用してバックエンドから値を取得するAngular SPAアプリを作成しています。

キャッシュしないように指示する簡単な方法は何ですか？最初に値を取得するように要求すると、その後のクエリを拒否します。

ありがとう、ゲリー

angularcachinghttpclient
11
Gerry

メタ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">

または、

headersリクエストにhttpを追加してください：-

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は、アプリケーションで発生するHTTP要求を変更するのに最適な方法です。 HttpRequestが発生したときに呼び出すことができる注入可能なサービスとして機能します。

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);
  }
}

インターセプターの使用：

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