feat(http): Add reponseType property to HttpResponse and HttpErrorResponse (angular#63043)

Add support for the Fetch API's responseType property in HttpResponse and HttpErrorResponse when using HttpClient with the withFetch provider.

PR Close angular#63043

Author: SkyZeroZx

goldens/public-api/common/http/index.api.md

@@ -2513,6 +2513,7 @@ export class HttpErrorResponse extends HttpResponseBase implements Error {
         statusText?: string;
         url?: string;
         redirected?: boolean;
+        responseType?: ResponseType;
     });
     // (undocumented)
     readonly error: any | null;
@@ -2941,6 +2942,7 @@ export class HttpResponse<T> extends HttpResponseBase {
         statusText?: string;
         url?: string;
         redirected?: boolean;
+        responseType?: ResponseType;
     });
     readonly body: T | null;
     // (undocumented)
@@ -2952,6 +2954,7 @@ export class HttpResponse<T> extends HttpResponseBase {
         statusText?: string;
         url?: string;
         redirected?: boolean;
+        responseType?: ResponseType;
     }): HttpResponse<T>;
     // (undocumented)
     clone<V>(update: {
@@ -2961,6 +2964,7 @@ export class HttpResponse<T> extends HttpResponseBase {
         statusText?: string;
         url?: string;
         redirected?: boolean;
+        responseType?: ResponseType;
     }): HttpResponse<V>;
     // (undocumented)
     readonly type: HttpEventType.Response;
@@ -2974,10 +2978,12 @@ export abstract class HttpResponseBase {
         statusText?: string;
         url?: string;
         redirected?: boolean;
+        responseType?: ResponseType;
     }, defaultStatus?: number, defaultStatusText?: string);
     readonly headers: HttpHeaders;
     readonly ok: boolean;
     readonly redirected?: boolean;
+    readonly responseType?: ResponseType;
     readonly status: number;
     readonly statusText: string;
     readonly type: HttpEventType.Response | HttpEventType.ResponseHeader;

packages/common/http/src/fetch.ts

@@ -254,6 +254,8 @@ export class FetchBackend implements HttpBackend {
 
     const redirected = response.redirected;
 
+    const responseType = response.type;
+
     if (ok) {
       observer.next(
         new HttpResponse({
@@ -263,6 +265,7 @@ export class FetchBackend implements HttpBackend {
           statusText,
           url,
           redirected,
+          responseType,
         }),
       );
 
@@ -278,6 +281,7 @@ export class FetchBackend implements HttpBackend {
           statusText,
           url,
           redirected,
+          responseType,
         }),
       );
     }

packages/common/http/src/response.ts

