ارتباط با سرور در React

ارتباط با سرور (API) در React

بخش بزرگی از اپلیکیشن‌های تحت وب امروزی بر پایه دریافت و ارسال اطلاعات از/به سرور هستند. در React ابزارها و روش‌های مختلفی برای انجام این کار وجود دارد، از fetch ساده گرفته تا کتابخانه‌هایی مثل React Query که مدیریت حرفه‌ای داده‌ها را فراهم می‌کنند.

استفاده از fetch و axios

fetch (ابزار بومی مرورگر)

useEffect(() => {
 fetch("https://api.example.com/data")
 .then(res => res.json())
 .then(data => setData(data));
}, []);

- بومی و بدون نیاز به نصب

- نیاز به کدنویسی بیشتر برای هندل کردن خطا و status

axios (کتابخانه پرکاربرد)

npm install axios

import axios from 'axios';
useEffect(() => {
 axios.get("https://api.example.com/data")
 .then(res => setData(res.data))
 .catch(err => console.error(err));
}, []);

مزایا:

- سینتکس ساده‌تر از fetch

- مدیریت بهتر header و خطاها

- پشتیبانی از interceptor، cancel request و...

ارسال درخواست GET, POST, PUT, DELETE

GET (خواندن داده)

axios.get('/api/users');

POST (ارسال داده)

axios.post('/api/users', { name: "Ali", email: "ali@email.com" });

PUT (ویرایش داده)

axios.put('/api/users/1', { name: "Ali Updated" });

DELETE (حذف داده)

axios.delete('/api/users/1');

استفاده از async/await در React

برای تمیزتر و خواناتر شدن کد، استفاده از async/await توصیه می‌شود:

useEffect(() => {
 const fetchData = async () => {
 try {
 const res = await axios.get("/api/data");
 setData(res.data);
 } catch (error) {
 console.error("خطا در دریافت داده:", error);
 }
 };
 fetchData();
}, []);

مزایا:

- خوانایی بیشتر نسبت به then/catch

- استفاده بهتر از try/catch برای مدیریت خطاها

الگوی SWR و React Query برای data fetching

React Query

کتابخانه‌ای بسیار قدرتمند برای مدیریت درخواست‌ها، کش کردن داده، رفرش خودکار و sync با سرور:

npm install @tanstack/react-query

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
const { data, isLoading, error } = useQuery(['users'], () =>
 axios.get('/api/users').then(res => res.data)
);

امکانات:

- کش داخلی و هوشمند

- رفرش خودکار داده‌ها

- مدیریت وضعیت بارگذاری، خطا، و موفقیت

- همگام‌سازی با تغییر تب یا refocus شدن صفحه

SWR (ساخته شده توسط Vercel)

npm install swr

import useSWR from 'swr';
const fetcher = url => fetch(url).then(res => res.json());
const { data, error, isLoading } = useSWR('/api/data', fetcher);

ویژگی‌ها:

- کش مبتنی بر کلید

- رفتار مشابه React Query

- مینیمال و ساده‌تر

جمع‌بندی

در این فصل یاد گرفتیم که:

- چطور با fetch یا axios به سرور متصل شویم و داده ارسال/دریافت کنیم

- چطور از async/await برای ساده‌تر شدن کدنویسی استفاده کنیم

- چگونه با استفاده از React Query یا SWR عملیات‌های data fetching را حرفه‌ای‌تر مدیریت کنیم