async-fetch 0.1.7 → 0.1.8

package/README.md

@@ -10,7 +10,7 @@ $ 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";
@@ -43,7 +43,7 @@ return pending ? (
 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.                                                                    |         |
@@ -51,7 +51,7 @@ The minimum requirement for the hook is either a url string or an object with a
 | 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.               |         |
+| onFinish       | Function | Callback function to run 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.                                                                   |         |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "async-fetch",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Asynchronously use fetch for requests within React components.",
   "main": "useAsyncFetch.js",
   "scripts": {

package/useAsyncFetch.js

@@ -15,22 +15,24 @@ function useAsyncFetch(props, fetchProps = {}) {
     onFail,
     onFinish,
     ignoreEffect,
-    useEffect: useEffectDependency = [],
+    useEffect: useEffectDependencies = [],
     poll,
     ...fetchProps2
-  } = props && props.constructor === Object ? props : {};
+  } = 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,7 +48,15 @@ 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),
+        ...fetchProps,
+        ...fetchProps2,
+      });
 
       if (!response.ok)
         throw new Error(response.statusText || response.status.toString());
@@ -82,10 +81,9 @@ function useAsyncFetch(props, fetchProps = {}) {
       }
     }
   }
-
   useEffect(() => {
     if (ignoreEffect !== true) sendRequest();
-  }, useEffectDependency); // eslint-disable-line
+  }, useEffectDependencies); // eslint-disable-line
 
   useInterval(() => {
     sendRequest();

package/useInterval.js

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