Angular 15: How to Prevent Duplicate HTTP Requests on Rapid User Input with Reactive Forms?
I'm converting an old project and I'm integrating two systems and After trying multiple solutions online, I still can't figure this out... I've looked through the documentation and I'm still confused about I've been struggling with this for a few days now and could really use some help... Quick question that's been bugging me - I'm working on an Angular 15 application where users can submit a search term in a reactive form. I've noticed that when users type quickly, multiple HTTP requests are sent to the backend, which causes unnecessary load and can lead to performance issues. I've tried using `debounceTime` in my observable, but it doesn't seem to prevent duplicate requests when the user types rapidly. Here’s the code I currently have: ```typescript import { Component } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { debounceTime, switchMap } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { MyService } from './my.service'; @Component({ selector: 'app-search', templateUrl: './search.component.html' }) export class SearchComponent { searchForm: FormGroup; private searchSubject = new Subject<string>(); constructor(private fb: FormBuilder, private myService: MyService) { this.searchForm = this.fb.group({ searchTerm: [''] }); this.searchForm.get('searchTerm')?.valueChanges .pipe( debounceTime(300), switchMap(term => this.myService.search(term)) ) .subscribe(response => { console.log(response); }); } } ``` The issue arises when the user types quickly, and multiple requests are still being sent, resulting in outdated data being displayed. I have a loading spinner in place, but it doesn't help with the backend load. I've considered using a combination of `distinctUntilChanged` and `switchMap`, but I'm not sure if that's the right approach. Also, I'm looking for a way to cancel ongoing requests when a new request is made. Any suggestions on how to better handle this situation? Is there a recommended pattern for managing such rapid input changes without overwhelming the server? My development environment is Ubuntu. What's the best practice here? This is part of a larger API I'm building. Any ideas what could be causing this? This is part of a larger API I'm building. Any help would be greatly appreciated! Any advice would be much appreciated. This issue appeared after updating to Typescript 3.9. Any suggestions would be helpful. I'm coming from a different tech stack and learning Typescript. I'm working in a Windows 10 environment. What are your experiences with this?