async-fetch 0.2.8 → 0.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/package.json +2 -2
- package/useAsyncFetch.js +13 -10
- package/useCache.js +6 -16
- package/useInterval.js +2 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# useAsyncFetch
|
|
2
2
|
|
|
3
|
-
Use fetch
|
|
3
|
+
Use fetch for requests within React components.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -18,7 +18,7 @@ import useAsyncFetch from "async-fetch";
|
|
|
18
18
|
|
|
19
19
|
function App() {
|
|
20
20
|
const { pending, data, error, sendRequest, cancelRequest } = useAsyncFetch(
|
|
21
|
-
"https://jsonplaceholder.typicode.com/todos/1"
|
|
21
|
+
"https://jsonplaceholder.typicode.com/todos/1",
|
|
22
22
|
);
|
|
23
23
|
|
|
24
24
|
return (
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "async-fetch",
|
|
3
|
-
"version": "0.2.
|
|
4
|
-
"description": "Use fetch
|
|
3
|
+
"version": "0.2.9",
|
|
4
|
+
"description": "Use fetch for requests within React components.",
|
|
5
5
|
"main": "useAsyncFetch.js",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"scripts": {
|
package/useAsyncFetch.js
CHANGED
|
@@ -10,7 +10,7 @@ function useAsyncFetch(path, props = {}) {
|
|
|
10
10
|
deps = [],
|
|
11
11
|
poll,
|
|
12
12
|
cachetime = 60000, // 1 minute.
|
|
13
|
-
timeout = 30000, //
|
|
13
|
+
timeout = 30000, // 30 seconds.
|
|
14
14
|
ignoreCleanup,
|
|
15
15
|
ignoreRequest,
|
|
16
16
|
query,
|
|
@@ -62,10 +62,13 @@ function useAsyncFetch(path, props = {}) {
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
async function sendRequest(constant) {
|
|
65
|
-
if (!path)
|
|
65
|
+
if (!path) {
|
|
66
|
+
throw new Error("URL is required.");
|
|
67
|
+
}
|
|
66
68
|
|
|
67
|
-
if (typeof path !== "string")
|
|
69
|
+
if (typeof path !== "string") {
|
|
68
70
|
throw new Error("URL must be of type string.");
|
|
71
|
+
}
|
|
69
72
|
|
|
70
73
|
if (ignoreRequest !== true) {
|
|
71
74
|
const controller = new AbortController();
|
|
@@ -81,7 +84,7 @@ function useAsyncFetch(path, props = {}) {
|
|
|
81
84
|
|
|
82
85
|
if (query || params) {
|
|
83
86
|
if (!path.endsWith("?")) q += "?";
|
|
84
|
-
q += new URLSearchParams(query || params)
|
|
87
|
+
q += new URLSearchParams(query || params);
|
|
85
88
|
}
|
|
86
89
|
|
|
87
90
|
const contentType =
|
|
@@ -89,7 +92,7 @@ function useAsyncFetch(path, props = {}) {
|
|
|
89
92
|
fetchProps.headers?.["content-type"];
|
|
90
93
|
|
|
91
94
|
if (contentType === "application/x-www-form-urlencoded") {
|
|
92
|
-
fetchProps.body = new URLSearchParams(data2 || {})
|
|
95
|
+
fetchProps.body = new URLSearchParams(data2 || {});
|
|
93
96
|
} else if (data2) {
|
|
94
97
|
fetchProps.body = JSON.stringify(data2);
|
|
95
98
|
}
|
|
@@ -106,22 +109,22 @@ function useAsyncFetch(path, props = {}) {
|
|
|
106
109
|
|
|
107
110
|
const url = path + q;
|
|
108
111
|
|
|
109
|
-
const cachedResponse =
|
|
110
|
-
constant === "USE_CACHE" && cache.get(url, fetchProps);
|
|
112
|
+
const cachedResponse = constant === "USE_CACHE" && cache.get(url);
|
|
111
113
|
|
|
112
114
|
let parsedResponse = cachedResponse;
|
|
113
115
|
|
|
114
116
|
if (!parsedResponse) {
|
|
115
117
|
const response = await fetch(url, fetchProps);
|
|
116
118
|
|
|
117
|
-
if (!response.ok)
|
|
119
|
+
if (!response.ok) {
|
|
118
120
|
throw new Error(
|
|
119
121
|
JSON.stringify({
|
|
120
122
|
code: response.status,
|
|
121
123
|
text: response.statusText,
|
|
122
124
|
response: await response.text(),
|
|
123
|
-
})
|
|
125
|
+
}),
|
|
124
126
|
);
|
|
127
|
+
}
|
|
125
128
|
|
|
126
129
|
parsedResponse = await response[parser]();
|
|
127
130
|
}
|
|
@@ -129,7 +132,7 @@ function useAsyncFetch(path, props = {}) {
|
|
|
129
132
|
if (!unmounted) {
|
|
130
133
|
setData(parsedResponse);
|
|
131
134
|
if (onSuccess) onSuccess(parsedResponse);
|
|
132
|
-
if (!cachedResponse) cache.set(url,
|
|
135
|
+
if (!cachedResponse) cache.set(url, parsedResponse);
|
|
133
136
|
}
|
|
134
137
|
} catch (e) {
|
|
135
138
|
if (!unmounted && e.name !== "AbortError") {
|
package/useCache.js
CHANGED
|
@@ -4,27 +4,17 @@ const cache = {};
|
|
|
4
4
|
|
|
5
5
|
function useCache(cachetime) {
|
|
6
6
|
useInterval(() => {
|
|
7
|
-
for (let [key, value] of Object.entries(cache))
|
|
7
|
+
for (let [key, value] of Object.entries(cache)) {
|
|
8
8
|
if (value.timestamp + cachetime < new Date().getTime()) delete cache[key];
|
|
9
|
+
}
|
|
9
10
|
}, cachetime);
|
|
10
11
|
|
|
11
|
-
function
|
|
12
|
-
|
|
12
|
+
function get(url) {
|
|
13
|
+
if (cachetime) return cache[url]?.response;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
|
-
function
|
|
16
|
-
if (cachetime) {
|
|
17
|
-
const key = makeKey(url, fetchProps);
|
|
18
|
-
return cache[key]?.response;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function set(url, fetchProps, response) {
|
|
23
|
-
if (cachetime) {
|
|
24
|
-
const key = makeKey(url, fetchProps);
|
|
25
|
-
const payload = { timestamp: new Date().getTime(), response };
|
|
26
|
-
cache[key] = payload;
|
|
27
|
-
}
|
|
16
|
+
function set(url, response) {
|
|
17
|
+
if (cachetime) cache[url] = { timestamp: new Date().getTime(), response };
|
|
28
18
|
}
|
|
29
19
|
|
|
30
20
|
return { get, set };
|
package/useInterval.js
CHANGED
|
@@ -8,9 +8,8 @@ function useInterval(callback, poll) {
|
|
|
8
8
|
});
|
|
9
9
|
|
|
10
10
|
useEffect(() => {
|
|
11
|
-
if (
|
|
12
|
-
const
|
|
13
|
-
const interval = setInterval(onTick, poll);
|
|
11
|
+
if (typeof poll !== "number") return;
|
|
12
|
+
const interval = setInterval(() => callbackRef.current(), poll);
|
|
14
13
|
return () => {
|
|
15
14
|
clearInterval(interval);
|
|
16
15
|
};
|