fetch() से Data लाना
In this page:
useEffect(() => {
fetch("https://api.example.com/data")
.then(response => {
if (!response.ok) throw new Error("Request failed");
return response.json();
})
.then(data => setData(data));
}, []);एक Basic fetch() Request बनाना
fetch(url) एक HTTP request भेजता है और एक Promise return करता है जो headers आने पर एक Response object में resolve होता है। उस response पर .json() call करना (जो खुद एक और Promise return करता है) response body parse करता है, आपको actual data देते हुए।
उदाहरण: Making a Basic fetch() Request
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [data, setData] = React.useState(null);
React.useEffect(() => {
setData({ message: "Simulated fetch result" });
}, []);
return <p>{data ? data.message : "Loading..."}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>HTTP Errors के लिए response.ok Check करना
चूंकि fetch() HTTP error statuses पर reject नहीं होता, response.ok check करना (200-299 statuses के लिए true) एक failed request detect करने और इसे explicitly handle करने का standard तरीका है, आमतौर पर अलग से catch होने के लिए एक error throw करके।
उदाहरण: Checking response.ok for HTTP Errors
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [error, setError] = React.useState(null);
React.useEffect(() => {
const ok = false;
if (!ok) setError("Request failed with status 404");
}, []);
return <p style={{color: "red"}}>{error || "Success"}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Render Body में नहीं, useEffect के Inside Fetch करना
एक component के body में directly fetch() call करना (useEffect के बाहर) इसे हर single render पर चलाता है, उस re-render को भी शामिल करते हुए जो खुद fetch के कारण होता है, एक infinite request loop बनाते हुए।
इसे एक empty dependency array के साथ useEffect में wrap करना इसे initial render के बाद exactly एक बार चलाता है।
उदाहरण: Fetching Inside useEffect, Not the Render Body
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [data, setData] = React.useState(null);
React.useEffect(() => {
// fetch("/api/data").then(r => r.json()).then(setData);
setData("Loaded once, safely, via useEffect");
}, []);
return <p>{data || "Loading..."}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- यह भूल जाना कि fetch() सिर्फ network failure पर reject होता है, 404/500 जैसे HTTP error statuses पर नहीं — आपको खुद response.ok check करना होगा।
- Response body actually parse करने के लिए .json() (या कोई और body-reading method) call न करना।
- fetch() को component body में directly चलाना useEffect के अंदर चलाने के बजाय, requests का एक infinite loop बनाते हुए।
- fetch() HTTP requests बनाने के लिए built-in browser API है, जो एक Promise return करता है।
- fetch() सिर्फ network errors पर reject होता है — HTTP error statuses पकड़ने के लिए response.ok check करना ज़रूरी है।
- response.json() (जो खुद भी एक Promise है) response body को JSON के रूप में parse करता है।
- एक component में data fetching render body में नहीं, useEffect के अंदर होना चाहिए।
fetch() सभी modern browsers में supported है (बिना polyfill के IE11 में नहीं); किसी भी React version के साथ काम करता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: