مالفرق بين الطريقتين لجلب البيانات API

Zen Eddin Allaham · 14 يوليو

ما الفرق بين الطريقتين

  useEffect(() => {
    fetch('api')
    .then((res) => res.json())
    .then((data) => setCategrouApi(data))
  },[])

  const fetchApi = async () => {
    try{
    const res = await fetch('api')
    const data = res.json();
    console.log(data)
    }catch(e){
      console.log(e)
    }
  }

  const fetchApi = async () => {
    try{
    const res = await fetch('api')
    const data = res.json();
    console.log(data)
    }catch(e){
      console.log(e)
    }
  }

Mustafa Suleiman · 14 يوليو

كلاهما يؤديان نفس الغرض، لكن من خلال خطاف useEffect فستعمل دالة fetch تلقائيًا عند تحميل المكون بسبب مصفوفة الإعتماديات الفارغة [] بالتالي سيتم جلب البيانات في البداية في حال ذلك كان مطلوب، لكن يتم استخدام then وهي طريقة قديمة، الأفضل async-await وأيضًا لا يتم معالجة الأخطاء من خلال try-catch

أما دالة async/await فهي مستقلة ولا تعمل إلا عند استدعائها بنفسك مثلاً عند النقر على زر، وتتبع النهج الحديث في التعامل مع العمليات الغير متزامنة وتعتمد على try-catch.

وللعلم هناك خطأ في الكود حيث هنا const data = res.json() فـ res.json() هي عملية غير متزامنة وتعيد Promise، يجب أن تنتظرها باستخدام await لتضمن الحصول على البيانات الفعلية وليس الـ Promise نفسه.

والحل الأفضل هو الجمع بين الطريقتين كالتالي:

const fetchCategories = async () => {
  try {
    const res = await fetch('api/categories');
    const data = await res.json(); 
    
    setCategories(data);
    return data;
  } catch (error) {
    console.error('خطأ في جلب التصنيفات:', error);
    setError(error.message);
    return null;
  } finally {
    setLoading(false);
  }
};

useEffect(() => {
  setLoading(true);
  fetchCategories();
}, []);

Zen Eddin Allaham · 14 يوليو

انا استخدمت الطريقة القديمة لجلب API هل ستعمل بشكل كامل ام استخدم الطريقة الحديثة async await

Mustafa Suleiman · 14 يوليو

كلاهما سيعمل، الأفضل استخدام async await ومعالجة الأخطاء من خلال try-catch

مالفرق بين الطريقتين لجلب البيانات API

السؤال

Zen Eddin Allaham

3 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

Zen Eddin Allaham

Mustafa Suleiman

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية