async-fetch 0.3.7 → 0.3.8

package/README.md

@@ -51,18 +51,18 @@ The minimum requirement for the hook is a url string as the first argument. The
 
 | Key            | Type     | Definition                                                                                                      | Default |
 | -------------- | -------- | --------------------------------------------------------------------------------------------------------------- | ------- |
-| initialPending | Boolean  | Initial state for the pending constant.                                                                         |         |
-| initialData    | Any      | Initial state for the data constant.                                                                            |         |
-| initialError   | Any      | Initial state for the error constant.                                                                           |         |
-| deps           | Array    | List of dependencies to run the request on.                                                                     |         |
+| initialPending | Boolean  | Initial state for the pending constant.                                                                         | false   |
+| initialError   | E or Any | Initial state for the error constant.                                                                           |         |
+| initialData    | T or Any | Initial state for the data constant.                                                                            |         |
+| auto           | Boolean  | Whether or not the request should send on mount.                                                                | true    |
 | poll           | Number   | Number of milliseconds to wait for polling requests.                                                            |         |
 | timeout        | Number   | Number of milliseconds to wait before canceling the request.                                                    | 30000   |
-| ignoreCleanup  | Boolean  | Whether or not the hook should cleanup on component unmount.                                                    |         |
 | ignoreRequest  | Boolean  | Whether or not the request should send.                                                                         |         |
+| ignoreCleanup  | Boolean  | Whether or not the hook should cleanup on component unmount.                                                    |         |
 | query          | Object   | JSON object to append to the url as search params.                                                              |         |
 | params         | Object   | JSON object to append to the url as search params.                                                              |         |
-| data           | Object   | JSON object to send in the request body.                                                                        |         |
-| parser         | String   | Method used to parse the response.                                                                              | "json"  |
+| data           | Any      | JSON object to send in the request body.                                                                        |         |
+| parser         | String   | Method used to parse the response. Options: json, text, blob, formData, arrayBuffer.                            | "json"  |
 | onStart        | Function | Callback function to call when the request starts.                                                              |         |
 | onSuccess      | Function | Callback function to call when the response has been received. The response is available as the first argument. |         |
 | onFail         | Function | Callback function to call when the request has failed. The error is available as the first argument.            |         |
@@ -73,7 +73,7 @@ The minimum requirement for the hook is a url string as the first argument. The
 | Key           | Type     | Definition                               |
 | ------------- | -------- | ---------------------------------------- |
 | pending       | Boolean  | Whether or not the request is active.    |
-| error         | Any      | The response error.                      |
-| data          | Any      | The response data.                       |
+| error         | E or Any | The response error.                      |
+| data          | T or Any | The response data.                       |
 | sendRequest   | Function | Function to send the request manually.   |
 | cancelRequest | Function | Function to cancel the request manually. |

package/dist/index.d.ts

@@ -1,30 +1,3 @@
-interface RequestProps {
-    initialPending?: boolean;
-    initialData?: any;
-    initialError?: any;
-    deps?: string[];
-    poll?: number;
-    timeout?: number;
-    ignoreRequest?: boolean;
-    ignoreCleanup?: boolean;
-    query?: any;
-    params?: any;
-    data?: any;
-    parser?: "json" | "text" | "blob" | "formData" | "arrayBuffer";
-    onStart?: () => void;
-    onSuccess?: (data: any) => void;
-    onFail?: (error: any) => void;
-    onFinish?: () => void;
-    headers?: Record<string, string>;
-    body?: any;
-    signal?: AbortSignal;
-}
-interface ResponseProps {
-    pending?: boolean;
-    data?: any;
-    error?: any;
-    sendRequest: () => void;
-    cancelRequest: () => void;
-}
-declare function useAsyncFetch(stringUrl: string, props?: RequestProps): ResponseProps;
+import { FetchError, RequestProps, ResponseProps } from "./interfaces";
+declare function useAsyncFetch<T = any, E = FetchError>(urlString: string, props?: RequestProps<T, E>): ResponseProps<T, E>;
 export default useAsyncFetch;

package/dist/index.js

@@ -1,93 +1,85 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useRef, useCallback, useEffect } from "react";
 import useInterval from "./useInterval.js";
