取消从 Angular 到 .NET Core 的 Long 操作

Question

I try to send a cancellation request (on c# AspNetCore based on Abp Boilerplate) from Angular client (use Observable -> unsubscribe...) to cancel long Task Operation but API not fire.

    [HttpPost]
        public async Task<GetDataOutputDto> GetDataLongOperation(CustomInputDto input)
        {
            try
            {
                var tokenSource = new CancellationTokenSource(); // _httpContextAccessor.HttpContext.RequestAborted;
                tokenSource.CancelAfter(2500);

                var token = _httpContextAccessor.HttpContext.RequestAborted; //tokenSource.Token;

                var settings = new JsonSerializerSettings
                {
                    Error = (sender, args) => {
                        args.ErrorContext.Handled = true;
                    },
                    MissingMemberHandling = MissingMemberHandling.Ignore
                };


                //... remove for brev
        }

on angular side

                this.subscription = this.loadData(undefined).subscribe(res=>{
                    console.log('data loaded!');
                    this.localData = res.data;
                    //this._rawData = this.localData;
                    this.loadItems();
                    
                });

                setTimeout(() => {
                    console.log('TEST stop long') 
                    this.subscription.unsubscribe();
                }, 2500);

I test that if I use TaskSource with CancelAfter all code behind work well but from web (client side) I can't fire the cancellation operation

Answer 1

You can add a CancellationToken as parameter of you controller action, you don't need to create a CancellationTokenSource in your controller. This token will be cancelled when the HTTP Request is cancelled by the unsubscribe in angular.

        [HttpPost]
        public async Task<GetDataOutputDto> GetDataLongOperation(CustomInputDto input, CancellationToken token)
        {
            try
            {
                var settings = new JsonSerializerSettings
                {
                    Error = (sender, args) => {
                        args.ErrorContext.Handled = true;
                    },
                    MissingMemberHandling = MissingMemberHandling.Ignore
                };
        }
        catch(TaskCanceledException e)
        {
            //The observable was unsubscribed in angular
        }

Answer 2

I found a solution all depends in wich way Angular close / cancel connection.

I use this solution angular-how-to-cancel-http-calls-on-router-change angular-how-to-cancel-http-calls-on-router-change

I put it on root.module.ts so now when user change route all connection receive cancellation and it close the flow if is implemented.