ajaxInterceptor

ajax-hooker is a powerful library designed for seamless AJAX interception on the browser side. It provides deep integration by intercepting both XMLHttpRequest and fetch requests, allowing for a unified lifecycle that simplifies interception logic across both request types.

Key Features

• Deep AJAX Interception: Hooks into the core stages of both XHR and Fetch, enabling robust interception that goes beyond simple request wrappers.
• Unified Request Lifecycle: Normalizes the differences between XHR and Fetch into two primary phases:
  • Before Request: For modifying request parameters such as URL, method, headers, and body.
  • After Response: For handling and processing response data through a consistent callback model.
• Streaming Support: Provides chunk-level interception, making it suitable for handling streaming responses such as Server-Sent Events (SSE) and NDJSON.

Comparisons with Other Solutions

ajax-hooker stands out in terms of native XHR and Fetch coverage, offering a unified hook lifecycle and streaming chunk interception. Other solutions like Axios interceptors or handwritten monkey patches may serve specific use cases but lack the comprehensive coverage and functionality provided by ajax-hooker.

Use Cases

• Browser Extension Governance: Easily implement request governance strategies, including header rewrites and authentication injections.
• API Observability: Capture and analyze normalized request/response data to diagnose issues or improve your application's performance.
• Support for Mixed Codebases: Create a compatibility layer for applications utilizing both XHR and Fetch.
• Streaming Response Transformation: Intercept and process data from streamed responses for more efficient data handling.

Installation and Usage

To get started, ajax-hooker can be installed via npm. The library supports both XMLHttpRequest and fetch, enabling a single point of governance for all AJAX requests:

import AjaxInterceptor from 'ajax-hooker';

const interceptor = AjaxInterceptor.getInstance();
interceptor.inject();

interceptor.hook((request) => {
  request.headers.set('Authorization', 'Bearer token');
  request.response = async (response) => {
    console.log('Status:', response.status);
    console.log('Data:', response.json || response.response);
  };
  return request;
});

API Overview

The API offers several key functions:

• getInstance(): Retrieve the singleton instance for consistent usage across different parts of your application.
• inject(type?): Start the interception process for either XHR, fetch, or both types of requests.
• uninject(type?): Stop the interception and restore the native behavior of XMLHttpRequest and fetch.
• hook(fn, type?): Add a hook function to modify the request or capture the response.
• unhook(fn?, type?): Remove a specific hook or clear all hooks.

The library also provides significant flexibility with a clearly defined request and response object, making it easy to work with and understand the data flow.

For complete examples showcasing usage scenarios and more advanced features, visit the Examples Index.

ajax-hooker simplifies and enriches AJAX request management in web applications, making it an essential tool for developers looking to achieve deeper control over their network requests.