Axios Get

1️⃣ ما هي GET؟

في بروتوكول HTTP فيه عدّة طرق (methods):
GET, POST, PUT, DELETE, … الخ.

  • GET = نستخدمها لـ جلب البيانات فقط من API
  • ما يكون لها body (بالعادة).
  • تعتبر آمنة و idempotent (يعني لو طلبتها 100 مرة المفروض نفس النتيجة، وما تغيّر بيانات في السيرفر).

مع Axios نستخدم:

axios.get(url, config?)
JavaScript
2️⃣ الشكل الأساسي لـ axios.get

الصيغة العامة:

axios.get(url, config)
  .then((response) => {
    // التعامل مع البيانات
  })
  .catch((error) => {
    // التعامل مع الخطأ
  });
JavaScript

أو مع async/await:

try {
  const response = await axios.get(url, config);
  // التعامل مع response
} catch (error) {
  // التعامل مع الخطأ
}
JavaScript

البرامترين:

  1. url (إجباري)
    رابط الـ API، مثل: 'https://api.example.com/users' '/api/users'
  2. config (اختياري)
    كائن (object) يحتوي إعدادات الطلب:
    • params
    • headers
    • timeout
    • responseType
    • withCredentials
    • إلخ (بنشرحها تحت).
3️⃣ أهم الخيارات داخل config مع GET
🔹 (1) params – للـ Query String

بدال ما تكتب الـ query string يدويًا في الرابط، Axios يسهّلها لك:

axios.get('https://api.example.com/users', {
  params: {
    page: 2,
    limit: 10,
    search: 'ahmed',
  },
});
JavaScript

هذا يترجم تلقائيًا إلى:

https://api.example.com/users?page=2&limit=10&search=ahmed
JavaScript

ليش هذا أفضل؟

  • أسهل للقراءة.
  • يحميك من مشاكل الترميز (encoding) لما يكون عندك حروف خاصة أو عربية.
🔹 (2) headers – إرسال هيدرات خاصة

مثلاً توكن JWT:

axios.get('/api/me', {
  headers: {
    Authorization: `Bearer ${token}`,
    'X-Custom-Header': 'example',
  },
});
JavaScript

مفيد في:

  • الـ Auth (تسجيل الدخول / توكن).
  • تحديد نوع المحتوى Content-Type (مع أنه في GET غالبًا ما تحتاج).

🔹 (3) timeout – مهلة الطلب

لو السيرفر تأخر، تقدر تخلي الطلب يقطع بعد مدة معينة (بالملّي ثانية):

axios.get('/api/users', {
  timeout: 5000, // 5 ثواني
});
JavaScript

لو تجاوز الوقت → Axios يرمي خطأ (Timeout).

🔹 (4) responseType – نوع البيانات المتوقعة

الوضع الافتراضي: json

تقدر تغيّره مثلاً لو حاب تحمل ملف:

axios.get('/file.pdf', {
  responseType: 'blob', // أو 'arraybuffer'
});
JavaScript

أنواع شائعة:

  • json (افتراضي)
  • blob (للملفات)
  • text
  • arraybuffer
🔹 (5) withCredentials – مع الـ Cookies

لو تتعامل مع API تستخدم cookies بين الدومينات:

axios.get('https://api.example.com/profile', {
  withCredentials: true,
});
JavaScript

هذا يخلي المتصفح يرسل الـ cookies مع الطلب.

🔹 (6) validateStatus – التحكم متى يعتبر الطلب ناجح

افتراضيًا Axios يعتبر أي status بين 200 و < 300 ناجح.
تقدر تغيّر هذا السلوك:

axios.get('/api/users', {
  validateStatus: function (status) {
    // اعتبر كل شيء أقل من 500 "نجاح"
    return status < 500;
  },
});
JavaScript

لو رجع status ما ينطبق على الدالة → Axios يرمي خطأ وتروح للـ catch.

4️⃣ شكل الـ response اللي يرجع من axios.get

لما الطلب ينجح، Axios يرجع لك كائن مثل:

const response = await axios.get('/api/users');
JavaScript

الـ response يحتوي:

  • response.data → البيانات اللي رجعت من السيرفر (الأهم).
  • response.status → رقم الحالة (200, 201, 404, 500…).
  • response.statusText → نص الحالة (OK, Not Found…).
  • response.headers → الهيدرات اللي رجعت.
  • response.config → إعدادات الطلب نفسه.
  • response.request → كائن الطلب (مو دايم تحتاجه).

أنت كمبتدئ أهم شيء تهتم فيه غالبًا:

response.data
response.status
JavaScript
5️⃣ التعامل مع الأخطاء في GET
مع .then / .catch:
axios.get('/api/users')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (error.response) {
      // السيرفر ردّ بكود خطأ (مثلاً 400 أو 500)
      console.log('Status:', error.response.status);
      console.log('Data:', error.response.data);
    } else if (error.request) {
      // الطلب طلع من جهازك لكن ما فيه رد من السيرفر
      console.log('No response from server');
    } else {
      // خطأ في إعدادات الطلب قبل الإرسال
      console.log('Error', error.message);
    }
  });
