https://virgool.ir/feed/@rezabarzakhifa2026-11-12 06:51:59https://files.virgool.ir/upload/users/1060523/avatar/0gVBpr.jpghttps://virgool.ir/@rezabarzakhihttps://virgool.ir/@rezabarzakhi/چطوری-تو-reactjs-داده-ها-رو-فچ-کنیم-ouyjwolfhlavچطوری تو ReactJS داده‌ها رو فچ کنیم؟اگه شما هم دارین با ReactJS کار می‌کنین و دنبال یه راه راحت و مؤثر برای دریافت داده‌ها از سرور هستین، این مطلب می‌تونه حسابی کمکتون کنه. فچ کردن داده‌ها تو ReactJS یکی از کارهایی هست که هر فرانت اند دولوپری باید بلد باشه.فچ کردن داده‌ها تو ReactJS: چرا و چطوری؟چرا فچ کردن داده‌ها مهمه؟توی برنامه‌های وب، خیلی از اطلاعات باید به صورت پویا از یه سرور یا API گرفته بشن. برای همین، فچ کردن داده‌ها خیلی مهمه. ReactJS هم کلی ابزار و روش به ما می‌ده که بتونیم این کار رو به راحتی انجام بدیم و داده‌ها رو به بهترین شکل تو برنامه‌مون مدیریت کنیم.روش‌های مختلف برای فچ کردن داده‌هاتو ReactJS می‌تونیم از روش‌های مختلفی برای فچ کردن داده‌ها استفاده کنیم. مثلاً می‌تونیم از Fetch API، Axios، یا حتی GraphQL استفاده کنیم. هر کدوم از این روش‌ها مزایای خودشون رو دارن، ولی ما تو این مقاله بیشتر روی Fetch API تمرکز می‌کنیم.استفاده از Fetch API برای دریافت داده‌هاساختار Fetch API تو ReactJSFetch API یه ابزار ساده و پرکاربرد تو جاوااسکریپته که به ما اجازه می‌ده درخواست‌های HTTP بفرستیم و داده‌ها رو از سرور بگیریم. ساختار اصلی Fetch API تو ReactJS به این شکل هست:fetch('API-URL') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));یه مثال عملی با Fetch APIحالا بیایید یه مثال واقعی بزنیم. فرض کنیم می‌خوایم لیستی از کاربران رو از یه API بگیریم و توی صفحه نشون بدیم:import React, { useState, useEffect } from 'react'; function UsersList() { const [users, setUsers] = useState([]); useEffect(() => { fetch('API-URL') .then(response => response.json()) .then(data => setUsers(data)) .catch(error => console.error('Error:', error)); }, []); return ( <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> ); } export default UsersList;مدیریت داده‌ها بعد از فچ کردناستفاده از state برای نگه‌داری داده‌هاوقتی داده‌ها رو فچ کردیم، باید جایی نگهشون داریم تا بتونیم توی رابط کاربری نمایش بدیم. اینجاست که useState تو ReactJS به کمکمون میاد و به ما این امکان رو می‌ده که داده‌های دریافت‌شده رو به صورت داینامیک مدیریت کنیم.مدیریت خطاها و نمایش لودر موقع دریافت داده‌هایکی از چیزای مهم تو فچ کردن داده‌ها، مدیریت خطاها و نمایش وضعیت لودینگ هست. می‌تونیم با استفاده از state‌های مختلف وضعیت لودینگ و خطاها رو به خوبی مدیریت کنیم. بیایید یه مثال کامل با لودر و مدیریت خطاها بزنیم:import React, { useState, useEffect } from 'react'; function UsersList() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch('API-URL') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { setUsers(data); setLoading(false); }) .catch(error => { setError(error.message); setLoading(false); }); }, []); if (loading) { return <p>در حال بارگذاری...</p>; } if (error) { return <p>خطایی رخ داد: {error}</p>; } return ( <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> ); } export default UsersList;توی این مثال، از سه state مختلف استفاده کردیم: یکی برای نگه‌داری لیست کاربران (users)، یکی برای مدیریت وضعیت لودینگ (loading)، و یکی هم برای مدیریت خطاها (error). وقتی که داده‌ها در حال فچ شدن هستن، لودر نمایش داده می‌شه. اگه خطایی رخ بده، پیام خطا نمایش داده می‌شه. و وقتی که داده‌ها با موفقیت دریافت بشن، لیست کاربران نمایش داده می‌شه. این روش به ما کمک می‌کنه تا تجربه کاربری بهتری رو ارائه بدیم و کاربرها رو تو جریان وضعیت درخواست‌ها قرار بدیم.rezabarzakhirezabarzakhiTue, 20 Aug 2024 11:20:25 +0330