@@ -193,6 +193,21 @@ export abstract class HttpResponseBase {
    */
   readonly redirected?: boolean;
 
+  /**
+   * Indicates the type of the HTTP response, based on how the request was made and how the browser handles the response.
+   *
+   * This corresponds to the `type` property of the Fetch API's `Response` object, which can indicate values such as:
+   * - `'basic'`: A same-origin response, allowing full access to the body and headers.
+   * - `'cors'`: A cross-origin response with CORS enabled, exposing only safe response headers.
+   * - `'opaque'`: A cross-origin response made with `no-cors`, where the response body and headers are inaccessible.
+   * - `'opaqueredirect'`: A response resulting from a redirect followed in `no-cors` mode.
+   * - `'error'`: A response representing a network error or similar failure.
+   *
+   * This property is only available when using the Fetch-based backend (via `withFetch()`).
+   * When using Angular's (XHR) backend, this value will be `undefined`.
+   */
+  readonly responseType?: ResponseType;
+
   /**
    * Super-constructor for all responses.
    *
@@ -206,6 +221,7 @@ export abstract class HttpResponseBase {
       statusText?: string;
       url?: string;
       redirected?: boolean;
+      responseType?: ResponseType;
     },
     defaultStatus: number = 200,
     defaultStatusText: string = 'OK',
@@ -217,7 +233,7 @@ export abstract class HttpResponseBase {
     this.statusText = init.statusText || defaultStatusText;
     this.url = init.url || null;
     this.redirected = init.redirected;
-
+    this.responseType = init.responseType;
     // Cache the ok value to avoid defining a getter.
     this.ok = this.status >= 200 && this.status < 300;
   }
@@ -298,6 +314,7 @@ export class HttpResponse<T> extends HttpResponseBase {
       statusText?: string;
       url?: string;
       redirected?: boolean;
+      responseType?: ResponseType;
     } = {},
   ) {
     super(init);
@@ -313,6 +330,7 @@ export class HttpResponse<T> extends HttpResponseBase {
     statusText?: string;
     url?: string;
     redirected?: boolean;
+    responseType?: ResponseType;
   }): HttpResponse<T>;
   clone<V>(update: {
     body?: V | null;
@@ -321,6 +339,7 @@ export class HttpResponse<T> extends HttpResponseBase {
     statusText?: string;
     url?: string;
     redirected?: boolean;
+    responseType?: ResponseType;
   }): HttpResponse<V>;
   clone(
     update: {
@@ -330,6 +349,7 @@ export class HttpResponse<T> extends HttpResponseBase {
       statusText?: string;
       url?: string;
       redirected?: boolean;
+      responseType?: ResponseType;
     } = {},
   ): HttpResponse<any> {
     return new HttpResponse<any>({
@@ -339,6 +359,7 @@ export class HttpResponse<T> extends HttpResponseBase {
       statusText: update.statusText || this.statusText,
       url: update.url || this.url || undefined,
       redirected: update.redirected ?? this.redirected,
+      responseType: update.responseType ?? this.responseType,
     });
   }
 }
@@ -373,6 +394,7 @@ export class HttpErrorResponse extends HttpResponseBase implements Error {
     statusText?: string;
     url?: string;
     redirected?: boolean;
+    responseType?: ResponseType;
   }) {
     // Initialize with a default status of 0 / Unknown Error.
     super(init, 0, 'Unknown Error');

packages/common/http/test/response_spec.ts

@@ -21,6 +21,7 @@ describe('HttpResponse', () => {
         statusText: 'Created',
         url: '/test',
         redirected: true,
+        responseType: 'cors',
       });
       expect(resp.body).toBe('test body');
       expect(resp.headers instanceof HttpHeaders).toBeTruthy();
@@ -29,6 +30,7 @@ describe('HttpResponse', () => {
       expect(resp.statusText).toBe('Created');
       expect(resp.url).toBe('/test');
       expect(resp.redirected).toBe(true);
+      expect(resp.responseType).toBe('cors');
     });
     it('uses defaults if no args passed', () => {
       const resp = new HttpResponse({});
@@ -39,6 +41,7 @@ describe('HttpResponse', () => {
       expect(resp.ok).toBeTruthy();
       expect(resp.url).toBeNull();
       expect(resp.redirected).toBeUndefined();
+      expect(resp.responseType).toBeUndefined();
     });
     it('accepts a falsy body', () => {
       expect(new HttpResponse({body: false}).body).toEqual(false);
@@ -63,13 +66,15 @@ describe('HttpResponse', () => {
         statusText: 'created',
         url: '/test',
         redirected: false,
+        responseType: 'cors',
       }).clone();
       expect(clone.body).toBe('test');
       expect(clone.status).toBe(HttpStatusCode.Created);
       expect(clone.statusText).toBe('created');
       expect(clone.url).toBe('/test');
       expect(clone.headers).not.toBeNull();
       expect(clone.redirected).toBe(false);
+      expect(clone.responseType).toBe('cors');
     });
     it('overrides the original', () => {
       const orig = new HttpResponse({
@@ -78,20 +83,23 @@ describe('HttpResponse', () => {
         statusText: 'created',
         url: '/test',
         redirected: true,
+        responseType: 'cors',
       });
       const clone = orig.clone({
         body: {data: 'test'},
         status: HttpStatusCode.Ok,
         statusText: 'Okay',
         url: '/bar',
         redirected: false,
+        responseType: 'opaque',
       });
       expect(clone.body).toEqual({data: 'test'});
       expect(clone.status).toBe(HttpStatusCode.Ok);
       expect(clone.statusText).toBe('Okay');
       expect(clone.url).toBe('/bar');
       expect(clone.headers).toBe(orig.headers);
       expect(clone.redirected).toBe(false);
+      expect(clone.responseType).toBe('opaque');
     });
   });