در حال بارگذاری...

Fetch API و درخواست‌های HTTP

Fetch API و درخواست‌های HTTP از ابزارهای حیاتی در توسعه‌ی مدرن JavaScript هستند که امکان ارتباط کارآمد بین کلاینت و سرور را فراهم می‌کنند. می‌توان آن‌ها را مانند سیستم پستی در یک کتابخانه تصور کرد: شما یک نامه (Request) ارسال می‌کنید و پاسخی (Response) دریافت می‌کنید، به این ترتیب اطلاعات به‌صورت امن و سریع تبادل می‌شوند. در یک فروشگاه آنلاین (online shop)، Fetch API می‌تواند موجودی کالاها و قیمت‌ها را به‌صورت زنده نشان دهد؛ در سایت خبری (news website) مقالات تازه را بدون بارگذاری مجدد کل صفحه بارگذاری می‌کند؛ در وبلاگ شخصی (personal blog) آخرین پست‌ها را به‌صورت پویا نمایش می‌دهد؛ و در پورتال‌های دولتی (government portal) داده‌ها و اطلاعات خدمات را به‌روز نگه می‌دارد.
با تسلط بر Fetch API، توسعه‌دهندگان می‌توانند درخواست‌های GET، POST و دیگر روش‌های HTTP را ارسال کنند، پاسخ‌ها را پردازش کنند، داده‌های JSON را پارس کنند، عملیات‌های آسنکرون را با Promises یا async/await مدیریت کنند و خطاها و بهینه‌سازی عملکرد را به‌صورت حرفه‌ای انجام دهند. استفاده‌ی مؤثر از Fetch مشابه سازمان‌دهی یک کتابخانه است: دانستن محل دقیق هر کتاب، دسترسی سریع به آن و حفظ نظم کلی. خوانندگان این آموزش یاد می‌گیرند چگونه داده‌ها را بازیابی و نمایش دهند، آن‌ها را در DOM ادغام کنند، خطاها را مدیریت کنند و جریان داده‌ها را بهینه کنند تا وب‌اپلیکیشن‌های تعاملی و پرسرعت ایجاد شود.

مثال پایه

javascript
JAVASCRIPT Code 
// مثال پایه برای ارسال یک درخواست GET
fetch('[https://jsonplaceholder.typicode.com/posts/1](https://jsonplaceholder.typicode.com/posts/1)') // ارسال درخواست
.then(response => {
if (!response.ok) throw new Error('درخواست موفقیت‌آمیز نبود'); // بررسی وضعیت HTTP
return response.json(); // تبدیل پاسخ به JSON
})
.then(data => console.log(data)) // نمایش داده‌ها در کنسول
.catch(error => console.error('خطا رخ داد:', error)); // مدیریت خطاها

در این مثال پایه، ما با استفاده از fetch یک درخواست GET به یک API نمونه ارسال کردیم. تابع fetch یک Promise بازمی‌گرداند که نشان‌دهنده‌ی یک عملیات آسنکرون است. در اولین then، با بررسی response.ok مطمئن می‌شویم که درخواست HTTP موفق بوده است؛ در غیر این صورت یک خطا (Error) ایجاد می‌کنیم. سپس با response.json() پاسخ را به یک شیء JavaScript تبدیل می‌کنیم تا بتوانیم به‌راحتی داده‌ها را پردازش کنیم.
در دومین then، داده‌های پارس شده در کنسول نمایش داده می‌شوند؛ مشابه باز کردن یک نامه و خواندن محتویات آن. catch تمامی خطاهایی که در طول زنجیره رخ می‌دهند، مانند مشکلات شبکه یا پاسخ‌های غیرمنتظره‌ی سرور، مدیریت می‌کند. این ساختار از کرش کردن اپلیکیشن جلوگیری می‌کند. برای مبتدیان، ممکن است سؤال پیش بیاید که چرا ابتدا response.ok را بررسی می‌کنیم: fetch حتی در صورت دریافت کدهای خطا مانند 404 یا 500، درخواست را تکمیل شده در نظر می‌گیرد؛ بنابراین بررسی موفقیت پاسخ ضروری است.

مثال کاربردی

