modo corretto per evitare che Angular2 richiesta HTTP memorizzazione nella cache in Internet Explorer (IE)

Question

Ho un problema ben noto quando IE Cache ajax richieste in jQuery abbiamo $.ajaxSetup({ cache: false });

soluzione più comune è quello di cambiare l'URL su ogni request ... Tuttavia c'è qualche soluzione angular2 specifica per questo problema?

utilizzando Angular2 e asp.net core

Answer 1

Non v'è alcun supporto nativo di questo all'interno Angular2. Devi implementarlo da solo.

Un possibile approccio sarebbe quello di implementare un intercettore HTTP e aggiungere un timestamp se la richiesta con l'URL è già stata eseguita.

Ecco un esempio:

@Injectable() 
export class CustomHttp extends Http { 
    urls: {string:string} = {}; 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    if (this.urls[url]) { 
     options = options || {}; 
     options.search = options.search || new URLSearchParams(); 
     options.search.set('timestamp', (new Date()).getTime()); 
    } 

    return super.get(url, options).do(() => { 
     this.urls[url] = true; 
    }); 
    } 
} 

È possibile registrare questa classe CustomHttp questo modo:

bootstrap(AppComponent, [ 
    HTTP_PROVIDERS, 
    provide(Http, { 
    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions), 
    deps: [XHRBackend, RequestOptions] 
    }) 
]); 

Vai a questa plunkr: https://plnkr.co/edit/Nq6LPnYikvkgIQv4P5GM?p=preview.

Answer 2

soluzione di Thierry è probabilmente meglio, ma se si vuole un low-tech, modo meno invasivo si potrebbe scrivere una funzione che aggiunge un parametro timestamp all'URL ..

utilità-service.ts:

noCacheUrl(url: string): string{ 
    const timestamp = "t=" + ((new Date()).getTime()); 
    const prefix = ((url.indexOf("?") !== -1) ? "&" : "?"); 

    return (url + prefix + timestamp); 
} 

... Ho definito tutti i miei URL in un file di impostazioni dell'app. Quindi, si potrebbe quindi utilizzare una funzione ottenere per recuperare l'URL .. che avrebbe la funzione eseguire la funzione noCacheUrl sull'URL 'pulito' ..

app-settings.ts:

import {UtilityService} from "../providers/utility-service"; 

@Injectable() 
export class AppSettings { 
    private static _AUTH_URL = "http://myurl.com"; 

    get AUTH_URL() { 
     return this.utilityService.noCacheUrl(AppSettings._AUTH_URL); 
    } 

    constructor(private utilityService: UtilityService) { 
    } 
} 

.. quindi per usarlo devi semplicemente inserire la classe AppSettings nel tuo componente e chiedere l'url usando il nome della funzione get.

export class MyComponent{ 
    constructor(private appSettings: AppSettings) { 
    } 

    getData(){ 
     const url = this.appSettings.AUTH_URL; 
    } 
} 

L'unico aspetto negativo che vedo a questo è che si deve iniettare la classe appSettings in ogni componente che si desidera utilizzare in mentre con costanti statiche normali non lo fai. Con le costanti statiche perdiamo la possibilità di eseguire l'elaborazione sui dati in fase di esecuzione, quindi c'è un trade. Immagino che potresti definire i tuoi URL in una classe const statica e poi chiamare la funzione no-cache sul valore ogni volta che vuoi usarlo .. ma è un po 'sciatto.