آموزش جامع Fetch API در جاوااسکریپت

🎯 اهداف یادگیری

• درک مفهوم Fetch API و کاربردهای آن
• یادگیری نحوه ارسال درخواست‌های GET و POST
• مدیریت پاسخ‌های سرور و خطاها
• کار با JSON و فرم‌ها در Fetch API

📌 Fetch API چیست؟

Fetch API یک رابط مدرن و قدرتمند در جاوااسکریپت برای انجام درخواست‌های HTTP است که جایگزین روش قدیمی XMLHttpRequest شده است:

// ساده‌ترین مثال استفاده از Fetch API
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('خطا:', error));

مزایای Fetch API:

• سینتکس ساده و خوانا: بر پایه Promiseها و بسیار تمیزتر از XMLHttpRequest
• پشتیبانی از استانداردهای جدید: مانند CORS، Streams و Service Workers
• انعطاف‌پذیری بالا: امکان تنظیم هدرها، متدها و سایر جزئیات درخواست

📌 درخواست GET با Fetch

برای دریافت داده از سرور از متد GET استفاده می‌کنیم:

// دریافت داده از یک API عمومی
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error(`خطای HTTP: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

نکات مهم درخواست GET:

• بررسی وضعیت پاسخ: همیشه response.ok را بررسی کنید
• تبدیل پاسخ: برای JSON از .json()، برای متن از .text() استفاده کنید
• مدیریت خطا: خطاهای شبکه و HTTP را مدیریت کنید

📌 درخواست POST با Fetch

برای ارسال داده به سرور از متد POST استفاده می‌کنیم:

// ارسال داده به سرور با متد POST
const newPost = {
  title: 'عنوان پست جدید',
  body: 'متن پست جدید...',
  userId: 1
};
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(newPost),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

نکات مهم درخواست POST:

• تنظیم method: حتما متد را به 'POST' تنظیم کنید
• تنظیم هدرها: Content-Type را برای JSON تنظیم کنید
• تبدیل داده: آبجکت را با JSON.stringify به رشته تبدیل کنید
• مدیریت پاسخ: مانند GET پاسخ را مدیریت کنید

📌 مدیریت خطا در Fetch

در Fetch API باید دو نوع خطا را مدیریت کنید:

// مدیریت جامع خطاها در Fetch
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`خطای HTTP: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => {
    if (error.message.includes('Failed to fetch')) {
      console.error('خطای شبکه: اتصال به سرور ممکن نیست');
    } else {
      console.error('خطا:', error.message);
    }
  });

انواع خطاها:

• خطاهای شبکه: وقتی ارتباط با سرور قطع است
• خطاهای HTTP: وقتی سرور پاسخ غیرموفق (مثل 404 یا 500) می‌دهد
• خطاهای پردازش پاسخ: مثلا وقتی JSON نامعتبر است

📌 کار با Async/Await و Fetch

برای خوانایی بیشتر می‌توانیم از Async/Await با Fetch استفاده کنیم:

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      throw new Error('کاربر یافت نشد');
    }
    const user = await response.json();
    console.log(user);
    return user;
  } catch (error) {
    console.error('خطا در دریافت داده کاربر:', error.message);
    throw error; // برای مدیریت در سطح بالاتر
  }
}

مزایای استفاده از Async/Await:

• خوانایی بیشتر: کد شبیه برنامه‌نویسی همزمان می‌شود
• مدیریت خطا آسان‌تر: با try/catch قابل مدیریت است
• جریان کنترل واضح: ترتیب اجرا واضح و خطی است

📌 تمرین عملی

تابع زیر را تکمیل کنید تا با استفاده از Fetch API اطلاعات آب و هوا را از یک API عمومی دریافت کند:

async function getWeather(city) {
  // این تابع باید اطلاعات آب و هوای شهر مورد نظر را دریافت کند
  // از API OpenWeatherMap یا API مشابه استفاده کنید
  // خطاها را به درستی مدیریت کنید
  // نتیجه را به صورت یک آبجکت برگردانید
}

راهنمای تمرین:

1. از API رایگان مانند OpenWeatherMap استفاده کنید (نیاز به ثبت‌نام دارد)
2. شهر مورد نظر را به عنوان پارامتر دریافت کنید
3. درخواست GET به API ارسال کنید
4. پاسخ را به JSON تبدیل کنید
5. خطاهای شبکه و HTTP را مدیریت کنید
6. داده‌های مربوطه (دما، وضعیت هوا و...) را برگردانید

📌 قدم بعدی

در درس بعدی با ماژول‌ها در جاوااسکریپت آشنا خواهیم شد!