async-fetch 0.1.6 → 0.1.9

package/README.md

@@ -10,59 +10,58 @@ $ npm i async-fetch
 
 ## Usage
 
-Provide your config and handle the response.
+Provide your request config and handle the response.
 
 ```javascript
 import React from "react";
 import useAsyncFetch from "async-fetch";
 
-const { pending, data, error, sendRequest, cancelRequest } = useAsyncFetch(
-  "https://jsonplaceholder.typicode.com/todos/1"
-);
+const App = () => {
+  const { pending, data, error, sendRequest, cancelRequest } = useAsyncFetch(
+    "http://localhost:5000/api/v1/"
+  );
 
-return pending ? (
-  "Loading..."
-) : data ? (
-  "Data: " + JSON.stringify(data)
-) : error ? (
-  "Error: " + error.toString()
-) : (
-  <React.Fragment>
-    <br />
-    <br />
-    <button onClick={sendRequest}>Send request.</button>
-    <br />
-    <br />
-    <button onClick={cancelRequest}>Cancel request.</button>
-  </React.Fragment>
-);
+  return (
+    <React.Fragment>
+      <button onClick={sendRequest}>Send request.</button>
+      <br />
+      <br />
+      <button onClick={cancelRequest} disabled={!pending}>
+        Cancel request.
+      </button>
+      <br />
+      <br />
+      {pending
+        ? "Loading..."
+        : data
+        ? JSON.stringify(data)
+        : error
+        ? "Error: " + error.toString()
+        : ""}
+    </React.Fragment>
+  );
+};
+
+export default App;
 ```
 
 ### Available IN Props And Definitions
 
-The minimum requirement for the hook is either a url string or an object with a url property.
-
-| Key                   | Type     | Definition                                                                                                                                      | Default |
-| --------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| initialPending        | Boolean  | Initial boolean of the pending state.                                                                                                           |         |
-| initialError          | Any      | Initial value of the error state.                                                                                                               |         |
-| initialData           | Any      | Initial value of the data state.                                                                                                                |         |
-| useEffectDependency   | Array    | Dependency array for the useEffect.                                                                                                             | []      |
-| disableController     | Boolean  | To allow fetch's AbortController API to cancel requests.                                                                                        |         |
-| poll                  | Number   | Time interval (in milliseconds) for polling.                                                                                                    |         |
-| manual                | Boolean  | Condition where if true the request won't send unless called using the sendRequest OUT property.                                                |         |
-| condition             | Boolean  | Conditional statement where if false, the request won't send.                                                                                   |         |
-| url                   | String   | URL to send request to.                                                                                                                         |         |
-| method                | String   | Request method type.                                                                                                                            | "GET"   |
-| query                 | Object   | Query parameters to include in the request.                                                                                                     |         |
-| data                  | Object   | Data object to include in the request body.                                                                                                     |         |
-| initialResponseParser | String   | Parser method to use on the initial response.                                                                                                   | "json"  |
-| onStart               | Function | Callback function to run before the request is sent.                                                                                            |         |
-| onSuccess             | Function | Callback function to run after the response has been handled using the initialResponseParser. The parsed response is available in the callback. |         |
-| onFail                | Function | Callback function to run when the request responds with an error. The error is available in the callback.                                       |         |
-| onFinish              | Function | Callback function to run when after the request is completed, regardless of success or failure                                                  |         |
+The minimum requirement for the hook is either a url string or an object with a url property. It is assumed that any other property that's provided is to be used for the actual fetch.
 
