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

تابع fetch چیست؟

تابع fetch یکی از توابع اصلی جاوا اسکریپت برای ارسال درخواست‌های HTTP است. این تابع به توسعه‌دهندگان اجازه می‌دهد تا درخواست‌های GET، POST، PUT و DELETE را به سرور ارسال کنند. استفاده از تابع fetch بسیار ساده و قابل فهم است و با پشتیبانی از Promise‌ها، کدنویسی بهینه و قابل خوانایی را فراهم می‌کند. برای مثال، فرض کنید می‌خواهید داده‌هایی را از یک API دریافت کنید. با استفاده از fetch، کد شما می‌تواند به شکل زیر باشد:

javascript

Copy code

fetch('https://api.example.com/data')

  .then(response => response.json())

  .then(data => console.log(data))

  .catch(error => console.error('Error:', error));

همانطور که مشاهده می‌کنید، استفاده از fetch باعث می‌شود تا درخواست HTTP به شکل بسیار ساده و قابل فهم ارسال شود. Promise‌ها به مدیریت بهتر خطاها کمک می‌کنند و کد را خواناتر می‌کنند. برای یادگیری اصول برنامه‌نویسی و کار با API‌ها، می‌توانید از آموزش زبان اسکرچ کدنا شروع کنید که مفاهیم اولیه را به شکل ساده و تعاملی آموزش می‌دهد.

به نقل از سایت آکادمی آی تی:

Fetch یک رابط مدرن است که به شما امکان می دهد؛ درخواست های HTTP را از مرورگرهای وب به سرورها ارسال کنید.

اگر با شیء XMLHttpRequest (XHR) کار کرده اید، Fetch API می تواند تمام وظایف را مانند شیء XHR انجام دهد

Promise در درخواست Fetch API 

Promise یکی از ویژگی‌های مهم جاوا اسکریپت است که به توسعه‌دهندگان اجازه می‌دهد تا با عملیات غیرهمزمان به صورت ساده‌تر کار کنند. در Fetch API، درخواست‌های ارسال شده به سرور از نوع Promise هستند. این بدین معناست که درخواست ارسال شده به سرور یک Promise را برمی‌گرداند که ممکن است در آینده کامل شود. این ویژگی به توسعه‌دهندگان این امکان را می‌دهد تا به صورت همزمان با کدهای دیگر کار کنند و نیازی به انتظار برای پاسخ سرور نداشته باشند.

Promise‌ها دارای سه وضعیت اصلی هستند:

• Pending (در حال انتظار): هنگامی که Promise تازه ایجاد شده و هنوز کامل نشده است.
• Fulfilled (کامل شده): هنگامی که عملیات با موفقیت انجام شده و نتیجه برگردانده شده است.
• Rejected (رد شده): هنگامی که عملیات با شکست مواجه شده و دلیل شکست برگردانده شده است.

برای مثال، در کد زیر، Promise‌ای که توسط fetch برگردانده می‌شود، ممکن است در نهایت به یکی از دو وضعیت Fulfilled یا Rejected تغییر وضعیت دهد:

javascript

Copy code

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 your fetch operation:', error));

پاسخ Promise در Fetch API

پاسخ Promise در Fetch API دارای دو حالت اصلی است: fulfilled (موفقیت‌آمیز) و rejected (ناموفق). در صورتی که درخواست با موفقیت انجام شود، Promise به حالت fulfilled تغییر می‌کند و پاسخ سرور را بازمی‌گرداند. اما اگر درخواست با خطا مواجه شود یا موفقیت‌آمیز نباشد، Promise به حالت rejected تغییر می‌کند و دلیل خطا ارائه می‌شود. این امکان مدیریت درست داده‌ها و خطاها را برای توسعه‌دهندگان فراهم می‌کند. برای کسب مهارت‌های بیشتر در این زمینه، می‌توانید از دوره‌های آموزش پایتون و آموزش ccna استفاده کنید تا با مفاهیم برنامه‌نویسی و شبکه بهتر آشنا شوید.

خواص و روش‌های شی پاسخ

شیء Response که توسط Fetch API برگردانده می‌شود، دارای خواص و روش‌های مختلفی است که به توسعه‌دهندگان اجازه می‌دهد تا به راحتی با پاسخ سرور کار کنند. برخی از این خواص و روش‌ها عبارتند از:

