xxxxxxxxxx
import { useEffect, useState } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const abortCont = new AbortController();
fetch(url, { signal: abortCont.signal })
.then((res) => {
if (!res.ok) {
throw Error('Could not fetch the data for that resource');
}
return res.json();
})
.then((data) => {
setData(data);
setIsLoading(false);
setError(null);
})
.catch((err) => {
if (err.name === 'AbortError') {
console.log('Fetch aborted');
} else {
setError(err.message);
setIsLoading(false);
}
});
return () => abortCont.abort();
}, [url]);
return { data, isLoading, error };
};
xxxxxxxxxx
import "./App.css";
import useFetch from "./useFetch";
function App() {
const { data: joke, loading, error, refetch } = useFetch(
"https://v2.jokeapi.dev/joke/Any"
);
if (loading) return <h1> LOADING</h1>;
if (error) console.log(error);
return (
<div className="App">
<h1>
{joke?.setup} : {joke?.delivery}
</h1>
<button onClick={refetch}> Refetch</button>
</div>
);
}
export default App;
// ########## useFetch component ##########
import { useEffect, useState } from "react";
import axios from "axios";
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
setLoading(true);
axios
.get(url)
.then((response) => {
setData(response.data);
})
.catch((err) => {
setError(err);
})
.finally(() => {
setLoading(false);
});
}, [url]);
const refetch = () => {
setLoading(true);
axios
.get(url)
.then((response) => {
setData(response.data);
})
.catch((err) => {
setError(err);
})
.finally(() => {
setLoading(false);
});
};
return { data, loading, error, refetch };
}
export default useFetch;
xxxxxxxxxx
const useFetch = (url) => {
const [status, setStatus] = useState('idle');
const [data, setData] = useState([]);
useEffect(() => {
if (!url) return;
const fetchData = async () => {
setStatus('fetching');
const response = await fetch(url);
const data = await response.json();
setData(data);
setStatus('fetched');
};
fetchData();
}, [url]);
return { status, data };
};