الجزء السادس عشر – ما هي Fetch API؟ – سلسلة FSWD – JS

ahmedمنذ 4 أسابيع

0 123 6 دقائق

🟡 ما هي Fetch API؟

Fetch API هي طريقة جديدة ومتقدمة لإجراء الطلبات غير المتزامنة (asynchronous requests) في JavaScript. Fetch API بيسهل علينا إرسال طلبات HTTP (مثل GET و POST) واستقبال البيانات من السيرفر بطريقة منظمة ومرنة باستخدام Promises.

🟡 طلب بيانات من سيرفر باستخدام Fetch

في البداية، Fetch API بتُستخدم لإجراء طلبات إلى السيرفرات باستخدام fetch()، اللي بتستقبل عنوان URL وترجع Promise.

✅ تركيب الدالة `fetch`

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

url: عنوان السيرفر أو الـ API اللي هنرسل إليه الطلب.
options: اختيارية، بتتضمن طريقة الطلب مثل GET أو POST، ورؤوس الطلب (headers)، ومحتوى الجسم (body) إذا كنت عاوز تبعت بيانات.

🟡 مثال على طلب بيانات باستخدام `GET`

✅ طلب بيانات من سيرفر باستخدام Fetch:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();  // تحويل الاستجابة إلى JSON
  })
  .then(data => {
    console.log('Fetched data:', data);  // طباعة البيانات المستلمة
  })
  .catch(error => {
    console.error('Error fetching data:', error);  // التعامل مع الأخطاء
  });

الشرح:

أول حاجة بنعمل طلب باستخدام fetch مع عنوان URL.
بعد كده بنستخدم response.json() لتحويل الاستجابة إلى JSON.
إذا حصل أي خطأ، زي مثلاً مشكلة في الاتصال، بنعالجها في دالة catch.

✅ النتيجة المتوقعة:

ستحصل على مجموعة من المشاركات من API jsonplaceholder.

🟡 إرسال بيانات باستخدام `POST` مع Fetch

الـ POST Request يُستخدم لإرسال بيانات إلى السيرفر، مثلاً لإضافة بيانات جديدة.

✅ مثال على إرسال بيانات باستخدام `POST`

const data = {
  title: 'New Post',
  body: 'This is a new post.',
  userId: 1
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)  // تحويل الكائن إلى JSON
})
  .then(response => response.json())  // تحويل الاستجابة إلى JSON
  .then(data => {
    console.log('Response data:', data);  // طباعة البيانات المستلمة
  })
  .catch(error => {
    console.error('Error sending data:', error);  // التعامل مع الأخطاء
  });

الشرح:

نُرسل بيانات في الجسم (body) باستخدام JSON.stringify().
نحدد Content-Type: application/json في headers علشان نعلم السيرفر إن البيانات اللي بنبعتها هي بيانات JSON.
لو الطلب نجح، السيرفر بيرجع لنا بيانات جديدة (زي مشاركة تم إنشاؤها).

🟡 معالجة الأخطاء في Fetch

في Fetch API، الأخطاء مش بتظهر بشكل تلقائي إذا في مشكلة في الشبكة أو السيرفر. لازم نستخدم response.ok علشان نتحقق إذا كان الطلب ناجح ولا لأ.

✅ مثال على معالجة الأخطاء

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Fetched data:', data);
  })
  .catch(error => {
    console.error('There was an error:', error);  // هنا بنتعامل مع الأخطاء
  });

✅ التفسير:

response.ok هي خاصية بترجع true لو كان رمز الاستجابة 2xx (يعني الطلب ناجح).
لو كان في مشكلة، هنرسل خطأ باستخدام throw new Error().

🟡 التعامل مع بيانات غير متزامنة باستخدام Async/Await

async/await بيخلي الكود أكثر وضوحًا وقراءة عند التعامل مع العمليات غير المتزامنة زي fetch.