• status: وضعیت HTTP پاسخ (مثلاً 200 برای موفقیت، 404 برای یافت نشدن)
• statusText: متن وضعیت HTTP (مثلاً "OK" برای 200)
• headers: هدرهای پاسخ که شامل اطلاعاتی مانند نوع محتوا، طول محتوا و سایر متا دیتاها است
• json(): تبدیل پاسخ به فرمت JSON
• text(): تبدیل پاسخ به متن
• blob(): تبدیل پاسخ به یک Blob برای کار با داده‌های باینری
• clone(): ایجاد یک کپی از پاسخ برای استفاده مجدد

به عنوان مثال، اگر بخواهید پاسخ یک درخواست را به فرمت JSON تبدیل کنید و داده‌ها را در کنسول چاپ کنید، می‌توانید از روش json() استفاده کنید:

javascript

Copy code

fetch('https://api.example.com/data')

  .then(response => response.json())

  .then(data => console.log(data))

  .catch(error => console.error('Error:', error));

چه زمانی درخواست Fetch API رد می‌شود؟

درخواست Fetch API ممکن است در شرایط مختلفی رد شود. برخی از این شرایط عبارتند از:

• قطع ارتباط با سرور: در صورتی که ارتباط با سرور قطع شود.
• پایان زمان انتظار: اگر مدت زمان انتظار برای پاسخ به پایان برسد.
• خطاهای شبکه: مانند خطای DNS یا خطای HTTP.
• مشکلات سرور: مانند خطاهای 500 که نشان دهنده مشکلات سرور است.

در صورتی که درخواست رد شود، می‌توانید با استفاده از متد catch به مدیریت خطاها بپردازید:

javascript

Copy code

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 your fetch operation:', error));

نحوه‌ی استفاده از Fetch API

برای استفاده از Fetch API، می‌توان به سادگی تابع fetch را فراخوانی کرد و درخواست مورد نظر را ارسال کرد. به عنوان مثال:

javascript

Copy code

fetch('https://example.com/api/data')

  .then(response => response.json())

  .then(data => console.log(data))

  .catch(error => console.error('Error:', error));

این کد یک درخواست GET به URL مشخص شده ارسال می‌کند و پاسخ را به فرمت JSON تبدیل می‌کند. در صورت موفقیت، داده‌ها در کنسول چاپ می‌شوند و در صورت خطا، پیام خطا در کنسول نمایش داده می‌شود.

همچنین می‌توانید از روش‌های مختلف HTTP مانند POST، PUT و DELETE نیز استفاده کنید. برای مثال، برای ارسال داده‌ها به سرور با استفاده از روش POST، می‌توانید به شکل زیر عمل کنید:

javascript

Copy code

fetch('https://example.com/api/data', {

  method: 'POST',

  headers: {

    'Content-Type': 'application/json'

  },

  body: JSON.stringify({

    name: 'John Doe',

    email: 'john.doe@example.com'

  })

})

  .then(response => response.json())

  .then(data => console.log(data))

  .catch(error => console.error('Error:', error));

Fetch API چگونه کار می‌کند؟

Fetch API با ارسال درخواست‌های HTTP به سرور و دریافت پاسخ‌ها کار می‌کند. این API از Promise‌ها برای مدیریت درخواست‌ها و پاسخ‌ها استفاده می‌کند که به توسعه‌دهندگان اجازه می‌دهد تا کدهای غیرهمزمان را به صورت ساده‌تر و قابل فهم‌تر بنویسند.

هنگامی که یک درخواست ارسال می‌شود، Fetch API به صورت غیرهمزمان عمل می‌کند، به این معنی که کدهای دیگر به اجرای خود ادامه می‌دهند و منتظر پاسخ سرور نمی‌مانند. پس از دریافت پاسخ، Promise مربوطه به یکی از وضعیت‌های fulfilled یا rejected تغییر می‌کند و نتیجه یا خطا را برمی‌گرداند.

برای مثال، در یک برنامه وب که نیاز به دریافت داده‌ها از سرور دارد، می‌توان از Fetch API به عنوان یک راهکار کارآمد و ساده استفاده کرد. به عنوان مثال، در یک برنامه نمایش وضعیت آب و هوا، می‌توانید از Fetch API برای دریافت داده‌های آب و هوا از یک سرویس API استفاده کنید و این داده‌ها را به کاربران نمایش دهید.

