Cancel Long Running Method on Button Click Angular with .Net Core

Question

Am working on Angular 8 with .Net Core, In my page if have two button "Search" and "Cancel Search". Is there a way to abort the Search button request when "Cancel Search" button is clicked? Scenario: Clicking on the Search button, the data is taking more time to be fetched from the Stored Proc and the user needs to iterate the search again. so he cancels the search and starts searching again. Cancelling the search should kill the session in the database too.

service.ts

Search(searchdata: any): Observable { const url = ${this.apiUrl}/SearchData;

return this.http.post<any>(url, searchdata).pipe(
  tap(() => this.logger.log(`Search Data`)),
  catchError(this.errorHandler.handleError<any>(""))
);

}

Controller

[HttpPost("SearchData")]
    public async Task<IActionResult> SearchData([FromBody] SearchData searchData, CancellationToken token = default(CancellationToken))
    {
        var result = await _apiService.PostRequest<SearchResults[]>(
                $"{_endpoint}/search/SearchData",
                JsonConvert.SerializeObject(ruleInfo),
                $"Error searching",
                token: token,
                timeout: TimeSpan.FromMinutes(10))
            .ConfigureAwait(false);
        return Ok(result);
    }

API Controller

[HttpPost("SearchData")]
    public async Task<IEnumerable<SearchResults>> SearchData([FromBody] SearchData searchData, CancellationToken tokenSource)
    {
        try
        {
            var result = await _searchService.SearchData(searchData, cancellationTokenSource);
            return result;
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

the API Controller will be calling the Stored Procedure which will be running long for some scenarios.

I have to implement the Cancel Search button functionality for cancelling the Search and also kill the session in the Database. Is there a way to trigger the cancellationtoken of Search functionality from the CancelSearch button click event and if so will it kill the DB session?

Please share how does your current implementation look like. Are you using Angular http client to fetch the data? — froghramar, May 10 '22 at 05:43
@froghramar Have added the Implementation, Thanks for responding. — Sylvester Naveen, May 10 '22 at 14:29

score 0 · Answer 1 · answered May 10 '22 at 15:55

When you call the Search method you can save the observable in a variable -

Search(){ this.observable = this.http.post().... }

Later you can cancel when the user clicks on the cancel button -

Cancel(){ this.observable.cancel() }

If you cancel this way, the pending http request will be cancelled. As you are already carrying the cancellation token in your API implementation, you are already in the right direction. I do not see the place where you are calling the stored procedure. If you also pass a cancellation token, most database driver should respect that.

Cancel Long Running Method on Button Click Angular with .Net Core

service.ts

Controller

API Controller

1 Answers1