Axios

أولاً: ما هي Axios؟

Axios هي مكتبة (package) لجافاسكربت نستخدمها عشان نرسل طلبات HTTP مثل:

  • GET → جلب بيانات من API
  • POST → إرسال بيانات (تسجيل مستخدم، إضافة منتج، …)
  • PUT / PATCH / DELETE → تعديل وحذف بيانات

يعني نفس وظيفة fetch، لكن تعطيك مميزات زيادة وتسهّل التعامل مع الـ APIs.

تثبيتها (لو تستخدم React مع npm):

npm install axios
JSX

أو:

yarn add axios
JavaScript
ثانياً: أهم مميزات Axios (للمبتدئين)
1️⃣ تحويل JSON تلقائيًا
axios.get('/api/users')
  .then((response) => {
    console.log(response.data); // على طول البيانات جاهزة
  });
JavaScript

مع Axios:

  • response.data يكون جاهز كـ JavaScript object
    ما تحتاج تكتب response.json() مثل fetch.
2️⃣ دعم قديم للمتصفحات (Polyfills)

Axios تم بناؤه بحيث يشتغل على متصفحات أقدم بشكل أفضل (هذا كان مهم جدًا قبل سنوات، الآن Fetch صار مدعوم في أغلب المتصفحات، لكن لسه بعض الناس يفضّل Axios).

3️⃣ Interceptors (معترضات الطلبات والردود)

تقدّر تضيف interceptor على Axios:

  • يشتغل قبل إرسال الطلب → تضيف توكن JWT في الـ headers مثلاً.
  • أو بعد استلام الرد → تتعامل مع الأخطاء بشكل موحّد.

مثال بسيط:

import axios from 'axios';

// يشتغل قبل كل طلب
axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});
JavaScript

هذا ممتاز في مشاريع React كبيرة؛ بدل ما تحط الهيدر في كل طلب يدويًا.

4️⃣ إعدادات عامة baseURL

تقدر تعرّف instance خاص فيك:

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000, // 10 ثواني
});
JavaScript

بعدها تستخدم:

api.get('/users'); // فعليًا يروح لـ https://api.example.com/users
JavaScript

يسهّل جدًا تنظيم الكود.

5️⃣ التعامل مع الأخطاء أسهل شوي

Axios يرمي error لو الـ status code خارج 200–299، فتدخل مباشرة في catch.

axios.get('/api/users')
  .then((res) => console.log(res.data))
  .catch((err) => {
    console.log(err.response.status);
    console.log(err.response.data);
  });
JavaScript

بينما في fetch لازم تتأكد بنفسك من response.ok.

ثالثاً: ما هو Fetch؟

fetch هو دالة مدمجة في المتصفح (وفي Node حديثًا)، يعني ما تحتاج تثبيت مكتبة.

مثال بسيط:

fetch('/api/users')
  .then((response) => response.json()) // لازم تحوّل JSON يدويًا
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  });
JavaScript

Fetch قوي وكافي للمشاريع الكثيرة، لكنه أقل راحة شوي من Axios في بعض النقاط.

رابعاً: الفرق بين Axios و Fetch (ببساطة)
✅ أشياء Axios تسهّلها:
  1. JSON جاهز:
    • Axios: response.data
    • Fetch: لازم await response.json()
  2. الأخطاء:
    • Axios: أي status خارج 200–299 يروح لـ catch.
    • Fetch: حتى لو 404 أو 500 يعتبره “ناجح” ولا يروح لـ catch إلا لو فيه مشكلة شبكة، فلازم تسوي: if (!response.ok) { throw new Error('Error status: ' + response.status); }
  3. Interceptors:
    Axios عنده نظام جاهز لها.
    Fetch تحتاج تكتب wrapper بنفسك.
  4. إلغاء الطلب (cancel):
    Axios عنده دعم جاهز (CancelToken / AbortController).
    Fetch يدعم AbortController لكن تحتاج تضبطه يدويًا.
  5. الـ baseURL و config واحد:
    في Axios سهل جدًا، في Fetch تكتبه بنفسك كل مرة أو تعمل دالة خاصة.
✅ نقاط لصالح Fetch:
  1. مدمج في المتصفح → ما تحتاج تثبيت.
  2. أخفّ → ما تضيف حجم extra للـ bundle.
  3. API حديثة ومتوافقة مع المواصفات القياسية الجديدة.
خامساً: استخدام Axios في React (مثال عملي للمبتدئين)

1️⃣ جلب بيانات في useEffect

مثال كومبوننت يعرض قائمة مستخدمين:

// UsersList.jsx
import React, { useEffect, useState } from 'react';
import axios from 'axios';

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

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        setUsers(response.data); // مباشرة البيانات
        setLoading(false);
      })
      .catch((err) => {
        setError('حدث خطأ أثناء جلب البيانات');
        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;
JavaScript

نفس الكود بـ Fetch للمقارنة:

useEffect(() => {
  fetch('https://jsonplaceholder.typicode.com/users')
    .then((response) => {
      if (!response.ok) {
        throw new Error('خطأ في الاستجابة');
      }
      return response.json(); // هنا التحويل اليدوي
    })
    .then((data) => {
      setUsers(data);
      setLoading(false);
    })
    .catch((err) => {
      setError('حدث خطأ أثناء جلب البيانات');
      setLoading(false);
    });
}, []);
JavaScript

لاحظ الفرق:

  • Axios أقل سطور.
  • ما تحتاج response.json().
سادساً: هل Axios ضروري مع React؟

الإجابة بصراحة: لا، مو ضروري.

  • تقدر تبني تطبيق React كامل بـ fetch فقط.
  • لكن Axios:
    • يخلي الكود أنظف في مشاريع متوسطة/كبيرة.
    • ممتاز لو عندك:
      • توكن JWT.
      • base URL ثابت.
      • Interceptors.
      • إدارة أخطاء موحّدة.

في مشاريع صغيرة أو تعليمية → fetch كافي.
في مشاريع Production أكبر → كثير مطورين يفضّلوا Axios.

سابعاً: نصيحة للمبتدئ
  1. تعلّم fetch أول، عشان تفهم الأساس (كيف تشتغل requests في المتصفح).
  2. بعد ما تفهمه، جرّب تحوّل الكود لـ Axios وتشوف الفرق.
  3. مهم تفهم إن:
    • React ما له دالة HTTP خاصة؛ أنت تختار:
      • fetch
      • أو axios
      • أو مكتبات أقوى لإدارة البيانات مثل react-query إلخ.