在Internet Explorer(IE)中防止Angular2 http请求缓存的正确方法

时间:2016-04-08 13:26:04

标签: angular asp.net-core-1.0

当IE缓存ajax请求时,我有一个众所周知的问题 enter image description here 在JQuery中,我们有$.ajaxSetup({ cache: false });

最常见的解决方案是更改每个请求的网址... 但是,针对这个问题是否存在针对特定角度2的解决方案?

使用Angular2asp.net core

2 个答案:

答案 0 :(得分:9)

Angular2中没有本机支持。你需要自己实现这个。

一种可能的方法是实现HTTP拦截器,如果已经执行了带URL的请求,则附加时间戳。

以下是一个示例:

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

您可以通过以下方式注册此CustomHttp课程:

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

请参阅此plunkr:https://plnkr.co/edit/Nq6LPnYikvkgIQv4P5GM?p=preview

答案 1 :(得分:2)

Thierry的解决方案可能是最好的,但是如果你想要一种低技术,低侵入性的方式,你可以编写一个向URL附加时间戳参数的函数。

<强>效用service.ts:

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

    return (url + prefix + timestamp);
}

...我在应用设置文件中定义了我的所有网址。因此,您可以使用 get 函数来检索URL ..该函数将在&#39; clean&#39;上运行noCacheUrl函数。 URL ..

应用-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) {
    }
}

..然后使用它只需将AppSettings类注入到组件中,并使用get函数的名称来请求url。

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

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

我看到的唯一缺点就是你必须将appSettings类注入你想要使用它的每个组件中,而使用常规的静态常量你不会。对于静态常量,我们失去了在运行时对数据进行处理的能力,因此进行了交易。我想你可以在一个静态const类中定义你的URL,然后在你想要使用它的时候在值上调用no-cache函数..但是这有点草率。