-function useAsyncFetch(stringUrl, props = {}) {
-    const { initialPending, initialData, initialError, deps = [], poll, timeout = 30000, // 30 seconds.
-    ignoreRequest, ignoreCleanup, query, params, data: body, parser = "json", onStart, onSuccess, onFail, onFinish, ...fetchProps } = props;
+import normalizeError from "./normalizeError.js";
+function useAsyncFetch(urlString, props = {}) {
+    const { initialPending = false, initialError, initialData, auto = true, poll, timeout = 30000, ignoreRequest, ignoreCleanup, query, params, data: body, parser = "json", onStart, onSuccess, onFail, onFinish, ...fetchOptions } = props;
     const [pending, setPending] = useState(initialPending);
-    const [pending2, setPending2] = useState(initialPending);
-    const [data, setData] = useState(initialData);
     const [error, setError] = useState(initialError);
-    const [cancelSource, setCancelSource] = useState();
+    const [data, setData] = useState(initialData);
+    const fetchOptionsRef = useRef(fetchOptions);
+    const controllerRef = useRef(null);
+    const requestIdRef = useRef(0);
+    fetchOptionsRef.current = fetchOptions;
     const cancelRequest = useCallback(() => {
-        if (cancelSource?.abort)
-            cancelSource.abort();
-    }, [cancelSource]);
+        controllerRef.current?.abort();
+        controllerRef.current = null;
+    }, []);
     const sendRequest = useCallback(async () => {
         if (ignoreRequest === true)
             return;
-        const url = new URL(stringUrl, window.location.origin);
-        if (query || params) {
-            url.search = new URLSearchParams(query || params || {}).toString();
-        }
-        const contentType = fetchProps.headers?.["Content-Type"] ||
-            fetchProps.headers?.["content-type"];
-        if (contentType === "application/x-www-form-urlencoded") {
-            fetchProps.body = new URLSearchParams(body || {});
-        }
-        else if (body) {
-            fetchProps.body = JSON.stringify(body);
-        }
-        const controller = new AbortController();
-        const requestTimeout = setTimeout(() => controller.abort(), timeout);
-        fetchProps.signal = controller.signal;
-        if (pending)
-            setPending2(true);
-        if (!pending)
-            setPending(true);
-        setError(undefined);
         cancelRequest();
-        setCancelSource(controller);
+        setPending(true);
+        setError(undefined);
         if (onStart)
             onStart();
+        const controller = new AbortController();
+        controllerRef.current = controller;
+        const timeoutId = setTimeout(() => controller.abort(), timeout);
+        const requestId = ++requestIdRef.current;
         try {
-            const response = await fetch(url, fetchProps);
+            const url = new URL(urlString, window.location.origin);
+            url.search = new URLSearchParams({ ...query, ...params }).toString();
+            const headers = new Headers(fetchOptionsRef.current.headers);
+            let resolvedBody;
+            if (headers.get("content-type") === "application/x-www-form-urlencoded") {
+                resolvedBody = new URLSearchParams(body ?? {});
+            }
+            else if (body instanceof FormData || body instanceof Blob) {
+                resolvedBody = body;
+            }
+            else if (body !== undefined) {
+                resolvedBody = JSON.stringify(body);
+            }
+            const response = await fetch(url, {
+                ...fetchOptionsRef.current,
+                headers,
+                body: resolvedBody ?? fetchOptionsRef.current.body,
+                signal: controller.signal,
+            });
             if (!response.ok) {
-                throw new Error(JSON.stringify({
-                    code: response.status,
-                    text: response.statusText,
+                throw {
+                    status: response.status,
+                    statusText: response.statusText,
                     response: await response.text(),
-                }));
-            }
-            else {
-                const parsedResponse = await response[parser]();
-                setData(parsedResponse);
-                if (onSuccess)
-                    onSuccess(parsedResponse);
+                };
             }
+            const parsedResponse = (await response[parser]());
+            setData(parsedResponse);
+            onSuccess?.(parsedResponse);
         }
-        catch (e) {
-            if (e.name !== "AbortError") {
-                let error;
-                try {
-                    error = JSON.parse(e.toString().replace("Error:", "").trim());
-                }
-                catch {
-                    error = { response: e.toString(), text: e.toString() };
-                }
-                setError(error);
-                if (onFail)
-                    onFail(error);
-            }
+        catch (err) {
+            if (err?.name === "AbortError")
+                return;
+            const normalized = normalizeError(err);
+            setError(normalized);
+            onFail?.(normalized);
         }
         finally {
-            clearTimeout(requestTimeout);
-            if (pending) {
-                setPending2(undefined);
-            }
-            else {
-                setPending(undefined);
+            clearTimeout(timeoutId);
+            if (requestId === requestIdRef.current) {
+                setPending(false);
+                if (onFinish)
+                    onFinish();
             }
-            if (onFinish)
-                onFinish();
         }
     }, [
         ignoreRequest,
-        stringUrl,
+        cancelRequest,
+        timeout,
+        urlString,
         query,
         params,
-        fetchProps,
         body,
-        timeout,
         parser,
         onStart,
         onSuccess,
@@ -95,8 +87,9 @@ function useAsyncFetch(stringUrl, props = {}) {
         onFinish,
     ]);
     useEffect(() => {
-        sendRequest();
-    }, deps);
+        if (auto)
+            sendRequest();
+    }, [auto, sendRequest]);
     useInterval(() => {
         sendRequest();
     }, poll);
@@ -105,13 +98,13 @@ function useAsyncFetch(stringUrl, props = {}) {
             if (ignoreCleanup !== true)
                 cancelRequest();
         };
-    }, []);
+    }, [ignoreCleanup, cancelRequest]);
     return {
-        pending: pending || pending2,
-        data,
+        pending,
         error,
-        sendRequest,
+        data,
         cancelRequest,
+        sendRequest,
     };
 }
 export default useAsyncFetch;

