fix(http): Dynamicaly call the global fetch implementation (#57531)

JeanMeche · alxhub · commit 5d2e243c76ac · 2024-08-27T13:34:19.000-07:00
Instead of using the reference that existing when `FetchBackend` is setup. fixes #57527 PR Close #57531
diff --git a/packages/common/http/src/fetch.ts b/packages/common/http/src/fetch.ts
@@ -52,9 +52,11 @@ function getResponseUrl(response: Response): string | null {
  */
 @Injectable()
 export class FetchBackend implements HttpBackend {
-  // We need to bind the native fetch to its context or it will throw an "illegal invocation"
+  // Note: binding fetch directly causes an "illegal invocation" error
+  // We use an arrow function to always reference the current global implementation of fetch
+  // In case it has been (monkey)patched after the FetchBackend has been created
   private readonly fetchImpl =
-    inject(FetchFactory, {optional: true})?.fetch ?? fetch.bind(globalThis);
+    inject(FetchFactory, {optional: true})?.fetch ?? ((...args) => globalThis.fetch(...args));
   private readonly ngZone = inject(NgZone);
 
   handle(request: HttpRequest<any>): Observable<HttpEvent<any>> {
diff --git a/packages/common/http/test/fetch_spec.ts b/packages/common/http/test/fetch_spec.ts
@@ -12,11 +12,14 @@ import {Observable, of, Subject} from 'rxjs';
 import {catchError, retry, scan, skip, take, toArray} from 'rxjs/operators';
 
 import {
+  HttpClient,
   HttpDownloadProgressEvent,
   HttpErrorResponse,
   HttpHeaderResponse,
   HttpParams,
   HttpStatusCode,
+  provideHttpClient,
+  withFetch,
 } from '../public_api';
 import {FetchBackend, FetchFactory} from '../src/fetch';
 
@@ -416,6 +419,36 @@ describe('FetchBackend', async () => {
       fetchMock.mockFlush(0, 'CORS 0 status');
     });
   });
+
+  describe('dynamic global fetch', () => {
+    beforeEach(() => {
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        providers: [provideHttpClient(withFetch())],
+      });
+    });
+
+    it('should use the current implementation of the global fetch', async () => {
+      const fakeFetch = jasmine
+        .createSpy('', () => Promise.resolve(new Response(JSON.stringify({foo: 'bar'}))))
+        .and.callThrough();
+      globalThis.fetch = fakeFetch;
+
+      const client = TestBed.inject(HttpClient);
+      expect(fakeFetch).not.toHaveBeenCalled();
+      let response = await client.get<unknown>('').toPromise();
+      expect(fakeFetch).toHaveBeenCalled();
+      expect(response).toEqual({foo: 'bar'});
+
+      // We dynamicaly change the implementation of fetch
+      const fakeFetch2 = jasmine
+        .createSpy('', () => Promise.resolve(new Response(JSON.stringify({foo: 'baz'}))))
+        .and.callThrough();
+      globalThis.fetch = fakeFetch2;
+      response = await client.get<unknown>('').toPromise();
+      expect(response).toEqual({foo: 'baz'});
+    });
+  });
 });
 
 export class MockFetchFactory extends FetchFactory {
