HTTP Client and APIs in Angular

In modern web applications, interacting with remote servers through APIs is a common requirement. Angular’s HTTP Client module makes it easier to handle HTTP requests and communicate with APIs. In this lesson, we’ll cover how to use Angular’s HttpClient service to make API calls, handle responses, and work with asynchronous data using Observables.

1. Introduction to Angular HTTP Client

The HttpClient service in Angular is built on top of the RxJS Observables, allowing you to perform asynchronous HTTP operations and handle them efficiently.

Importing HttpClientModule

To use HttpClient in your Angular application, you first need to import the HttpClientModule in your app.module.ts:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [HttpClientModule]
})
export class AppModule {}        

2. Making a GET Request

The GET method is used to fetch data from a remote server. Using HttpClient, you can easily make a GET request and handle the response.

Example: Fetching data from a REST API

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  data: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://api.example.com/data')
      .subscribe(response => {
        this.data = response;
      });
  }
}        

In this example, the http.get() method is used to make a GET request to the API endpoint, and the response is stored in the data variable.

3. Making a POST Request

A POST request is used to send data to a server to create or update resources. You can use HttpClient to make POST requests by sending data as the second argument.

Example: Sending data to an API using POST

import { HttpClient } from '@angular/common/http';

export class AppComponent {
  constructor(private http: HttpClient) {}

  sendData() {
    const body = { name: 'John', age: 30 };
    this.http.post('https://api.example.com/create', body)
      .subscribe(response => {
        console.log('Data sent successfully!', response);
      });
  }
}        

In this example, the http.post() method is used to send the body data to the specified API endpoint.

4. Error Handling

Handling errors in HTTP requests is critical for building reliable applications. Angular provides the catchError operator from RxJS to catch and manage errors.

Example: Error handling with catchError

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

this.http.get('https://api.example.com/data')
  .pipe(
    catchError(error => {
      console.error('Error occurred:', error);
      return throwError(error);  // Rethrow the error for further handling
    })
  )
  .subscribe(
    data => console.log(data),
    error => console.log('Error callback:', error)
  );        

The catchError operator allows you to intercept errors and handle them before they propagate through the application.

Read More: https://www.hqledutech.com/http-client-and-apis-in-angular/