typescript - Angular 8 Http get-förfrågan utan cache


En get-förfrågan i min Angular-applikation kan hämta datan men den förfrågan lagras i cache och när jag går till en annan sida och sedan återvänder till den sidan ser jag ingenting. Get-förfrågan triggas men detta är vad svaret är i nätverksfliken.

Request URL: example.com
Request Method: GET
Status Code: 301  (from disk cache)
Remote Address: 104.27.136.237:443
Referrer Policy: no-referrer-when-downgrade

det här är vad jag får, jag vill bara trigga http-get eller tvinga det anropet och hämta objekt och visa dem

här är min koddel

constructor(private http:HttpClient,public dialog: MatDialog){
    const httpOptions = {
      headers: new HttpHeaders({
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache',
        'Content-Type':  'application/json',
        'API-KEY': localStorage.getItem("key"),

      })
    }
    this.back =this.backend + localStorage.company_domain
    this.backenddata=this.http.get(this.back,httpOptions).subscribe(
      backenddata=>{
    let ok=backenddata["results"];
    console.log(ok);
}}

k

Note:By refreshing i'm able to fetch the data but while changing from one page to another page using angular route i'm seeing that 301 response in the network tab
Note:I Have already tried HttpInterceptors still had no luck with that 
Note:  Tried <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
  <meta http-equiv="Pragma" content="no-cache" />  

finns det något bättre alternativ för att trigga förfrågningar utan att bli störd av cache

Svar #1

Från klientsidan, om du ändrar URL:en varje gång du gör GET-förfrågan genom att lägga till en ny frågeparameter, kommer inte webbläsaren att cachelagra den. Vi kan lägga till en cache-busting frågeparameter med ett värde av den aktuella tiden i millisekunder.

Det här är inte särskilt elegant, men det kan hjälpa.

constructor(private http:HttpClient,public dialog: MatDialog){
    const httpOptions = {
      headers: new HttpHeaders({
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache',
        'Content-Type':  'application/json',
        'API-KEY': localStorage.getItem("key"),

      })
    }
    // the new Date().getTime() will add the current time in miliseconds to the end
    this.back = `${this.backend}${localStorage.company_domain}?cache_bust=${new Date().getTime()}`
    this.backenddata=this.http.get(this.back,httpOptions).subscribe(
      backenddata=>{
    let ok=backenddata["results"];
    console.log(ok);
}}

Det bättre sättet skulle vara att lösa det på klientsidan genom att sätta rätt cachekontrollrubriker. Hur man gör det beror på din serverteknologi.

Relaterade artiklar