-It is assumed that any other property that's provided is to be used for the actual fetch.
+| Key       | Type     | Definition                                                                                                     | Default |
+| --------- | -------- | -------------------------------------------------------------------------------------------------------------- | ------- |
+| url       | String   | URL to send request to.                                                                                        |         |
+| query     | Object   | Query parameters to include in the request (alt key name: "params").                                           |         |
+| data      | Object   | Data object to include in the request body.                                                                    |         |
+| parser    | String   | Method used to parse the response.                                                                             | "json"  |
+| onStart   | Function | Callback function to run before the request is sent.                                                           |         |
+| onSuccess | Function | Callback function to run after the response has been parsed. The parsed response is available in the callback. |         |
+| onFail    | Function | Callback function to run when the request responds with an error. The error is available in the callback.      |         |
+| onFinish  | Function | Callback function to run after the request has completed, regardless of success or failure.                    |         |
+| deps      | Array    | Dependency array for the useEffect.                                                                            | []      |
+| ignore    | Boolean  | Condition where if true the request won't send unless called using the sendRequest OUT property.               |         |
+| poll      | Number   | Time interval (in milliseconds) for polling.                                                                   |         |
 
 ### Available OUT Props And Definitions
 
@@ -71,8 +70,5 @@ It is assumed that any other property that's provided is to be used for the actu
 | pending       | Boolean  | Whether the request is active or not.    |
 | error         | Any      | The response error.                      |
 | data          | Any      | The response data.                       |
-| setPending    | Boolean  | Custom setter for pending state.         |
-| setError      | Any      | Custom setter for error state.           |
-| setData       | Any      | Custom setter for data state.            |
 | sendRequest   | Function | Function to send the request manually.   |
 | cancelRequest | Function | Function to cancel the request manually. |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "async-fetch",
-  "version": "0.1.6",
-  "description": "Asynchronously use fetch for requests within React components.",
+  "version": "0.1.9",
+  "description": "Use fetch asynchronously for requests within React components.",
   "main": "useAsyncFetch.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/useAsyncFetch.js

@@ -1,128 +1,120 @@
-const { useState, useEffect } = require("react");
-const useInterval = require("./useInterval");
+import { useState, useEffect } from "react";
+import useInterval from "./useInterval";
 
 let controller;
 
