npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

api-request-cacher-ts

v1.0.3

Published

A TypeScript-based API request cacher with configurable caching.

Downloads

162

Readme

API Request cacher (TypeScript)

A TypeScript-based API request cacher that supports GET, POST, PUT, and DELETE requests with configurable caching to prevent duplicate requests within a short time frame.

Features

  • Supports GET, POST, PUT, and DELETE requests.
  • Caching: Cache API responses for a configurable duration to reduce redundant requests.
  • Supports Promise and Observable: Choose between Promise-based or Observable-based API calls.
  • Pre-request and Post-request Hooks: Modify the request before it is sent and execute custom logic after receiving the response.
  • Force option to bypass caching when needed.

Installation

Install the package using npm:

npm install api-request-cacher-ts

Usage

Usage

  1. Importing the APIRequestCacher

    To use the API request handler in your TypeScript project, start by importing the APIRequestCacher class:

    import \* as APIRequestCacher from 'api-request-handler-ts';
  2. Creating an Instance of APIRequestCacher

    When creating an instance of APIRequestCacher, you can configure the cache duration. By default, the cache duration is 3 seconds, but you can change this by passing a different value to the constructor.

    const apiHandler = new APIRequestCacher(5); // Custom cache duration of 5 seconds

    // or

    const apiHandler = new APIRequestCacher(); // Default cache duration of 3 seconds
  3. Basic Usage

    Example

    const apiCacher = new APIRequestCacher(5); // Cache duration set to 5 seconds
    
    // Using Promises
    apiCacher
      .get<{ data: string }>("https://api.example.com/data")
      .then((response) => console.log("GET Response (Promise):", response))
      .catch((error) => console.error("GET Error (Promise):", error));
    
    // Using Observables
    apiCacher
      .getObservable<{ data: string }>("https://api.example.com/data")
      .subscribe({
        next: (response) => console.log("GET Response (Observable):", response),
        error: (error) => console.error("GET Error (Observable):", error),
      });

    API Methods

    get(url: string, options?: RequestInit, force?: boolean): Promise

    Description: Makes a GET request with caching support. Parameters: url: The URL for the request. options: Optional RequestInit object to configure the request. force: When true, bypasses the cache and makes a fresh request. Returns: A Promise resolving to the response.

    getObservable(url: string, options?: RequestInit, force?: boolean): Observable

    Description: Makes a GET request with caching support, returning an Observable. Parameters: Same as get. Returns: An Observable emitting the response.

    post(url: string, body: any, options?: RequestInit, force?: boolean): Promise

    Description: Makes a POST request with caching support. Parameters: url: The URL for the request. body: The body of the request. options: Optional RequestInit object to configure the request. force: When true, bypasses the cache and makes a fresh request. Returns: A Promise resolving to the response.

    postObservable(url: string, body: any, options?: RequestInit, force?: boolean): Observable

    Description: Makes a POST request with caching support, returning an Observable. Parameters: Same as post. Returns: An Observable emitting the response.

    put(url: string, body: any, options?: RequestInit, force?: boolean): Promise

    Description: Makes a PUT request with caching support. Parameters: Same as post. Returns: A Promise resolving to the response.

    putObservable(url: string, body: any, options?: RequestInit, force?: boolean): Observable

    Description: Makes a PUT request with caching support, returning an Observable. Parameters: Same as put. Returns: An Observable emitting the response.

    delete(url: string, options?: RequestInit, force?: boolean): Promise

    Description: Makes a DELETE request with caching support. Parameters: Same as get. Returns: A Promise resolving to the response.

    deleteObservable(url: string, options?: RequestInit, force?: boolean): Observable

    Description: Makes a DELETE request with caching support, returning an Observable. Parameters: Same as get. Returns: An Observable emitting the response.

  4. Force API Request (Bypassing Cache)

    If you want to force an API request regardless of caching, pass true as the third argument.

    apiHandler
      .request<{ data: string }>("https://api.example.com/data", {}, true)
      .then((response) => console.log(response.data))
      .catch((error) => console.error(error));
  5. Setting Up Hooks

    Hooks allow you to execute custom functions before and after the API requests are made.

    Hooks allow you to execute custom functions before and after the API requests are made.

    Example

    // Define hooks

    const beforeRequestHook = () => console.log("Before Request");
    const afterRequestHook = (response: any) =>
    console.log("After Request, Response:", response);

    // Create an instance with hooks

    const apiCacherWithHooks = new APIRequestCacher(
    5,
    [beforeRequestHook],
    [afterRequestHook]
    );

    // Example usage with hooks

    apiCacherWithHooks
    .get<{ data: string }>("https://api.example.com/data")
    .then((response) =>
    console.log("GET Response (Promise) with Hooks:", response)
    )
    .catch((error) => console.error("GET Error (Promise) with Hooks:", error));

    // Modifying the Request Headers or Body in Hooks

    import { APIRequestCacher } from "api-request-cacher-ts";
    
    // Hook to modify the request (e.g., adding a token to headers)
    const addAuthToken = (options: RequestInit) => {
    if (!options.headers) {
    options.headers = {};
    }
    (options.headers as Record<string, string>)["Authorization"] =
    "Bearer myToken";
    };
    
    // Hook to log the response after the request is made
    const logResponse = (response: any) => console.log("Response:", response);
    
    // Create an APIRequestCacher instance with hooks
    const apiCacher = new APIRequestCacher(5, [addAuthToken], [logResponse]);
    
    // Make a GET request, headers will include the Authorization token
    apiCacher
    .get<{ data: string }>("https://api.example.com/data")
    .then((response) => console.log("GET Response:", response))
    .catch((error) => console.error("Error:", error));

    // Observable Usage

    import { APIRequestCacher } from "api-request-cacher-ts";
    
    // Hook to modify the request (e.g., adding a token to headers)
    const addCustomHeader = (options: RequestInit) => {
    if (!options.headers) {
    options.headers = {};
    }
    (options.headers as Record<string, string>)["X-Custom-Header"] =
    "CustomValue";
    };
    
    // Hook to log the response
    const logResponse = (response: any) =>
    console.log("Response after API call:", response);
    
    // Create an instance of APIRequestCacher with hooks
    const apiCacher = new APIRequestCacher(3, [addCustomHeader], [logResponse]);
    
    // Making a GET request using Observable
    apiCacher
    .getObservable<{ data: string }>("https://api.example.com/data")
    .subscribe({
    next: (response) => console.log("GET Response (Observable):", response),
    error: (error) => console.error("Error:", error),
    });

Configuration

constructor(
     cacheDurationInSeconds: number = 3,
     beforeRequestHooks: (() => void)[] = [],
     afterRequestHooks: ((response: any) => void)[] = []
     )

cacheDurationInSeconds: Duration (in seconds) to cache the API responses. Default is 3. beforeRequestHooks: Array of functions to be executed before each API call. afterRequestHooks: Array of functions to be executed after each API call, with the response passed as an argument.