تاریخچه Fetch API و AJAX

Fetch API به عنوان جایگزینی برای تکنولوژی قدیمی‌تر AJAX معرفی شد. AJAX (Asynchronous JavaScript and XML) یکی از تکنیک‌های پرکاربرد برای ارسال درخواست‌های HTTP بود، اما با معرفی Fetch API، توسعه‌دهندگان به یک راه ساده‌تر و کارآمدتر دست یافتند.

AJAX با استفاده از شیء XMLHttpRequest کار می‌کرد که مدیریت وضعیت‌ها و رویدادها در آن پیچیده‌تر بود. Fetch API با استفاده از Promise‌ها و ساختار ساده‌تر، کدنویسی را بهبود بخشید و کار با درخواست‌های HTTP را آسان‌تر کرد.

چگونه از Fetch API استفاده کنیم؟

برای استفاده از Fetch API، کافیست تابع fetch را فراخوانی کنید و درخواست خود را ارسال کنید. می‌توانید از متدهای مختلف مانند GET، POST، PUT و DELETE برای ارسال درخواست‌ها استفاده کنید و پاسخ‌های سرور را مدیریت کنید.

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

javascript

Copy code

fetch('https://api.example.com/user/1')

  .then(response => response.json())

  .then(user => {

    console.log(`User Name: ${user.name}`);

    console.log(`User Email: ${user.email}`);

  })

  .catch(error => console.error('Error:', error));

این کد یک درخواست GET به URL مشخص شده ارسال می‌کند و پاسخ را به فرمت JSON تبدیل می‌کند. در صورت موفقیت، داده‌های کاربر در کنسول چاپ می‌شوند و در صورت خطا، پیام خطا در کنسول نمایش داده می‌شود.

تفاوت XMLHttpRequest با Fetch API چیست؟

تفاوت اصلی بین XMLHttpRequest و Fetch API در سادگی و قابل فهم بودن Fetch API است. Fetch API از Promise‌ها برای مدیریت درخواست‌ها استفاده می‌کند که کدنویسی را ساده‌تر و خوانا‌تر می‌کند، در حالی که XMLHttpRequest نیاز به مدیریت دستی وضعیت‌ها و رویدادها دارد.

برخی از تفاوت‌های کلیدی عبارتند از:

• ساختار و سادگی کد: کدهای Fetch API ساده‌تر و قابل فهم‌تر هستند.
• مدیریت غیرهمزمانی: Fetch API از Promise‌ها برای مدیریت غیرهمزمانی استفاده می‌کند که کار با درخواست‌ها را ساده‌تر می‌کند.
• پشتیبانی از انواع مختلف پاسخ: Fetch API به راحتی می‌تواند پاسخ‌ها را به فرمت‌های مختلفی مانند JSON، متن و Blob تبدیل کند.
• عدم نیاز به پیکربندی خاص: برخلاف XMLHttpRequest، Fetch API نیازی به پیکربندی خاص برای مدیریت هدرها و درخواست‌ها ندارد.

انواع پاسخ (Response)

پاسخ‌های دریافتی از سرور می‌توانند به انواع مختلفی باشند، از جمله:

• متن (Text): پاسخ به صورت متن ساده که می‌تواند توسط روش text() دریافت شود.
• JSON: پاسخ به صورت JSON که می‌تواند توسط روش json() دریافت شود.
• Blob: پاسخ به صورت باینری که می‌تواند توسط روش blob() دریافت شود.
• FormData: پاسخ به صورت فرم داده که می‌تواند توسط روش formData() دریافت شود.
• ArrayBuffer: پاسخ به صورت آرایه بایت که می‌تواند توسط روش arrayBuffer() دریافت شود.

هر یک از این انواع پاسخ‌ها برای کاربردهای خاصی مناسب هستند. برای مثال، اگر نیاز به دریافت و پردازش داده‌های باینری دارید، می‌توانید از روش blob() استفاده کنید. اگر نیاز به دریافت داده‌های متنی یا JSON دارید، می‌توانید از روش‌های text() و json() استفاده کنید. برای یادگیری بیشتر و تسلط بر تکنولوژی‌های مختلف مانند دوره آموزش هک، آموزش جامع شبکه، آموزش لینوکس، و آموزش فلسک، می‌توانید از دوره‌های آموزشی کدنا استفاده کنید.

