Fetch vs Axios في React: أيهما تختار؟

جلب البيانات جزء أساسي من أي تطبيق React. أكثر طريقتين شهرة هما Fetch و Axios.

ما الفرق بين Fetch و Axios؟

• Fetch: مدمج في المتصفح ولا يحتاج تثبيت.
• Axios: مكتبة خارجية سهلة وتوفر ميزات إضافية.

مثال 1: جلب بيانات باستخدام Fetch

import { useEffect, useState } from "react";

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        if (!res.ok) throw new Error("فشل تحميل البيانات");
        return res.json();
      })
      .then((data) => setUsers(data))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>جاري التحميل...</p>;
  if (error) return <p className="text-danger">{error}</p>;

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

في Fetch يجب أن نفحص res.ok ثم نحول البيانات عبر res.json().

لماذا هذا ضروري؟ لأن Fetch لا يعتبر الخطأ في HTTP (مثل 404) خطأً تلقائيًا. لذلك نفحص res.ok يدويًا، وإذا كان غير صحيح نرمي خطأ حتى يتم التقاطه في catch. بعد ذلك نحول الرد إلى JSON ثم نخزّنه في الحالة ونعرض القائمة.

مثال 2: جلب بيانات باستخدام Axios

import axios from "axios";
import { useEffect, useState } from "react";

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => setUsers(res.data))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>جاري التحميل...</p>;
  if (error) return <p className="text-danger">{error}</p>;

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

في Axios لا تحتاج لكتابة res.json() لأن البيانات في res.data مباشرة.

Axios يُسهّل العملية: الاستجابة تكون جاهزة داخل res.data. كما أنه يرمي خطأ تلقائيًا عند كود HTTP غير ناجح، لذلك يقل عدد الأسطر المطلوبة مقارنة بـ Fetch.

متى تختار Fetch أو Axios؟

• استخدم Fetch إذا كان مشروعك بسيطًا وتريد تقليل التبعيات.
• استخدم Axios إذا كنت تحتاج ميزات إضافية مثل interceptors أو timeout.

أخطاء شائعة

• نسيان التعامل مع الأخطاء في Fetch.
• الاعتقاد أن Fetch يرمي خطأ تلقائيًا عند 404 (لا يفعل).
• نسيان إلغاء الطلبات عند إزالة المكوّن في التطبيقات الكبيرة.

الأسئلة الشائعة — FAQ

ما الفرق بين Fetch و Axios؟

Fetch مدمج، Axios مكتبة بميزات إضافية.

هل Axios أفضل دائمًا؟

لا، Fetch كافٍ للكثير من الحالات.

كيف أتعامل مع الأخطاء في Fetch؟

تحقق من res.ok ثم استخدم catch.

هل Axios يعيد البيانات مباشرة؟

نعم، البيانات في res.data.

متى أستخدم React Query بدل Fetch/Axios؟

عندما تحتاج كاش وتحكم متقدم بحالات التحميل والأخطاء.