One issue I am facing is that the http request is fetching data from the last request loaded instead of the most recent one. Is there a way to cancel the previous call and retrieve the new one?
The Component:
this.searchForm$.valueChanges
.pipe(debounceTime(500))
.subscribe((selectedValue) => {
this.loading = true;
this.sExperienceSearch = {...selectedValue.sExperience,...selectedValue.sExperience2,...selectedValue.sExperience3,...selectedValue.sExperience4}
this.sExperienceSearch.importanceMap = {...selectedValue.sExperience.importanceMap,...selectedValue.sExperience2.importanceMap}
this.apiService
.getSearch(this.sExperienceSearch)
.subscribe((data: any) => {
this.firstCall = false;
this.loading = false;
this.selectedValue = this.sExperienceSearch;
this.searchData = data;
this.numVendors = this.searchData.numVendors
? this.searchData.numVendors
: 0;
});
});
The Service:
return this.httpClient
.post<any[]>('/api/advanced-search', body, httpOptions)
.pipe(
distinctUntilChanged(),
map((data) => {
return data;
}),
catchError((error) => {
return throwError('Something went wrong!');
})
);