✅ مثال مع Async/Await

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log('Fetched data:', data);
  } catch (error) {
    console.error('There was an error:', error);
  }
}

fetchData();

الشرح:

استخدمنا async لتعريف الدالة كدالة غير متزامنة.
استخدمنا await قبل fetch علشان ننتظر النتيجة من السيرفر قبل ما نكمل.
استخدمنا try/catch علشان نتعامل مع الأخطاء بشكل مناسب.

🟡 مثال متكامل لطلب بيانات من سيرفر و معالجتها مع الأخطاء

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fetch API Example</title>
</head>
<body>
  <script>
    // 1. طلب بيانات من سيرفر باستخدام GET
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        console.log('Fetched data:', data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });

    // 2. إرسال بيانات إلى سيرفر باستخدام POST
    const data = {
      title: 'New Post',
      body: 'This is a new post.',
      userId: 1
    };

    fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    })
      .then(response => response.json())
      .then(data => {
        console.log('Response data:', data);
      })
      .catch(error => {
        console.error('Error sending data:', error);
      });

    // 3. استخدام async/await مع Fetch
    async function fetchData() {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log('Fetched data using async/await:', data);
      } catch (error) {
        console.error('There was an error:', error);
      }
    }

    fetchData();
  </script>
</body>
</html>

✅ شرح الكود:

طلب بيانات باستخدام GET: طلبنا بيانات المشاركات باستخدام fetch.
إرسال بيانات باستخدام POST: استخدمنا fetch لإرسال بيانات جديدة للسيرفر.
استخدام async/await: بنستخدم async/await لتحسين الكود مع fetch بحيث يكون أسهل في القراءة والفهم.

🟡 ملخص النقاط:

Fetch API هي طريقة حديثة ومبسطه لإجراء الطلبات غير المتزامنة في JavaScript.
يمكننا استخدام fetch لإرسال واستقبال بيانات من السيرفر باستخدام GET و POST.
يجب دائمًا التحقق من response.ok للتأكد من أن الطلب تم بنجاح.
يمكن استخدام async/await لتحسين التعامل مع العمليات غير المتزامنة.

🟡 ما هي الـ Modules في JavaScript؟

في JavaScript، الـ Modules هي طريقة لتنظيم الكود وتقسيمه إلى أجزاء صغيرة (ملفات) بحيث نقدر نستخدم الكود في أماكن مختلفة دون الحاجة لتكراره. في ES6 (الإصدار السادس من JavaScript)، تم إدخال الـ Modules لتسهيل التعامل مع هذا النوع من التنظيم.

export تُستخدم لتصدير الكود من ملف معين.
import تُستخدم لاستيراد الكود في ملف آخر.

🟡 كيفية استخدام Modules في JavaScript؟

✅ تصدير الكود (Export)

بإمكاننا تصدير دوال، متغيرات أو كائنات من ملف معين باستخدام export. يمكننا تصدير الكود بطريقتين:

التصدير المسمى (Named Exports)
التصدير الافتراضي (Default Export)

🟢 1. التصدير المسمى (Named Export)

يتم تصدير عدة عناصر (دوال، متغيرات، إلخ) من الملف، ويمكنك استيراد كل عنصر باستخدام اسمه.

✅ مثال على Named Export:

file1.js (ملف يحتوي على الكود الذي نريد تصديره)

// تصدير متغير ودالة
export const greeting = "Hello, world!";
export function add(a, b) {
  return a + b;
}

file2.js (ملف يحتوي على الكود الذي سنستورد منه):

// استيراد المتغير والدالة باستخدام الأسماء
import { greeting, add } from './file1.js';

console.log(greeting); // "Hello, world!"
console.log(add(5, 3)); // 8

🟢 2. التصدير الافتراضي (Default Export)

يمكنك تصدير عنصر واحد كـ default. هذه الطريقة مخصصة لتصدير عنصر واحد فقط من الملف.

✅ مثال على Default Export:

file1.js

