2016-04-08 7 views
9

मैं एक प्रसिद्ध समस्या है में Angular2 http अनुरोध कैशिंग को रोकने के लिए जिस तरह से अनुरोध करता है enter image description here JQuery हम $.ajaxSetup({ cache: false });उचित जब IE ajax कैश इंटरनेट एक्सप्लोरर (आईई)

सबसे आम समाधान प्रत्येक पर यूआरएल को बदलने के लिए है अनुरोध ... हालांकि इस समस्या के लिए कोई कोणीय 2-विशिष्ट समाधान है?

Angular2 और asp.net core

उत्तर

9

का उपयोग कर रहे Angular2 के भीतर इस का कोई देशी समर्थन है। आपको इसे स्वयं लागू करना होगा।

HTTP इंटरसेप्टर को लागू करने और यूआरएल के साथ अनुरोध को पहले से ही निष्पादित कर दिया गया है, तो एक संभावित दृष्टिकोण होगा।

यहाँ एक नमूना है: https://plnkr.co/edit/Nq6LPnYikvkgIQv4P5GM?p=preview:

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

इस plunkr देखें:

@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 वर्ग इस तरह से रजिस्टर कर सकते हैं।

+0

इस बारे में कोई समाचार अब या भविष्य में समर्थन कर रहा है? – Phil

+0

'urls: {string: string} = {}; 'आप इसे कोणीय 5 के साथ काम करने के लिए कैसे बदलेंगे? –

0

थियरी के समाधान शायद सबसे अच्छा है, लेकिन अगर आप एक कम तकनीकी चाहते हैं, कम दखल जिस तरह से आप एक समारोह है जो URL से एक टाइमस्टैम्प पैरामीटर जोड़ देता ..

उपयोगिता-service.ts लिख सकते हैं:

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

    return (url + prefix + timestamp); 
} 

... मैंने अपने सभी यूआरएल को ऐप-सेटिंग्स फ़ाइलों में परिभाषित किया है। तो, आप फिर URL प्राप्त करने के लिए मिल समारोह इस्तेमाल कर सकते हैं .. कि समारोह 'साफ़' यूआरएल पर noCacheUrl समारोह चल पाएंगे ..

एप्लिकेशन-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 क्लास इंजेक्ट करें और प्राप्त फ़ंक्शन के नाम का उपयोग करके यूआरएल मांगें।

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

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

केवल नकारात्मक पक्ष यह है कि मैं इस के लिए देखते हैं कि आप हर घटक आप इसे में उपयोग करने के लिए है, जबकि नियमित रूप से स्थिर स्थिरांक के साथ तुम नहीं चाहते में appSettings वर्ग इंजेक्षन करना है। स्थैतिक स्थिरांक के साथ हम रनटाइम पर डेटा पर प्रसंस्करण चलाने की क्षमता खो देते हैं, इसलिए एक व्यापार है। मुझे लगता है कि आप अपने यूआरएल को स्थैतिक कॉन्स क्लास में परिभाषित कर सकते हैं और फिर जब भी आप इसका उपयोग करना चाहते हैं तो मूल्य पर नो-कैश फ़ंक्शन को कॉल कर सकते हैं .. लेकिन यह थोड़ा सा मैला है।

संबंधित मुद्दे