121- دروس جافا سكربت – Web Fetch API

### مقدمة إلى Web Fetch API في JavaScript

تُعتبر Web Fetch API واحدة من أبرز وظائف لغة JavaScript الحديثة للتعامل مع الشبكة. تتيح لك هذه الواجهة البرمجية إجراء طلبات HTTP بطريقة ميسّرة وسهلة القراءة، مما يوفر بديلاً عصريًا ومرنًا لطرق XMLHttpRequest التقليدية. تُستخدم Fetch API لجلب الموارد من الشبكة، مثل استرداد البيانات من الخوادم أو إرسال البيانات إليها.

### كيفية استخدام Fetch API

تعمل Fetch API من خلال واجهة برمجية تعتمد على الوعود (Promises)، مما يجعلها سهلة الاستخدام والتكامل مع باقي أجزاء تطبيقات JavaScript الحديثة.

#### المثال الأساسي: جلب البيانات

للبدء باستخدام Fetch API، يمكنك استخدام الدالة `fetch()` التي تأخذ عنوان URL كمعامل وتُعيد وعدًا (Promise) يُحلّ إلى كائن Response.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('هناك خطأ:', error));

في هذا المثال، نقوم بإجراء طلب GET إلى URL محدد. عند الحصول على الاستجابة، نستخدم دالة `.json()` لتحليل البيانات من JSON [شركة برمجة مصرية] إلى كائن JavaScript.

#### إرسال البيانات: طلب POST

يمكنك أيضًا استخدام Fetch API لإرسال بيانات إلى الخادم باستخدام طرق HTTP مثل POST. إليك كيفية القيام بذلك:

const data = { name: 'John', age: 30 };

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then(response => response.json())
  .then(data => console.log('نجاح:', data))
  .catch(error => console.error('هناك خطأ:', error));

في هذا المثال، نرسل كائن JSON إلى الخادم. نحدد الطريقة في الإعدادات (method: ‘POST’) ونقوم بتحديد نوع المحتوى في الرؤوس. يتم تحويل الكائن `data` إلى سلسلة JSON باستخدام `JSON.stringify()`.

### التعامل مع الأخطاء

من المهم دائمًا التعامل مع الأخطاء عند استخدام Fetch API لضمان تجربة مستخدم سلسة. يمكن أن تحدث الأخطاء لأسباب متعددة، مثل فقدان الاتصال بالإنترنت أو استجابة الخادم بأخطاء.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('خطأ في الشبكة: ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('هناك خطأ:', error));

في هذا المثال، نتحقق من حالة الاستجابة باستخدام `response.ok`. إذا لم تكن ناجحة، نقوم بإلقاء خطأ يحتوي على رمز الحالة.

### الاستخدام المتقدم: خيارات إضافية

يمكن تخصيص الطلبات باستخدام Fetch API بشكل أكبر عبر خيارات إضافية مثل:

– **الإشعارات (CORS):** تحديد سياسة الإشعارات للتحكم في كيفية التعامل مع الموارد من أصول مختلفة.
– **التخزين المؤقت (Cache):** التحكم في سياسة التخزين المؤقت للطلبات.
– **إعادة التوجيه (Redirect):** تحديد كيفية التعامل مع عمليات إعادة التوجيه.

مثال:

fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors',
  cache: 'no-cache',
  redirect: 'follow',
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => [شركة برمجة مصرية]  console.error('هناك خطأ:', error));

### الخاتمة

تُعد Fetch API أداة قوية ومرنة للتعامل مع الشبكة في JavaScript، مما يجعل من السهل إجراء طلبات HTTP والتعامل مع الاستجابات بطرق حديثة ومبسطة. من خلال فهم الأساسيات والميزات المتقدمة، يمكنك بناء تطبيقات ويب فعّالة تعتمد على البيانات الخارجية بشكل سلس ومضمون.

مايو 28, 2025