async-fetch 0.1.7 → 0.2.0

package/README.md

@@ -10,53 +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 |
-|----------------|----------|----------------------------------------------------------------------------------------------------------------|---------|
-| 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.                                                                    |         |
-| responseParser | String   | Parser method to use on 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 when after the request has completed, regardless of success or failure.               |         |
-| useEffect      | Array    | Dependency array for the useEffect.                                                                            | []      |
-| ignoreEffect   | 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.                                                                   |         |
+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
 

package/package.json

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

package/useAsyncFetch.js

@@ -3,34 +3,36 @@ import useInterval from "./useInterval";
 
 let controller;
 
-function useAsyncFetch(props, fetchProps = {}) {
+function useAsyncFetch(props, props2) {
   let {
     url,
     query,
     params,
     data: requestData,
-    responseParser = "json",
+    parser = "json",
     onStart,
     onSuccess,
     onFail,
     onFinish,
-    ignoreEffect,
-    useEffect: useEffectDependency = [],
+    deps = [],
+    ignore,
     poll,
-    ...fetchProps2
-  } = props && props.constructor === Object ? props : {};
+    ...props3
+  } = props instanceof Object ? props : {};
 
-  if (props && props.constructor === String) url = props;
+  if (typeof props === "string") url = props;
 
   const [pending1, setPending1] = useState();
+
   const [pending2, setPending2] = useState();
+
   const [error, setError] = useState();
+
   const [data, setData] = useState();
+
   const [unmounted, setUnmounted] = useState();
 
-  function cancelActiveRequest() {
-    if (controller && controller.abort) controller.abort();
-  }
+  const cancelActiveRequest = () => controller?.abort?.();
 
   async function sendRequest() {
     try {
@@ -38,17 +40,6 @@ function useAsyncFetch(props, fetchProps = {}) {
 
       controller = new AbortController();
 
-      const options = {
-        signal: controller && controller.signal,
-        ...fetchProps,
-        ...fetchProps2,
-      };
-
-      if (query || params)
-        url += "?" + new URLSearchParams(query || params).toString();
-
-      if (requestData) options.body = JSON.stringify(requestData);
-
       if (!unmounted) {
         if (pending1) {
           setPending2(true);
@@ -57,12 +48,26 @@ function useAsyncFetch(props, fetchProps = {}) {
         if (onStart) onStart();
       }
 
-      const response = await fetch(url, options);
+      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(response.statusText || response.status.toString());
+        throw new Error(
+          JSON.stringify({
+            code: response.status,
+            text: response.statusText,
+            response: await response.text(),
+          })
+        );
 
-      const parsedResponse = await response[responseParser]();
+      const parsedResponse = await response[parser]();
 
       if (!unmounted) {
         setData(parsedResponse);
@@ -70,8 +75,13 @@ function useAsyncFetch(props, fetchProps = {}) {
       }
     } catch (error) {
       if (!unmounted && error.name !== "AbortError") {
-        setError(error);
-        if (onFail) onFail(error);
+        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) {
@@ -84,8 +94,8 @@ function useAsyncFetch(props, fetchProps = {}) {
   }
 
   useEffect(() => {
-    if (ignoreEffect !== true) sendRequest();
-  }, useEffectDependency); // eslint-disable-line
+    if (ignore !== true) sendRequest();
+  }, deps); // eslint-disable-line
 
   useInterval(() => {
     sendRequest();

package/useInterval.js

@@ -1,19 +1,19 @@
 import { useEffect, useRef } from "react";
 
-const noop = () => {};
-
 function useInterval(callback, poll) {
-  const savedCallback = useRef(noop);
+  const callbackRef = useRef(() => {}); // noop
 
   useEffect(() => {
-    savedCallback.current = callback;
+    callbackRef.current = callback;
   });
 
   useEffect(() => {
     if (!poll) return;
-    const tick = () => savedCallback.current();
-    const id = setInterval(tick, poll);
-    return () => clearInterval(id);
+    const onTick = () => callbackRef.current();
+    const interval = setInterval(onTick, poll);
+    return () => {
+      clearInterval(interval);
+    };
   }, [poll]);
 }