कोणीय सेवा में पिछले HTTP अनुरोधों को रद्द करने के लिए RxJS का उपयोग कैसे करें

मुझे पता है कि इस तरह के बहुत सारे प्रश्न हैं लेकिन वे अक्सर मुझे भ्रमित करते हैं या मेरी स्थिति पर लागू करना मेरे लिए मुश्किल होता है, इसलिए मैं यहां पूछ रहा हूं ताकि मैं इसे अपने सिर के चारों ओर ले सकूं। मेरी घटक टाइपस्क्रिप्ट फ़ाइल में मेरे पास एक विधि है जो एक सेवा को कॉल करती है जो 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 जोड़ना है, लेकिन जब मैं अपना कोड जोड़ता हूं तो यह मेरी ओर से समझ की कमी के कारण टूट जाता है। मैं वर्तमान में दस्तावेज़ देख रहा हूं ... लेकिन किसी भी मदद की सराहना की जाएगी।