پست ‏AbortController در جاوااسکریپت ✌️

‏AbortController در جاوااسکریپت ✌️ یکی از بزرگترین فاکتورهایی که کمک می‌کنه یک برنامهٔ بهینه و سریع داشته باشیم، اینه که بدونیم چطوری یک عملیات Async رو توی برنامه شروع، و اون‌ رو به پایان برسونیم. در حالت عادی ما عملیات مد نظرمون رو شروع می‌کنیم و بعد از چند لحظه پاسخ عملیات بهمون برمی‌گرده. پس عملیات به طور خودکار به پایان میرسه و به طور کلی، شروع این عملیات به دست خودمونه، اما پایانش خیر! ‏AbortController چیه؟ 🤔 ‏AbortController یک قابلیته که اجازه میده خیلی راحت بتونیم یک یا چند عملیات Async رو در زمان لزوم متوقف کنیم. فرض کنید می‌خوایم اطلاعاتی روی سرور آپلود کنیم: (async function () { const res = await fetch('/upload', ... ); const data = await res.json(); return data; })(); گاهی اوقات می‌بینیم که آپلود بیش از حد معمول طول می‌کشه و می‌خوایم اون رو کنسل کنیم تا برای مثال، دکمه‌ای تحت عنوان «تلاش مجدد» نشون بدیم تا کاربر بیش از اندازه منتظر نمونه. fetch به تنهایی چنین قابلیتی رو نداره. اما برای حل این مسئله AbortController به کارمون میاد. برای اینکه بتونیم عملیات مد نظرمون رو کنترل کنیم، ابتدا باید با استفاده از AbortController یک کنترلر بسازیم: const controller = new AbortController(); همه کنترلرها یک پراپرتی به اسم signal دارن، که به عنوان یک رابط بین کنترلر و عملیاتی که می‌خوایم اون رو کنسل کنیم هست. مرحلهٔ بعد اینه که این کنترلر رو به شکل زیر به fetch بشناسونیم. آرگومان دوم fetch که یک آبجکت برای کانفیگ کردن این درخواست هست، یک پراپرتی به اسم signal داره. مقدار اون رو برابر با پراپرتی signal از کنترلر قرار میدیم: const controller = new AbortController(); (async function () { const res = await fetch('/upload', { // ... signal: controller.signal, }); const data = await res.json(); return data; })(); حالا هر زمانی که لازم داشتیم می‌تونیم این عملیات رو کنسل کنیم. برای این کار کافیه متد abort از کنترلر رو صدا بزنیم: const controller = new AbortController(); document.getElementById("cancel").onclick = () => { controller.abort(); } به طور کلی، AbortController یک قابلیت کاربردی توی جاوااسکریپت هست که با استفاده اون خیلی راحت می‌تونیم یک یا چند عملیات Async رو در زمان لزوم متوقف کنیم. برای کسب اطلاعات و مشاهده نمونه مثال های بیشتر، این مقاله رو مطالعه کنید. #javascript @CodeModule