آموزش ارتباط با سرور و ارسال درخواست‌های HTTP با Fetch API در جاوا اسکریپت: راهنمای جامع با مثال‌ها

در دنیای توسعه وب، تعامل با سرور و ارسال درخواست‌های HTTP برای دریافت یا ارسال داده‌ها امری ضروری است. یکی از ابزارهای ساده و مدرن جاوااسکریپت برای انجام این کار Fetch API است. در این مقاله، نحوه استفاده از Fetch API برای ارتباط با سرور و ارسال درخواست‌های HTTP را بررسی می‌کنیم. همچنین نکات بهینه‌سازی برای سئو بر اساس استانداردهای گوگل را مورد توجه قرار می‌دهیم.

Fetch API چیست؟

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

مزایای Fetch API:

• استفاده از Promises: از Promises برای مدیریت نتایج و خطاها استفاده می‌کند، که خوانایی کد را بهبود می‌بخشد.

• پشتیبانی از روش‌های مختلف HTTP: می‌توانید درخواست‌های GET، POST، PUT، DELETE و غیره را به راحتی ارسال کنید.

• مدیریت آسان داده‌های JSON: به‌طور بومی از JSON پشتیبانی می‌کند.

ارسال درخواست GET با Fetch API

روش GET رایج‌ترین نوع درخواست HTTP است و برای دریافت داده‌ها از سرور استفاده می‌شود.

مثال:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

در این کد:

• fetch() برای ارسال درخواست HTTP به آدرس مورد نظر استفاده می‌شود.

• در صورتی که پاسخ سرور موفقیت‌آمیز نباشد، خطا پرتاب می‌شود.

• response.json() داده‌های دریافتی را به فرمت JSON تبدیل می‌کند.

• در صورت بروز خطا، catch() برای مدیریت خطاها استفاده می‌شود.

ارسال درخواست POST با Fetch API

POST برای ارسال داده‌ها به سرور استفاده می‌شود، مثلاً برای ارسال فرم‌ها یا داده‌های جدید به API.

مثال:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'John Doe',
    age: 30
  }),
})
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

در این مثال:

• با استفاده از method: 'POST' نوع درخواست تعیین شده است.

• در قسمت headers نوع محتوای درخواست (application/json) مشخص شده است.

• داده‌ها در قالب JSON از طریق body ارسال می‌شوند.

• پاسخ سرور به JSON تبدیل شده و در کنسول نمایش داده می‌شود.

ارسال درخواست با متدهای دیگر (PUT و DELETE)

PUT برای به‌روزرسانی داده‌ها و DELETE برای حذف داده‌ها استفاده می‌شوند.

مثال درخواست PUT:

fetch('https://api.example.com/data/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Jane Doe',
    age: 25
  }),
})
  .then(response => response.json())
  .then(data => {
    console.log('Data updated:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });
مثال درخواست DELETE:
javascript
Copy code
fetch('https://api.example.com/data/1', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Data deleted successfully');
    } else {
      console.error('Error deleting data');
    }
  })
  .catch((error) => {
    console.error('Error:', error);
  });

مدیریت خطاها در Fetch API

Fetch API به‌طور پیش‌فرض فقط خطاهای مربوط به شکست شبکه را مدیریت می‌کند. برای بررسی وضعیت‌های مختلف HTTP (مثل 404 یا 500)، باید از کد وضعیت (status) استفاده کنید.

مثال:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

در این کد، اگر پاسخ سرور موفقیت‌آمیز نباشد، خطایی با وضعیت HTTP مربوطه ایجاد می‌شود و در کنسول نمایش داده می‌شود.

نکات مهم برای بهینه‌سازی Fetch API

• استفاده از async/await: برای خوانایی بهتر و مدیریت راحت‌تر درخواست‌ها، از async/await استفاده کنید.

مثال:

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchData();

• مدیریت CORS: هنگام ارتباط با سرورهای دیگر ممکن است با مشکل CORS مواجه شوید. در این حالت سرور باید تنظیمات دسترسی CORS را صحیح پیکربندی کند.

• مدیریت Timeout: Fetch API به‌طور پیش‌فرض تایم‌اوت ندارد. برای تعیین زمان انتظار می‌توانید از روش‌های اضافی استفاده کنید.

مثال:

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

fetch('https://api.example.com/data', { signal: controller.signal })
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Request timed out');
    } else {
      console.error('Fetch error:', error);
    }
  });

سازگاری مرورگر: Fetch API توسط بیشتر مرورگرهای مدرن پشتیبانی می‌شود. برای مرورگرهای قدیمی‌تر، ممکن است نیاز به استفاده از polyfill داشته باشید.

نتیجه‌گیری

استفاده از Fetch API در جاوااسکریپت یک روش قدرتمند و مدرن برای برقراری ارتباط با سرور و ارسال درخواست‌های HTTP است. با استفاده از این API می‌توانید درخواست‌های GET، POST، PUT و DELETE را به راحتی ارسال کنید و از Promiseها برای مدیریت نتایج و خطاها بهره ببرید. همچنین استفاده از async/await به شما کمک می‌کند تا کدهای خود را بهینه و خواناتر کنید.