General Request APIs from Browser Fetch Wrapper Axios, Tanstack Alternative

1 week ago 6

GRAB: General Request APIs from Browser

Data Retrieval: Fetches data from server APIs using JSON parameters and returns JSON responses or error objects
Request/Response Format: Standardized JSON communication for both input parameters and output data
Automatic Loading States: Sets isLoading to true during data fetching operations and false upon completion
Mock Server Support: Configure window.grabMockServer for development and testing environments
Concurrent Request Handling: Cancels duplicate or overlapping requests automatically
Timeout Configuration: Customizable request timeout settings
Rate Limiting: Built-in rate limiting to prevent API abuse
Debug Logging: Comprehensive logging system for request monitoring
Request History: Stores all request and response data in global grabLog object
Pagination Support: Built-in pagination handling for large datasets
Environment Configuration: Configurable base URLs for development and production environments
Frontend Caching: Intelligent caching system that prevents redundant API calls for repeat requests
Modular Design: Single, flexible function that can be called from any part of your application.
Framework Agnostic: No dependency on React hooks or component lifecycle - works with any JavaScript framework
Universal Usage: More flexible than TanStack Query - works outside component initialization,
Minimalist Single Function: Less boilerplate and complexity than axios, SuperAgent, Got

Parameter Type Description

path	string	The path in the API after base url
response	any	Pre-initialized object to store the response in, isLoading and error are also set on this object.
options?	baseURL: string; cache: boolean; cancelIfOngoing: boolean; cancelPrevious: boolean; debug: boolean; method: string; paginateKey: string; paginateResult: string; rateLimit: number; setDefaults: boolean; timeout: number;	Request params for GET or POST and more options
options.baseURL?	string	default='/api/' base url prefix, override with SERVER_API_URL env
options.cache?	boolean	default=false Whether to cache the request and from frontend cache
options.cancelIfOngoing?	boolean	default=false Cancel if a request to path is in progress
options.cancelPrevious?	boolean	default=true Cancel previous requests to same path
options.debug?	boolean	default=false Whether to log the request and response
options.method?	string	default="GET" The HTTP method to use
options.paginateKey?	string	default="page" The key to paginate the request by
options.paginateResult?	string	default=null The key to paginate result data by
options.rateLimit?	number	default=0 If set, how many seconds to wait between requests
options.setDefaults?	boolean	default=false Pass this with options to set those options as defaults for all requests.
options.timeout?	number	default=20 The timeout for the request in seconds

Promise<any>

The response from the server API

vtempest (2025)

import {grab} from "./grab-api"; let responseData = $state({}) as { results: Array<{title:string}>, isLoading: boolean, error: string, }; await grab('search', responseData, { query: "search words", method: 'POST' }) {#if responseData.results} {responseData.results} {:else if responseData.isLoading} ... {:else if responseData.error} {responseData.error} {/if} //Setup Mock testing server, response is object or function window.grabMockServer["search"] = { response: (params) => { return { results: [{title:`Result about ${params.query}`}] }; }, method: "POST", params: { query: "search words" }, delay : 1, }; //set defaults for all requests grab("", {}, { setDefaults: true, baseURL: "http://localhost:8080", timeout: 30, debug: true, rateLimit: 1, cache: true, cancelPrevious: true, cancelIfOngoing: true, });

Read Entire Article