@resourge/http-service NPM

http-service

http-service is a comprehensive package that provides essential services for web applications. This package includes BaseHttpService for making HTTP requests to servers and LoadingService for managing loading indicators. Together, these services offer a robust solution for handling asynchronous operations and displaying loading feedback.

Installation

Install using Yarn:

yarn add @resourge/http-service

or NPM:

npm install @resourge/http-service

BaseHttpService

BaseHttpService is a main service for making requests to a server. It serves as a simple wrapper around the Fetch API, with added features such as request throttling for GET requests and support for file uploads.

Usage

import { BaseHttpService } from '@resourge/http-service'

const HttpService = new BaseHttpService({
  baseUrl: 'https://api.example.com',
  headers: {
    'Authorization': 'Bearer token123'
  }
});

Making Requests

GET Request

HttpService.get('/posts/1')
  .then(response => console.log(response))
  .catch(error => console.error(error));

POST Request

const postData = {
  title: 'New Post',
  body: 'Lorem ipsum...',
  userId: 1
};

HttpService.post('/posts', postData)
  .then(response => console.log(response))
  .catch(error => console.error(error));

PUT Request

const updateData = {
  title: 'Updated Post',
  body: 'Updated content'
};

HttpService.put('/posts/1', updateData)
  .then(response => console.log(response))
  .catch(error => console.error(error));

DELETE Request

HttpService.delete('/posts/1')
  .then(response => console.log(response))
  .catch(error => console.error(error));

PATCH Request

const patchData = {
  body: 'Patched content'
};

HttpService.patch('/posts/1', patchData)
  .then(response => console.log(response))
  .catch(error => console.error(error));

File Upload

const files = [file1, file2];
const formData = {
  description: 'File description'
};

HttpService.upload('POST', '/files', files, formData)
  .then(response => console.log(response))
  .catch(error => console.error(error));

Custom Interceptors

Interceptors can be used to modify request or response configurations:

HttpService.setToken(config => {
  // Modify request headers
  config.headers['Authorization'] = 'New Token';
  return config;
});

// Add a request interceptor
HttpService.interceptors.request.use(
  response => {
    // Modify response data or handle it
    return response;
  },
  error => {
    // Handle errors or modify error responses
    return Promise.reject(error);
  }
);

// Add a response interceptor
HttpService.interceptors.response.use(
  response => {
    // Modify response data or handle it
    return response;
  },
  error => {
    // Handle errors or modify error responses
    return Promise.reject(error);
  }
);

Extending BaseHttpService

You can extend BaseHttpService to create a specialized service with additional methods or custom configurations:

class CustomHttpService extends BaseHttpService {
  constructor() {
    super({
      baseUrl: 'https://api.example.com',
      headers: {
        'Authorization': 'Bearer token123'
      }
    });
  }

  // Add custom methods
  public customMethod() {
    // Custom logic here
  }
}

const CustomService = new CustomHttpService();
CustomService.customMethod();

LoadingService

LoadingService is a simple service designed to manage the state of loading indicators in your application. It provides methods to show or hide loading indicators and allows components to listen for changes in loading state.

Usage

import { LoadingService } from '@resourge/http-service';

// Show loading indicator
LoadingService.show();

// Show loading indicator with custom loaderId
LoadingService.show('myLoaderId');

// Hide loading indicator
LoadingService.hide();

// Hide loading indicator with custom loaderId
LoadingService.hide('myLoaderId');


// Add an event listener for the default loader
const removeListener = LoadingService.addListener(() => {
  // Handle loading state change
  console.log('Loading state changed!');
});

// Add an event listener for a specific loaderId
const removeCustomListener = LoadingService.addListener('myLoaderId', () => {
  // Handle loading state change for custom loaderId
  console.log('Custom Loading state changed!');
});

// To remove the listener later
removeListener(); // or removeCustomListener();

API

getLoading(loaderId?: string): boolean

Returns the current loading state for the specified loaderId. If no loaderId is provided, returns the default loading state.

addListener(loaderId?: string, onEmit: () => void): () => void

Adds an event listener for the specified loaderId. When the loading state changes, the onEmit function will be called.
Returns a function to remove the listener when no longer needed.

show(loaderId?: string): void