@maspav/angular-http-handler

Table of Contents

• @maspav/angular-http-handler
  • Table of Contents
  • Introduction
  • Features
  • Installation
  • Usage
  • Configuration
  • Examples (With Configuration)
  • Examples (Without Configuration)

Introduction

@maspav/angular-http-handler is an Angular service designed to simplify the process of handling HTTP requests and responses in Angular applications. This service includes support for error handling, response transformations, pagination management, and more.

Features

• Centralized HTTP request handling.
• Easy error management.
• Simplified response transformation.
• Pagination management.
• Configurable base URL for API requests.

Installation

To install the library, use npm:

npm i @maspav/angular-http-handler

Usage

Importing the Module First, import the module in your AppModule:

import { AngularHttpHandlerModule } from '@maspav/angular-http-handler';

@NgModule({
  imports: [
    AngularHttpHandlerModule;
  ],
})
export class AppModule { }

Using the Service Inject the HttpHandlerService into your component or service:

import { Component } from '@angular/core';
import { AngularHttpHandlerService } from '@maspav/angular-http-handler';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {

  constructor(private httpHandler: AngularHttpHandlerService) { }

}

Configuration

The AngularHttpHandlerService can be customized by passing an optional configuration object when setting up the module, that is, the base url.

import { AngularHttpHandlerModule } from '@maspav/angular-http-handler';

@NgModule({
  imports: [
    AngularHttpHandlerModule.forRoot({ baseUrl: 'https://api.yourdomain.com/' });
  ],
})
export class AppModule { }

Examples (With Configuration)

Making a POST Request

 postRequestFunction(payload: object) {
  return this.httpHandler.post('endpoint', payload).subscribe(
    response => console.log('Item created:', response),
    error => console.error('Error:', error)
  );
}

Making a GET Request

getRequestFunction(params: any) {
  return this.httpHandler.get('endpoint', params).subscribe(
    response => console.log('Data received:', response),
    error => console.error('Error:', error)
  );
}

Making a DELETE Request

deleteRequestFunction(params: any) {
  return this.httpHandler.delete('endpoint', params).subscribe(
    response => console.log('Item deleted:', response),
    error => console.error('Error:', error)
  );
}

Making a PUT Request

putRequestFunction(payload: object) {
  return this.httpHandler.put('endpoint', payload).subscribe(
    response => console.log('Item updated:', response),
    error => console.error('Error:', error)
  );
}

Examples (Without Configuration)

Making a POST Request

 postRequestFunction(payload: object) {
  return this.httpHandler.post('https://api.yourdomain.com/endpoint', payload).subscribe(
    response => console.log('Item created:', response),
    error => console.error('Error:', error)
  );
}

Making a GET Request

getRequestFunction(params: any) {
  return this.httpHandler.get('https://api.yourdomain.com/endpoint', params).subscribe(
    response => console.log('Data received:', response),
    error => console.error('Error:', error)
  );
}

Making a DELETE Request

deleteRequestFunction(params: any) {
  return this.httpHandler.delete('https://api.yourdomain.com/endpoint', params).subscribe(
    response => console.log('Item deleted:', response),
    error => console.error('Error:', error)
  );
}

Making a PUT Request

putRequestFunction(payload: object) {
  return this.httpHandler.put('https://api.yourdomain.com/endpoint', payload).subscribe(
    response => console.log('Item updated:', response),
    error => console.error('Error:', error)
  );
}

Interfaces Paginator Manages pagination details for API responses:

 export interface Paginator {
  collectionSize?: number | any;
  page?: number | any;
  total?: number;
  from?: number;
  to?: number;
  perPage?: number;
  disabled?: boolean;
  pages?: number;
}

Loader Handles loading state and error messaging:

 export interface Loader {
  loading: boolean;
  error?: string;
}

Metadata Contains pagination and link information for API responses:

export interface Metadata {
  pageLinks: {
    previousPage?: any;
    firstPage: string;
    currentPage: string;
    nextPage?: any;
    lastPage: string;
  };
  pageInfo: {
    pages: number;
    total: number;
    currentPage: number;
    pageSize: number;
    perPage: number;
    from: number;
    to: number;
  };
}

ErrorConfig Configures error handling behavior:

export interface ErrorConfig {
  bypassAlertStatuses?: number[] | '*';
  retryCount?: number;
  message?: string;
}

Using Interfaces in a Component Example Component:

import { Component, OnInit } from '@angular/core';
import { AngularHttpHandlerService, Paginator, Loader, Metadata } from '@maspav/angular-http-handler';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {

  // Define properties using the provided interfaces
  paginator: Paginator = {
    page: 1,
    perPage: 10,
    total: 0,
    from: 0,
    to: 0,
    pages: 0,
    collectionSize: 0,
    disabled: false,
  };

  loader: Loader = {
    loading: false,
    error: ''
  };

  metadata: Metadata;

  constructor(private httpHandler: AngularHttpHandlerService) { }

  ngOnInit(): void {
    this.fetchData();
  }

  // Example function to fetch data and use the interfaces
  fetchData() {
    this.setLoader(true);
    this.httpHandler.get('https://api.yourdomain.com/endpoint', { page: this.paginator.page })
      .subscribe(
        (response: any) => {
          // Assuming response.metadata contains the metadata information
          this.metadata = response.metadata;
          // Use the metadata to update paginator and other UI elements
          this.setPaginator(this.metadata);
          this.setLoader(false);
        },
        (error: any) => {
          this.setLoader(false, error.message);
        }
      );
  }

  // Set the loader state
  setLoader(loading: boolean, error?: string) {
    this.loader.loading = loading;
    this.loader.error = error || '';
  }

  // Set the paginator based on API response metadata
  setPaginator(metadata: Metadata) {
    this.paginator.collectionSize = metadata.pageInfo.total;
    this.paginator.page = metadata.pageInfo.currentPage;
    this.paginator.perPage = metadata.pageInfo.perPage;
    this.paginator.pages = metadata.pageInfo.pages;
    this.paginator.from = metadata.pageInfo.from;
    this.paginator.to = metadata.pageInfo.to;
  }
}