grab-url

v1.0.20

Published

7 days ago

📥 Generate Request to API from Browser

Downloads

688

0High
0Medium
0Low

vtempest

api axios request browser tanstack query post mock-api fetch http

npm i grab-url

GRAB: Generate Request to API from Browser

GRAB is the FBEST Request Manager: Functionally Brilliant, Elegantly Simple Tool: One Function, no dependencies, minimalist syntax, more features than alternatives
Auto-JSON Convert: Pass parameters and get response or error in JSON, handling other data types as is.
isLoading Status: Sets .isLoading=true on the pre-initialized response object so you can show a "Loading..." in any framework
Debug Logging: Adds global log() and prints colored JSON structure, response, timing for requests in test.
Mock Server Support: Configure window.grab.mock for development and testing environments
Cancel Duplicates: Prevent this request if one is ongoing to same path & params, or cancel the ongoing request.
Timeout & Retry: Customizable request timeout, default 30s, and auto-retry on error
DevTools: Ctrl+Alt+I overlays webpage with devtools showing all requests and responses, timing, and JSON structure.
Request History: Stores all request and response data in global grab.log object
Pagination Infinite Scroll: Built-in pagination for infinite scroll to auto-load and merge next result page, with scroll position recovery.
Base URL Based on Environment: Configure grab.defaults.baseURL once at the top, overide with SERVER_API_URL in .env.
Frontend Cache: Set cache headers and retrieve from frontend memory for repeat requests to static data.
Regrab On Error: Regrab on timeout error, or on window refocus, or on network change, or on stale data.
Framework Agnostic: Alternatives like TanStack work only in component initialization and depend on React & others.
Globals: Adds to window in browser or global in Node.js so you only import once: grab(), log(), grab.log, grab.mock, grab.defaults
TypeScript Tooltips: Developers can hover over option names and autocomplete TypeScript.
Request Stategies: 🎯 Examples show common stategies like debounce, repeat, proxy, unit tests, interceptors, file upload, etc
Rate Limiting: Built-in rate limiting to prevent multi-click cascading responses, require to wait seconds between requests.
Repeat: Repeat request this many times, or repeat every X seconds to poll for updates.
Loading Icons: Import from grab-url/icons to get enhanced animated loading icons.

Examples

import grab from 'grab-url';

let res = $state({}) as {
  results: Array<{title:string}>,
  isLoading: boolean,
  error: string,
};

await grab('search', {
  response: res,
  query: "search words",
  post: true
})
 
grab('user').then(log)

//in svelte component
{#if res.results}
    {res.results}
{:else if res.isLoading}
    ...
{:else if res.error}
    {res.error}
{/if}

 //Setup Mock testing server, response is object or function
 window.grab.mock["search"] = {
   response: (params) => {
     return { results: [{title:`Result about ${params.query}`}] };
   },
   method: "POST"
 };

 //set defaults for all requests
 grab("", { 
   setDefaults: true,
   baseURL: "http://localhost:8080",
   timeout: 30,
   debug: true,
   rateLimit: 1,
   cache: true,
   cancelOngoingIfNew: true,
 });

 grab.defaults.baseURL = "http://localhost:8080/api/";