ajaxInterceptor

ajax-hooker is a powerful library designed for seamless AJAX interception in web applications, combining the capabilities of both XMLHttpRequest and fetch. It deep hooks into native browser APIs to provide a unified lifecycle for handling requests and responses, which simplifies the process of intercepting and modifying AJAX calls.

Key Features

• Deep AJAX Interception: Intercepts core stages of both XHR and Fetch APIs, allowing for comprehensive request handling.
• Unified Request Lifecycle: Normalizes differences between XHR and Fetch into a cohesive structure, with clear phases for request mutation and response handling.
• Stream-aware Interception: Provides support for chunk-level interception of streaming responses, enhancing interaction with real-time data streams.

Use Cases

• Browser Extensions: Implement request governance such as header rewrites, authentication injection, and endpoint switching within browser extensions.
• API Observability: Facilitate debugging and monitoring by capturing and normalizing request and response data in one central location.
• Compatibility Layer: Serve as a bridge for applications using both XHR and Fetch, promoting uniformity across diverse codebases.
• Streaming Data Handling: Transform streaming responses effectively with support for SSE, NDJSON, and chunked JSON formats.

Feature Highlights

• Works seamlessly with both XMLHttpRequest and fetch
• Modifies request parameters (such as url, method, headers, and data) effortlessly
• Captures response data via a single, unified callback mechanism
• Allows chaining of multiple hook functions for advanced customization
• Utilizes a singleton pattern to maintain a singular global instance
• Full TypeScript type support available

Example Usage

To get started with ajax-hooker, utilize the following code snippets for injecting an instance and setting up hooks:

import AjaxInterceptor from 'ajax-hooker';

// Retrieve singleton interceptor instance
const interceptor = AjaxInterceptor.getInstance();

// Start intercepting requests
interceptor.inject();

// Add a hook for modifying requests
interceptor.hook((request) => {
  // Update request headers
  request.headers.set('Authorization', 'Bearer token');

  // Capture the response data
  request.response = async (response) => {
    console.log('Status:', response.status);
    console.log('Data:', response.json);
  };

  return request;
});

This library is designed to streamline AJAX management on the browser side, making it an ideal choice for developers focused on robust request interception and response management across modern web applications.