While switching to a menu, I retrieve data from the API. As the pending data is still loading in DevTools, I click on the Filter button to search for additional data. The data I am searching for appears in my table. However, once the pending data finishes loading, the previously searched data disappears.
This is the command line used to retrieve the data
protected loadData = (params) => {
$.ajax({
method: 'GET',
url: this.tableUrl,
data: params.data,
beforeSend: (request) => {
request.setRequestHeader('Authorization', `Bearer ${this.authService.getToken()}`);
}
}).done((response) => {
params.success(response);
});
}
https://i.sstatic.net/fEeGu.png
In the requests provided above, the top request takes approximately 40 seconds to complete while the bottom one takes only 1 second. The faster request retrieves data within 1 second. Therefore, during filtering, data fetched within 1 second gets overwritten by data retrieved after waiting for 39 seconds. To solve this issue, it is necessary to cancel requests related to "referenceTumList?PageIndex=0&PageSize=10" while actively filtering.