javascript cache - 在Angular 2中阻止IE11緩存GET調用





problem (5)


有點晚了,但我遇到了同樣的問題。 對於Angular 4.X,我寫了一個自定義的Http類,在末尾附加一個隨機數,以防止IE緩存。 它基於dimeros的第二個鏈接( 什麼是angular2中的httpinterceptor等效? )。 警告:不保證100%無bug。

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Response, XHRBackend, RequestOptions, RequestOptionsArgs, 
URLSearchParams } from '@angular/http';

@Injectable()
export class NoCacheHttp extends Http {
    constructor(backend: XHRBackend, options: RequestOptions) {
        super(backend, options);
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        //make options object if none.
        if (!options) {
            options = { params: new URLSearchParams() };
        }
        //for each possible params type, append a random number to query to force no browser caching.
        //if string
        if (typeof options.params === 'string') {
            let params = new URLSearchParams(options.params);
            params.set("k", new Date().getTime().toString());
            options.params = params;

        //if URLSearchParams
        } else if (options.params instanceof URLSearchParams) {
            let params = <URLSearchParams>options.params;
            params.set("k", new Date().getTime().toString());

        //if plain object.
        } else {
            let params = options.params;
            params["k"] = new Date().getTime().toString();
        }
        return super.get(url, options);
    }
}

我有一個休息端點,它在GET調用上返回一個列表。 我還有一個POST端點來添加新項目,還有一個DELETE來刪除它們。 這適用於Firefox和Chrome,POST和DELETE適用於IE11。 但是,IE11中的GET僅適用於頁面的初始加載。 刷新返回緩存的數據。 我在Angular 1中看到過有關此行為的帖子,但Angular 2(發布候選人1)沒有任何內容。




如上所述,您可以覆蓋RequestOptions以添加所需的標頭:

import { Injectable } from '@angular/core';
import { BaseRequestOptions, Headers } from '@angular/http';

@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
    headers = new Headers({
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache',
        'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
    });
}

模塊:

@NgModule({
    ...
    providers: [
        ...
        { provide: RequestOptions, useClass: CustomRequestOptions }
    ]
})



今天,我也有這個問題,(該死的IE)。 在我的項目中,我使用的是沒有BaseRequestOptions httpclient 。 我們應該使用Http_Interceptor來解決它!

import { HttpHandler,
    HttpProgressEvent,
    HttpInterceptor,
    HttpSentEvent,
    HttpHeaderResponse,
    HttpUserEvent,
    HttpRequest,
    HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

export class CustomHttpInterceptorService implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler):
      Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
      const nextReq = req.clone({
        headers: req.headers.set('Cache-Control', 'no-cache')
          .set('Pragma', 'no-cache')
          .set('Expires', 'Sat, 01 Jan 2000 00:00:00 GMT')
          .set('If-Modified-Since', '0')
      });

      return next.handle(nextReq);
  }
}

模塊提供

@NgModule({
    ...
    providers: [
        ...
        { provide: HTTP_INTERCEPTORS, useClass: CustomHttpInterceptorService, multi: true }
    ]
})






今天 - 2018.06.27我提供了純js解決方案的時間比較。 這對於想要以輕/高效方式獲取/測量JS時間的人來說非常有用(例如,對於模擬,遊戲等實時應用程序)

在Chrome 67.0.3396.99(64位),Safari 11.0.3(13604.5.6),Firefox 59.0.2(64位)上的MacOs High Sierra 10.13.3上進行了測試。 在下面的屏幕截圖中,我展示了最快瀏覽器(Safari)的結果:

我觀察到Date.now()是獲取所有三個瀏覽器的時間戳的最快方法。 Safari每秒運行19.2M,Firefox 16.1M,Chrome 7.8M。

Chrome(2.8M)和Firefox(2.6M)的new Date()*1最慢。 Safari(2.9M)的Number(new Date())最慢。

因此,獲勝者JS代碼是Date.now() ,最快的瀏覽器是Safari(比Chrome快2倍!)。

您可以在此處對您的機器進行測試: https://jsperf.com/timestamp-test-xhttps://jsperf.com/timestamp-test-x





javascript angular typescript internet-explorer-11 http-caching