this.http.get('/api').subscribe(j => console.log(j)); 

Don't overcomplicate things, the code above is all you need and it works similarly to using window.fetch. By utilizing the generic version, you can ensure type safety with the expected interface.

this.http.get<IModel>('/api').subscribe(j => console.log(j));

There's no necessity for unsubscribe, only add pipe + map if you want to manipulate the result beforehand. The use of json() was needed with the "old" HttpModule, which has now been replaced by HttpClient from version 4.3 onwards

If you prefer using a Promise rather than an Observable, you can still convert it using toPromise().

this.http.get('/api').toPromise().then(j => console.log(j)); 

For more information, refer to HttpClient

Is it wrong to opt for the Fetch API when working on Angular projects?

Using the Fetch API isn't necessarily wrong, but there are reasons why you may want to avoid it. With HttpClient, you have the ability to write thorough unit tests for various scenarios, URLs, HTTP methods, etc. This becomes challenging if your code extensively relies on window.fetch. Additionally, HttpClient provides type system support for your results and offers advantages like richer features compared to Promises, especially in complex scenarios such as managing multiple microservices or conditional call cancellation with additional user input.

Given these reasons, incorporating HttpClient seems advantageous and I struggle to identify any significant drawbacks apart from a minor learning curve.

After two years of delving into Angular, I have stumbled upon some intriguing discoveries:

1. One gem that caught my attention is a library called RxJS - https://rxjs-dev.firebaseapp.com/guide/overview, crafted in TypeScript (an extension of JavaScript). It stands out as one of the premier libraries for JavaScript.

In essence, it simplifies event-driven applications in JS through the use of the Observable paradigm. While a Promise can only yield a value once and operates solely asynchronously, Observables have the versatility to return single or multiple values synchronously or asynchronously based on how you employ them. With the ability to incorporate pipes and operators to manipulate results prior to consumption by the subscriber, it imparts a functional programming essence to interactions, which is truly exceptional. The embrace of Observables transcends the limitations of promises, rendering it exceptionally rich in features.

A subscriber engages with an Observable by "subscribing" to it (.subscribe() method on an observable). An Observable emits three types of events: next, error, and complete. 'Next' signifies an event with or without data being emitted, 'error' conveys errors within the event stream, while 'complete' signals the cessation of the event stream with no further emissions from the observable.

To clarify, encountering an error does not halt the event stream; it persists until the completion event occurs. A subscriber has the option to unsubscribe from an observable, effectively discontinuing its monitoring of the event stream.

2. The HttpClient service within Angular harnesses RxJS at its core. Essentially, it replaces the traditional XmlHttpRequest approach for requesting data – https://github.com/angular/angular/blob/main/packages/common/http/src/xhr.ts#L193.

Upon initiating a request using Angular's HttpClient service, the observable automatically concludes upon receiving an ok response, eliminating the necessity to manually unsubscribe since it completes the lifecycle anyway. Although a complete call isn't triggered on error responses, HTTP calls only emit a single response.

3. Observables remain dormant until they are subscribed to; in contrast, a Promise executes promptly.

In my perspective, Observables surpass Promises in functionality; the enduring relevance of RxJS indicates that it will likely continue to play a pivotal role in development landscapes.

Unfortunately, I am unable to leave a comment due to my limited access as a new member. Regarding the concept of abstraction, one suggestion is to utilize HttpBackend for the fetch call and simply extend the HttpClient.

import { HttpBackend, HttpClient, HttpEvent, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, Observer } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CustomFetchBackend implements HttpBackend {
  handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
    
    if (!('fetch' in window)) {
      throw new Error(
        `This browser does not support Fetch`);
    }

    if (req.method === 'JSONP') {
      throw new Error(
        `Attempting Jsonp request without HttpClientJsonpModule installed.`);
    }

    return new Observable((observer: Observer<HttpEvent<any>>) => {
      const request = new Request(req.urlWithParams, { method: req.method});
      fetch(request)
        .then((r) => {
          r.json().then((body) => {
            const headers = new HttpHeaders();
            r?.headers.forEach((value, name) => {
              headers.append(name, value)
            })
            observer.next(new HttpResponse({
              url: r.url,
              status: r.status,
              statusText: r.statusText,
              body: body,
              headers: headers
            }))
          });
        })

    });
  }
}

@Injectable({
  providedIn: 'root'
})
export class CustomFetchClient extends HttpClient {
  constructor(handler: CustomFetchBackend) {
    super(handler);
  }
}

StackBlitz