refactor(http): replace zone.js macrotask creation with InitialRenderPendingTasks (#50425)

alan-agius4 · dylhunn · commit 0c80349cf649 · 2023-05-30T12:58:22.000-07:00
This commits refactors the HTTP client to use `InitialRenderPendingTasks` instead of Zone.js macrotask. This is another approach to #50406 which was revert due to a failure in G3. PR Close #50425
diff --git a/packages/common/http/src/interceptor.ts b/packages/common/http/src/interceptor.ts
@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {EnvironmentInjector, inject, Injectable, InjectionToken} from '@angular/core';
+import {EnvironmentInjector, inject, Injectable, InjectionToken, ɵInitialRenderPendingTasks as InitialRenderPendingTasks} from '@angular/core';
 import {Observable} from 'rxjs';
+import {finalize} from 'rxjs/operators';
 
 import {HttpBackend, HttpHandler} from './backend';
 import {HttpRequest} from './request';
@@ -178,13 +179,16 @@ export function legacyInterceptorFnFactory(): HttpInterceptorFn {
           adaptLegacyInterceptorToChain, interceptorChainEndFn as ChainedInterceptorFn<any>);
     }
 
-    return chain(req, handler);
+    const pendingTasks = inject(InitialRenderPendingTasks);
+    const taskId = pendingTasks.add();
+    return chain(req, handler).pipe(finalize(() => pendingTasks.remove(taskId)));
   };
 }
 
 @Injectable()
 export class HttpInterceptorHandler extends HttpHandler {
   private chain: ChainedInterceptorFn<unknown>|null = null;
+  private readonly pendingTasks = inject(InitialRenderPendingTasks);
 
   constructor(private backend: HttpBackend, private injector: EnvironmentInjector) {
     super();
@@ -206,6 +210,9 @@ export class HttpInterceptorHandler extends HttpHandler {
               chainedInterceptorFn(nextSequencedFn, interceptorFn, this.injector),
           interceptorChainEndFn as ChainedInterceptorFn<unknown>);
     }
-    return this.chain(initialRequest, downstreamRequest => this.backend.handle(downstreamRequest));
+
+    const taskId = this.pendingTasks.add();
+    return this.chain(initialRequest, downstreamRequest => this.backend.handle(downstreamRequest))
+        .pipe(finalize(() => this.pendingTasks.remove(taskId)));
   }
 }
diff --git a/packages/common/http/src/xhr.ts b/packages/common/http/src/xhr.ts
@@ -309,36 +309,18 @@ export class HttpXhrBackend implements HttpBackend {
               }
             }
 
-            let macroTaskCanceller: VoidFunction|undefined;
-
-            /** Tear down logic to cancel the backround macrotask. */
-            const onLoadStart = () => {
-              macroTaskCanceller ??= createBackgroundMacroTask();
-            };
-            const onLoadEnd = () => {
-              macroTaskCanceller?.();
-            };
-
-            xhr.addEventListener('loadstart', onLoadStart);
-            xhr.addEventListener('loadend', onLoadEnd);
-
             // Fire the request, and notify the event stream that it was fired.
             xhr.send(reqBody!);
             observer.next({type: HttpEventType.Sent});
             // This is the return from the Observable function, which is the
             // request cancellation handler.
             return () => {
               // On a cancellation, remove all registered event listeners.
-              xhr.removeEventListener('loadstart', onLoadStart);
-              xhr.removeEventListener('loadend', onLoadEnd);
               xhr.removeEventListener('error', onError);
               xhr.removeEventListener('abort', onError);
               xhr.removeEventListener('load', onLoad);
               xhr.removeEventListener('timeout', onError);
 
-              //  Cancel the background macrotask.
-              macroTaskCanceller?.();
-
               if (req.reportProgress) {
                 xhr.removeEventListener('progress', onDownProgress);
                 if (reqBody !== null && xhr.upload) {
@@ -356,21 +338,3 @@ export class HttpXhrBackend implements HttpBackend {
     );
   }
 }
-
-// Cannot use `Number.MAX_VALUE` as it does not fit into a 32-bit signed integer.
-const MAX_INT = 2147483647;
-
-/**
- * A method that creates a background macrotask of up to Number.MAX_VALUE.
- *
- * This is so that Zone.js can intercept HTTP calls, this is important for server rendering,
- * as the application is only rendered once the application is stabilized, meaning there are pending
- * macro and micro tasks.
- *
- * @returns a callback method to cancel the macrotask.
- */
-function createBackgroundMacroTask(): VoidFunction {
-  const timeout = setTimeout(() => void 0, MAX_INT);
-
-  return () => clearTimeout(timeout);
-}