در زیر، یک جدول برای مقایسه Fetch API و XMLHttpRequest آورده شده است:

ویژگی‌ها	Fetch API	XMLHttpRequest
سادگی کدنویسی	بله	خیر
پشتیبانی از Promise	بله	خیر
پشتیبانی مرورگرها	مرورگرهای جدید	اکثر مرورگرها
ارسال کوکی‌ها	به صورت دستی	پیش‌فرض
عملکرد	بهتر	خوب

مزایای استفاده از Fetch API    

برخی از مزایای استفاده از Fetch API عبارتند از:

• سادگی و خوانایی کد: استفاده از Promise‌ها کدنویسی را ساده‌تر و قابل فهم‌تر می‌کند.
• پشتیبانی از انواع مختلف درخواست‌ها: می‌توان از انواع مختلف درخواست‌های HTTP استفاده کرد.
• بهینه‌سازی و عملکرد بهتر: Fetch API بهینه‌تر و عملکرد بهتری نسبت به XMLHttpRequest دارد.
• انعطاف‌پذیری بیشتر: Fetch API انعطاف‌پذیری بیشتری در مدیریت درخواست‌ها و پاسخ‌ها فراهم می‌کند.
• مدیریت بهتر خطاها: با استفاده از Promise‌ها، مدیریت خطاها به شکل ساده‌تر و موثرتری انجام می‌شود.
• پشتیبانی از جریان‌های داده (Streams): Fetch API از جریان‌های داده پشتیبانی می‌کند که امکان پردازش داده‌ها به صورت جریانی را فراهم می‌کند.

معایب استفاده از Fetch API

با وجود مزایای فراوان، Fetch API معایبی نیز دارد:

• پشتیبانی محدود در مرورگرهای قدیمی: برخی از مرورگرهای قدیمی از Fetch API پشتیبانی نمی‌کنند.
• عدم پشتیبانی از پیش‌فرض ارسال کوکی‌ها: باید به صورت دستی تنظیمات ارسال کوکی‌ها را مدیریت کرد.
• عدم پشتیبانی از تایم‌اوت: برخلاف XMLHttpRequest، Fetch API به صورت پیش‌فرض از تایم‌اوت برای درخواست‌ها پشتیبانی نمی‌کند.
• پیچیدگی در مدیریت درخواست‌های پیچیده: در برخی موارد، مدیریت درخواست‌های پیچیده ممکن است نیاز به کدنویسی بیشتری داشته باشد.

جمع بندی: چرا Fetch API بهترین انتخاب برای توسعه‌دهندگان وب است؟

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

سوالات متداول Fetch چیست؟

Fetch API چیست؟

 Fetch API یک تکنولوژی مدرن برای ارسال درخواست‌های HTTP و دریافت پاسخ‌ها از سرور است که از Promise‌ها برای مدیریت درخواست‌ها استفاده می‌کند.

چگونه می‌توان از Fetch API استفاده کرد؟

برای استفاده از Fetch API، کافیست تابع fetch را فراخوانی کنید و درخواست مورد نظر خود را ارسال کنید.

تفاوت بین Fetch API و XMLHttpRequest چیست؟

 تفاوت اصلی در سادگی و قابل فهم بودن Fetch API است. Fetch API از Promise‌ها استفاده می‌کند، در حالی که XMLHttpRequest نیاز به مدیریت دستی وضعیت‌ها دارد.

مزایای استفاده از Fetch API چیست؟

مزایای Fetch API شامل سادگی کدنویسی، پشتیبانی از انواع درخواست‌های HTTP و بهینه‌سازی و عملکرد بهتر است.

معایب استفاده از Fetch API چیست؟

معایب Fetch API شامل پشتیبانی محدود در مرورگرهای قدیمی و عدم پشتیبانی پیش‌فرض از ارسال کوکی‌ها است.

آیا Fetch API از تمامی مرورگرها پشتیبانی می‌کند؟

 خیر، برخی از مرورگرهای قدیمی از Fetch API پشتیبانی نمی‌کنند، اما بیشتر مرورگرهای مدرن این تکنولوژی را پشتیبانی می‌کنند.

آیا می‌توان با Fetch API درخواست‌های POST ارسال کرد؟

بله، می‌توانید با استفاده از Fetch API درخواست‌های POST، PUT و DELETE نیز ارسال کنید.