-function useAsyncFetch(props, fetchProps) {
+function useAsyncFetch(props, props2) {
   let {
-    initialPending,
-    initialError,
-    initialData,
-    useEffectDependency = [],
-    disableController,
-    poll = null,
-    manual,
-    condition,
-    method = "GET",
+    url,
     query,
-    data: bodyData,
-    initialResponseParser = "json",
+    params,
+    data: requestData,
+    parser = "json",
     onStart,
     onSuccess,
     onFail,
     onFinish,
-    ...fetchOptions
-  } = props && props.constructor === Object ? props : {};
+    deps = [],
+    ignore,
+    poll,
+    ...props3
+  } = props instanceof Object ? props : {};
 
-  const url =
-    props &&
-    ((props.constructor === Object && props.url) ||
-      (props.constructor === String && props));
+  if (typeof props === "string") url = props;
 
-  const [pending, setPending] = useState(initialPending);
-  const [error, setError] = useState(initialError);
-  const [data, setData] = useState(initialData);
-  const [unmounted, setUnmounted] = useState();
+  const [pending1, setPending1] = useState();
 
-  function cancelActiveRequest() {
-    if (controller && controller.abort) controller.abort();
-  }
+  const [pending2, setPending2] = useState();
 
-  function sendRequest(props = {}) {
-    if (url && condition !== false && !unmounted) {
-      if (disableController !== true) cancelActiveRequest();
+  const [error, setError] = useState();
 
-      if (!props.excludePendingUpdate) setPending(true);
+  const [data, setData] = useState();
 
-      setError();
+  const [unmounted, setUnmounted] = useState();
 
-      if (onStart) onStart();
+  const cancelActiveRequest = () => controller?.abort?.();
 
-      query = query ? "?" + new URLSearchParams(query).toString() : "";
+  async function sendRequest() {
+    try {
+      cancelActiveRequest();
 
       controller = new AbortController();
 
-      const options = {
-        method,
-        signal: controller && controller.signal,
-        ...fetchOptions,
-        body:
-          (bodyData || fetchOptions.body) &&
-          JSON.stringify({ ...bodyData, ...fetchOptions.body }),
-        ...fetchProps,
-      };
-
-      fetch(url + query, options)
-        .then((initialResponse) => {
-          if (!unmounted) {
-            if (!initialResponse.ok) {
-              const throwError =
-                initialResponse.statusText || initialResponse.status.toString();
-              throw Error(throwError);
-            }
-            return initialResponse[initialResponseParser]();
-          }
-        })
-        .then((parsedResponse) => {
-          if (!unmounted) {
-            setData(parsedResponse);
-            if (onSuccess) onSuccess(parsedResponse);
-          }
-        })
-        .catch((responseError) => {
-          if (!unmounted) {
-            setError(responseError);
-            if (onFail) onFail(responseError);
-          }
-        })
-        .finally(() => {
-          if (!unmounted) {
-            setPending();
-            if (onFinish) onFinish();
-          }
-        });
+      if (!unmounted) {
+        if (pending1) {
+          setPending2(true);
+        } else setPending1(true);
+        setError();
+        if (onStart) onStart();
+      }
+
+      if (query || params)
+        url += "?" + new URLSearchParams(query || params).toString();
+
+      const response = await fetch(url, {
+        signal: controller?.signal,
+        body: requestData && JSON.stringify(requestData),
+        ...props2,
+        ...props3,
+      });
+
+      if (!response.ok)
+        throw new Error(
+          JSON.stringify({
+            code: r.status,
+            text: r.statusText,
+            response: await response.text(),
+          })
+        );
+
+      const parsedResponse = await response[parser]();
+
+      if (!unmounted) {
+        setData(parsedResponse);
+        if (onSuccess) onSuccess(parsedResponse);
+      }
+    } catch (error) {
+      if (!unmounted && error.name !== "AbortError") {
+        let errorJson;
+        try {
+          errorJson = error.toString().replace("Error:", "");
+          errorJson = JSON.parse(errorJson.trim());
+        } catch {}
+        setError(errorJson || error);
+        if (onFail) onFail(errorJson || error);
+      }
+    } finally {
+      if (!unmounted) {
+        if (pending1) {
+          setPending2(false);
+        } else setPending1(false);
+        if (onFinish) onFinish();
+      }
     }
   }
 
   useEffect(() => {
-    if (!url) console.warn("[async-fetch] url is required.");
-    if (!manual) sendRequest();
-    // eslint-disable-next-line
-  }, useEffectDependency);
+    if (ignore !== true) sendRequest();
+  }, deps); // eslint-disable-line
 
   useInterval(() => {
-    sendRequest({ excludePendingUpdate: true });
+    sendRequest();
   }, poll);
 
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    return () => {
       setUnmounted(true);
-      if (disableController !== true) cancelActiveRequest();
-    },
-    // eslint-disable-next-line
-    []
-  );
+      cancelActiveRequest();
+    };
+  }, []);
 
   return {
-    pending,
+    pending: pending1 || pending2,
     error,
     data,
-    setPending,
-    setError,
-    setData,
-    cancelRequest: cancelActiveRequest,
     sendRequest,
+    cancelRequest: cancelActiveRequest,
   };
 }
 
-module.exports = useAsyncFetch;
+export default useAsyncFetch;

package/useInterval.js

@@ -1,22 +1,22 @@
-// https://github.com/Hermanya/use-interval/blob/master/src/index.tsx
-
-const { useEffect, useRef } = require("react");
-
-const noop = () => {};
+import { useEffect, useRef } from "react";
 
 function useInterval(callback, poll) {
-  const savedCallback = useRef(noop);
+  const callbackRef = useRef(() => {}); // noop
 
   useEffect(() => {
-    savedCallback.current = callback;
+    callbackRef.current = callback;
   });
 
   useEffect(() => {
-    if (poll === null || poll === false) return;
-    const tick = () => savedCallback.current();
-    const id = setInterval(tick, poll);
-    return () => clearInterval(id);
+    if (!poll) return;
+    const onTick = () => callbackRef.current();
+    const interval = setInterval(onTick, poll);
+    return () => {
+      clearInterval(interval);
+    };
   }, [poll]);
 }
 
-module.exports = useInterval;
+export default useInterval;
+
+// https://github.com/Hermanya/use-interval/blob/master/src/index.tsx