मुझे पता है कि इस तरह के बहुत सारे प्रश्न हैं लेकिन वे अक्सर मुझे भ्रमित करते हैं या मेरी स्थिति पर लागू करना मेरे लिए मुश्किल होता है, इसलिए मैं यहां पूछ रहा हूं ताकि मैं इसे अपने सिर के चारों ओर ले सकूं। मेरी घटक टाइपस्क्रिप्ट फ़ाइल में मेरे पास एक विधि है जो एक सेवा को कॉल करती है जो http का उपयोग करके एपीआई डेटा लौटाती है, इसलिए जब कोई उपयोगकर्ता इंटरफ़ेस पर एक चिप पर क्लिक करता है तो वे निम्नलिखित को कॉल करते हैं ..

fetchCounts(filters?: any): void {
    this.loaded = false;
    this.apiCall = this.api.getCounts(filters).subscribe((results: any) => {
        // do something with the returned data
        this.loaded = true;
        this.apiCall.unsunscribe()
    });
}

मेरी एपीआई सेवा इस तरह दिखती है:

getCounts(filters?: any): Observable<any> {
    let params: any;
    if (filters?.car?.length || filters?.bike?.length) {
      params = this.addObjectToParams(new HttpParams(), filters);
    }
    return this.http.get('api/counts', { params } )
      .pipe(map(this.extractData));
}

अब मैंने देखा है कि जब कोई उपयोगकर्ता एपीआई कॉल करने वाले चिप्स को जोड़ने और हटाने के लिए मेरे इंटरफ़ेस पर क्लिक करता है तो ऐसा लगता है कि इंटरफ़ेस अब अधिभार/एपीआई कॉल की बड़ी मात्रा के कारण सही डेटा नहीं दिखाता है। इसलिए यदि कोई नया बनाया जाता है (यदि fetchCounts फिर से कॉल किया जाता है तो मैं वर्तमान एपीआई/http कॉल को रद्द करना चाहता हूं)। मैंने .पाइप में getCountsइस तरह की विधि... .pipe( debounceTime(500), map(this.extractData)); में एक बहस जोड़ने की कोशिश की है, लेकिन यह कुछ भी नहीं कर रहा है। मुझे लगता है कि मुझे एक switchMap जोड़ना है, लेकिन जब मैं अपना कोड जोड़ता हूं तो यह मेरी ओर से समझ की कमी के कारण टूट जाता है। मैं वर्तमान में दस्तावेज़ देख रहा हूं ... लेकिन किसी भी मदद की सराहना की जाएगी।

1
NewToAngular 19 अक्टूबर 2020, 15:46

2 जवाब

सबसे बढ़िया उत्तर

इस मामले में, आप केवल unsubscribe पद्धति का उपयोग करके पिछली कॉल की सदस्यता समाप्त कर सकते हैं। switchMap का उपयोग तब किया जाता है जब हमारे पास उच्च-क्रम देखने योग्य होता है।

अगली कॉल करने से पहले बस पिछली कॉल को अनसब्सक्राइब करें।

fetchCounts(filters?: any): void {
    this.loaded = false;
    this.apiCall && this.apiCall.unsunscribe(); // Unsubscribe here as well.
    this.apiCall = this.api.getCounts(filters).subscribe((results: any) => {
        // do something with the returned data
        this.loaded = true;
        this.apiCall.unsunscribe();
    });
}
2
Prince 19 अक्टूबर 2020, 15:55

अगर आप सब्सक्रिप्शन के साथ डील करने से बचना चाहते हैं, तो आपके लिए सब्जेक्ट मैनेज कर सकता है। ऐसा कुछ दिख सकता है:

private _fetchCountsExe: Subject<any>;

constructor(){
  this._fetchCountsExe = new Subject<any>();
  this._fetchCountsExe.pipe(
    tap(_ => this.loaded = false),
    switchMap(filters => this.api.getCounts(filters))
  ).subscribe(results => {
    // do something with the returned data
    this.loaded = true;
  });
}

fetchCounts(filters?: any): void {
    this._fetchCountsExe.next(filters);
}

constructor() में कोड कहीं भी रखा जा सकता है जो आपकी सेवा शुरू होने पर चलता है। अब स्विच मैप पुराने सब्सक्रिप्शन को रद्द करने और नए में स्विच करने का सारा काम करेगा।

इससे कई फायदे होते हैं।

उनमें से मुख्य यह है कि यह डिज़ाइन काम करने के लिए जावास्क्रिप्ट के ईवेंट लूप पर निर्भर नहीं करता है। एक अवलोकन योग्य से सदस्यता समाप्त करने के इस सरल उदाहरण पर विचार करें:

const subscription = from([1,2,3,4]).subscribe(_ => 
  subscription.unsubscribe();
);

यह हमेशा विफल रहेगा। चूंकि यह अवलोकन योग्य समकालिक रूप से चलाया जाता है, subscription अभी भी अपरिभाषित रहेगा और unsubscribe() में इसका उपयोग नहीं किया जा सकता है।

आपके वर्तमान कोड में एक छिपी हुई दौड़ की स्थिति है जो आपके लिए जावास्क्रिप्ट के ईवेंट लूप के काम करने के तरीके के आधार पर काम करती है। हालाँकि, यह आपके कोड को भंगुर बना सकता है। उदाहरण के लिए, यदि आप (भविष्य में) हाल के मानों को कैश करने का निर्णय लेते हैं और यदि वे पर्याप्त ताज़ा हैं, तो उन्हें तुरंत वापस कर दें, तो आपका कोड अप्रत्याशित रूप से टूट जाएगा।

यह दृष्टिकोण वैश्विक दायरे में सदस्यता डालने से भी बचता है जिसका उपयोग केवल एक फ़ंक्शन में किया जाता है। इसके बजाय, आपके पास एक विषय है जो क्रिया का वर्णन करता है और एक फ़ंक्शन जो क्रिया को प्रारंभ करता है।

0
Mrk Sef 22 अक्टूबर 2020, 23:35