javascript
JAVASCRIPT Code 
// نمایش آخرین پست‌های یک وبلاگ به‌صورت پویا
const blogContainer = document.getElementById('blog-posts');
fetch('[https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)')
.then(response => {
if (!response.ok) throw new Error('بارگذاری پست‌ها ناموفق بود');
return response.json();
})
.then(posts => {
posts.slice(0,5).forEach(post => { // نمایش ۵ پست اول
const article = document.createElement('div');
article.innerHTML = `<h3>${post.title}</h3><p>${post.body}</p>`;
blogContainer.appendChild(article); // افزودن پست به کانتینر
});
})
.catch(error => blogContainer.innerHTML = `<p>${error.message}</p>`);

در این مثال کاربردی، با Fetch API فهرستی از پست‌های وبلاگ بازیابی و به‌صورت پویا در صفحه نمایش داده می‌شوند. ابتدا عنصر container با شناسه blog-posts انتخاب می‌شود. سپس یک درخواست GET ارسال شده، پاسخ با response.ok بررسی و به JSON تبدیل می‌شود. برای بهینه‌سازی عملکرد، از posts.slice(0,5) استفاده می‌کنیم تا تنها ۵ پست اول نمایش داده شود و بارگذاری DOM کاهش یابد.
برای هر پست، یک div ساخته و innerHTML آن با عنوان و محتوای پست پر می‌شود و به container اضافه می‌شود. catch تضمین می‌کند که خطاها در صفحه نمایش داده شوند و نه فقط در کنسول. این فرآیند مانند چیدمان یک اتاق است: آیتم‌های مهم را انتخاب کرده، در مکان مناسب قرار داده و نظم کلی را حفظ می‌کنیم. ترکیب Fetch API و دستکاری DOM امکان بارگذاری پویا و تعاملی محتوا را در فروشگاه‌های آنلاین، سایت‌های خبری، وبلاگ‌ها و پورتال‌های دولتی فراهم می‌کند.

بهترین روش‌ها و اشتباهات رایج:
Best Practices:

  1. استفاده از async/await برای کد آسنکرون خواناتر.
  2. همیشه پیش از پردازش داده‌ها، response.ok را بررسی کنید.
  3. برای داده‌های بزرگ از Pagination یا slice استفاده کنید تا عملکرد بهینه شود.

  4. خطاها را مدیریت کرده و بازخورد واضح به کاربر بدهید.
    Common Mistakes:

  5. نادیده گرفتن خطاها که منجر به کرش شدن اپلیکیشن می‌شود.

  6. بارگذاری تمام داده‌ها به‌صورت یکجا که باعث مشکلات حافظه و عملکرد می‌شود.
  7. استفاده از Headers یا content-type اشتباه یا ناقص.
  8. اتصال مستقیم fetch به به‌روزرسانی DOM که منجر به رندر مجدد غیرضروری می‌شود.
    Debugging Tips: از console.log برای بررسی جریان داده‌ها استفاده کنید، تب شبکه در مرورگر را کنترل کنید و ابتدا با مثال‌های کوچک شروع کنید.

📊 مرجع سریع

Property/Method Description Example
fetch(url, options) ارسال درخواست HTTP fetch('api/data')
response.json() تبدیل پاسخ به JSON response.json().then(data => console.log(data))
response.ok بررسی موفقیت درخواست if(response.ok){...}
catch(error) مدیریت خطاها fetch(...).catch(err => console.error(err))
async/await مدیریت کد آسنکرون const data = await fetch(url).then(r => r.json())

خلاصه و گام‌های بعدی:
این آموزش مباحث پایه و پیشرفته‌ی Fetch API و درخواست‌های HTTP را شامل شد: ارسال درخواست، پردازش پاسخ، تبدیل به JSON، مدیریت خطا و به‌روزرسانی پویا DOM. تسلط بر این مهارت‌ها امکان ایجاد وب‌اپلیکیشن‌های تعاملی، سریع و مطمئن را فراهم می‌کند.
گام‌های بعدی پیشنهادی: استفاده از Headers سفارشی، روش‌های HTTP پیشرفته (PUT، DELETE)، CORS و ادغام Fetch API در فریم‌ورک‌هایی مانند React یا Vue. تمرین مداوم در سایت‌های خبری، فروشگاه‌های آنلاین، وبلاگ‌ها یا پورتال‌های دولتی، درک عمیق‌تر و مهارت مدیریت جریان داده‌های پیچیده را به همراه دارد. آزمایش و دیباگ مداوم برای تسلط بر تکنیک‌های پیشرفته Fetch ضروری است.

🧠 دانش خود را بیازمایید

آماده شروع

آزمون دانش شما

درک خود از این موضوع را با سوالات کاربردی بسنجید.

❓
4
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 26 از 53
Javascript آموزش