package/dist/interfaces.d.ts

@@ -0,0 +1,30 @@
+export interface FetchError {
+    status: number;
+    statusText: string;
+    response: string;
+}
+export interface RequestProps<T, E> extends RequestInit {
+    initialPending?: boolean;
+    initialError?: E;
+    initialData?: T;
+    auto?: boolean;
+    poll?: number;
+    timeout?: number;
+    ignoreRequest?: boolean;
+    ignoreCleanup?: boolean;
+    query?: Record<string, any>;
+    params?: Record<string, any>;
+    data?: any;
+    parser?: "json" | "text" | "blob" | "formData" | "arrayBuffer";
+    onStart?: () => void;
+    onSuccess?: (data: T) => void;
+    onFail?: (error: E) => void;
+    onFinish?: () => void;
+}
+export interface ResponseProps<T, E> {
+    pending: boolean;
+    error?: E;
+    data?: T;
+    sendRequest: () => Promise<void>;
+    cancelRequest: () => void;
+}

package/dist/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/normalizeError.d.ts

@@ -0,0 +1,3 @@
+import { FetchError } from "./interfaces";
+declare function normalizeError<E = FetchError>(err: unknown): E;
+export default normalizeError;

package/dist/normalizeError.js

@@ -0,0 +1,22 @@
+function normalizeError(err) {
+    if (err instanceof Error) {
+        return {
+            status: 500,
+            statusText: err.message,
+            response: err.stack ?? "",
+        };
+    }
+    if (typeof err === "object" && err !== null) {
+        return {
+            status: err.status ?? 500,
+            statusText: err.statusText ?? "",
+            response: err.response ?? "",
+        };
+    }
+    return {
+        status: 500,
+        statusText: String(err),
+        response: "",
+    };
+}
+export default normalizeError;

package/dist/useInterval.js

@@ -1,16 +1,16 @@
 import { useRef, useEffect } from "react";
 function useInterval(callback, poll) {
-    const callbackRef = useRef(() => { }); // noop
+    const callbackRef = useRef(() => { });
     useEffect(() => {
-        if (typeof callback === "function") {
-            callbackRef.current = callback;
-        }
+        callbackRef.current = callback;
     }, [callback]);
     useEffect(() => {
-        if (typeof poll !== "number" || poll < 100)
+        if (!Number.isInteger(poll))
             return;
-        const interval = setInterval(() => callbackRef.current(), poll);
-        return () => clearInterval(interval);
+        const id = setInterval(() => {
+            callbackRef.current?.();
+        }, poll);
+        return () => clearInterval(id);
     }, [poll]);
 }
 export default useInterval;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "async-fetch",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Use async fetch hook for requests within React components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
   "scripts": {
-    "build": "tsc",
+    "build": "npx rimraf dist && tsc",
     "test-esm": "yarn build && node test/test-esm.mjs"
   },
   "repository": {
@@ -26,10 +26,10 @@
   },
   "homepage": "https://github.com/nameer-rizvi/useAsyncFetch#readme",
   "devDependencies": {
-    "@types/node": "^22.7.4",
-    "@types/react": "^18.3.11",
-    "react": "^18.3.1",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "react": "^19.2.3",
     "ts-node": "^10.9.2",
-    "typescript": "^5.6.2"
+    "typescript": "^5.9.3"
   }
 }