JavaScript
مع async/await:
try {
  const response = await axios.get('/api/users');
  console.log(response.data);
} catch (error) {
  if (error.response) {
    console.log('Status:', error.response.status);
    console.log('Data:', error.response.data);
  } else if (error.request) {
    console.log('No response from server');
  } else {
    console.log('Error', error.message);
  }
}
JavaScript

مهم تفهم:

  • error.response موجود لو السيرفر ردّ فعليًا لكن بكود خطأ (مثلاً 404).
  • error.request موجود لو الطلب خرج لكن ما رجع رد (مشكلة شبكة أو سيرفر طافي).
  • لو الاثنين فاضيين → مشكلة في الكود نفسه (URL غلط، config غلط، …).
6️⃣ مثال عملي كامل في React باستخدام axios.get

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

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function PostsList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // دالة async داخل useEffect
    const fetchPosts = async () => {
      try {
        setLoading(true);
        setError(null);

        const response = await axios.get(
          'https://jsonplaceholder.typicode.com/posts',
          {
            params: {
              _limit: 5, // مثال على params
            },
            timeout: 8000, // 8 ثواني
          }
        );

        setPosts(response.data); // البيانات مباشرة
      } catch (err) {
        setError('حدث خطأ أثناء جلب البيانات');
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    fetchPosts();
  }, []); // نشتغل مرة واحدة لما الكومبوننت يشتغل أول مرة

  if (loading) return <p>جاري التحميل...</p>;
  if (error) return <p>{error}</p>;

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <strong>{post.title}</strong>
        </li>
      ))}
    </ul>
  );
}

export default PostsList;
JavaScript

في هذا المثال استخدمنا:

  • axios.get(url, { params, timeout })
  • response.data مباشرة.
  • إدارة:
    • loading
    • error
    • data
7️⃣ ملخص سريع لطريقة التفكير في axios.get
  1. ابداء بأبسط شكل: const res = await axios.get('/api/users'); console.log(res.data);
  2. لما تحتاج:
    • فلترة / Pagination → استخدم params.
    • توكين / هيدر خاص → استخدم headers.
    • مهلة زمنية → استخدم timeout.
    • ملف / نوع مختلف من الرد → استخدم responseType.
  3. دايم ركّز على:
    • response.data للنجاح.
    • error.response للأخطاء من السيرفر.

✅ الطريقة الصحيحة (الأبسط)

ما تحتاج thenين أصلاً، خليك في واحد:

const getPosts = () => {
  axios
    .get("https://jsonplaceholder.typicode.com/posts")
    .then(res => {
      console.log(res.data);
      setPosts(res.data);
    })
    .catch(err => {
      console.error(err);
    });
};
JavaScript

هنا:

  • res يجي من axios.get.
  • تطبع البيانات.
  • بعدها مباشرة تحفظها في الـ state.
✅ لو فعلاً حاب تستخدم then مرتين (للتعلّم)

تقدر تكتبها هكذا:

const getPosts = () => {
  axios
    .get("https://jsonplaceholder.typicode.com/posts")
    .then(res => {
      console.log(res.data);
      return res.data; // مهم جداً
    })
    .then(data => {
      setPosts(data);
    })
    .catch(err => {
      console.error(err);
    });
};
JavaScript

الفرق:

  • أول then يرجّع res.data.
  • ثاني then يستقبلها في data.
🔥 نصيحة سريعة

مع React و axios، غالبًا هتكتبها كذا:

const getPosts = async () => {
  try {
    const res = await axios.get("https://jsonplaceholder.typicode.com/posts");
    console.log(res.data);
    setPosts(res.data);
  } catch (err) {
    console.error(err);
  }
};
JavaScript

أوضح وأسهل للقراءة من تداخل then.

مثال كامل:

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

function Posts() {
    const [posts, setPosts] = useState([]);
    const [err, setErr] = useState([]);

    // const getData = ()=> {
    //  axios.get("http://localhost:8000/posts")
    //     .then(res => {
    //         const {data , status} = res;
    //         console.log(data)
    //     });
    // }

    const getData = async () => {
        try {
            const { data, status } = await axios.get("http://localhost:8000/posts")
            // console.log(data, status)
            setPosts(data);
        } catch (err) {
            // console.log(err.message)
            setErr(err.message)
        }
    }

    const deletePost =async (id)=> {
      const res = await axios.delete(`http://localhost:8000/posts/${id}`);
      setPosts(prev => prev.filter(post => post.id !== id));

       console.log(res)
    }

    useEffect(() => {
        getData();
    }, []);

    return (
        <div>
           <h1>All Posts</h1>
           {
            posts.length ? posts.map((post)=> (
                <>
                    <p className="btn btn-danger">{post.id}</p>
                    <div className="">
                        <button onClick={()=> deletePost(post.id)} className="btn btn-danger">Delete</button>
                        
                    </div>
                    <h2>{post.title}</h2>
                    <p>{post.body}</p>
                </>
            )) : <h4 className="alert alert-danger">{err}</h4>
           }
        </div>
    )
}

export default Posts
JavaScript