// تصدير كائن كـ default
const person = {
  name: "Ahmed",
  age: 25
};

export default person;

file2.js:

// استيراد الكائن المصدّر كـ default
import person from './file1.js';

console.log(person.name); // "Ahmed"
console.log(person.age);  // 25

🟢 3. التصدير المدمج (Export All)

إذا كنت ترغب في تصدير جميع العناصر من ملف معين، يمكنك استخدام export * لتصدير جميع المحتويات دفعة واحدة.

✅ مثال على تصدير مدمج:

file1.js:

export const greeting = "Hello, world!";
export function add(a, b) {
  return a + b;
}

file2.js:

// تصدير كل شيء دفعة واحدة من file1.js
export * from './file1.js';

file3.js:

// استيراد جميع المحتويات المصدرة
import * as utils from './file2.js';

console.log(utils.greeting); // "Hello, world!"
console.log(utils.add(2, 3)); // 5

🟡 كيفية استخدام import في JavaScript؟

باستخدام import، يمكنك استيراد الكود من ملف آخر. كما في المثالين السابقين، يمكننا استيراد عناصر محددة أو استيراد الكود بأكمله.

✅ استيراد المكونات بشكل محدد (Named Import)

file2.js:

import { greeting, add } from './file1.js';  // استيراد متغير ودالة

console.log(greeting); // "Hello, world!"
console.log(add(10, 5)); // 15

✅ استيراد الكود الافتراضي (Default Import)

file2.js

import person from './file1.js';  // استيراد الكائن المُصدّر كـ default

console.log(person.name);  // "Ahmed"
console.log(person.age);   // 25

✅ استيراد جميع المحتويات (Import All)

يمكنك استيراد جميع العناصر من ملف آخر باستخدام *:

file2.js:

import * as utils from './file1.js';  // استيراد كل شيء من file1.js

console.log(utils.greeting);  // "Hello, world!"
console.log(utils.add(3, 4)); // 7

🟡 أمثلة على تطبيقات مختلفة للـ Modules

✅ مثال 1: استخدام دوال وحسابات

math.js

// تصدير الدوال بشكل منفصل
export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

main.js:

// استيراد الدوال واستخدامها
import { add, multiply } from './math.js';

console.log(add(5, 3));  // 8
console.log(multiply(2, 4)); // 8

✅ مثال 2: تصدير الكائنات الافتراضية

user.js

const user = {
  name: "Ahmed",
  age: 25,
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

export default user;  // تصدير الكائن كـ default

main.js:

// استيراد الكائن المستخدم
import user from './user.js';

console.log(user.name); // "Ahmed"
user.greet();  // "Hello, my name is Ahmed."

✅ مثال 3: استخدام Modules في تطبيقات أكبر

لو عندك مشروع أكبر وعايز تقسيم الكود لأجزاء أصغر، يمكننا استخدام الـ modules في تنظيم الكود:

user.js

export const user = {
  name: "Ahmed",
  age: 25
};

product.js:

export const product = {
  id: 101,
  name: "Laptop"
};

main.js:

import { user } from './user.js';
import { product } from './product.js';

console.log(user.name); // "Ahmed"
console.log(product.name); // "Laptop"

🟡 ملاحظات مهمة عند استخدام Modules في JavaScript:

يجب استخدام <script type="module">: عند استخدام الـ Modules في JavaScript، يجب تحديد النوع module في العنصر <script>.

<script type="module" src="main.js"></script>

الاستيراد من ملفات خارجية: لا يمكنك استخدام import/export في ملفات JavaScript عادية (أي ملفات لا تحتوي على type="module").
توزيع الملفات: إذا كنت بتستخدم import/export، تأكد أن الملفات بتكون في نفس المجلد أو أنه عندك المسارات الصحيحة.
التصدير الافتراضي vs المسمى: يمكنك تصدير عنصر واحد فقط كـ default، بينما يمكن تصدير عدة عناصر باستخدام named exports.