در برنامه‌های مدرن جاوااسکریپت، به‌ویژه در اپلیکیشن‌های تک‌صفحه‌ای (SPA)، مدیریت درخواست‌های HTTP یکی از بخش‌های مهم و کلیدی به شمار می‌رود. یکی از چالش‌هایی که ممکن است با آن مواجه شوید، لغو درخواست‌هایی است که دیگر به نتیجه آن‌ها نیاز ندارید. اینجاست که AbortController وارد می‌شود.

معرفی AbortController

AbortController یک API داخلی در جاوااسکریپت است که به شما امکان می‌دهد تا یک عملیات ناهمگام (مثل fetch) را به صورت دستی لغو کنید.

ساختار کلی استفاده از AbortController

const controller = new AbortController();
const signal = controller.signal;

fetch("https://api.example.com/data", { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log("درخواست لغو شد");
    } else {
      console.error("خطا در دریافت داده", error);
    }
  });

// لغو درخواست بعد از ۳ ثانیه
setTimeout(() => controller.abort(), 3000);

موارد استفاده رایج

  1. لغو درخواست هنگام ترک کامپوننت در React یا Vue
  2. جلوگیری از ارسال چندین درخواست مشابه پشت سر هم
  3. لغو درخواست‌هایی که خیلی طول کشیده‌اند

مثال کاربردی در React

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  fetch("https://api.example.com/data", { signal })
    .then(res => res.json())
    .then(data => setData(data))
    .catch(err => {
      if (err.name !== 'AbortError') {
        console.error(err);
      }
    });

  return () => controller.abort();
}, []);

نکات مهم

  • فقط برخی از APIها مانند fetch از AbortController پشتیبانی می‌کنند.
  • در مرورگرهای قدیمی ممکن است نیاز به polyfill داشته باشید.
  • Axios هم از لغو درخواست‌ها پشتیبانی می‌کنه — ولی نه دقیقاً با AbortController (تا نسخه‌های جدید).

🔸 نسخه‌های قدیمی Axios:

از توکن‌های لغو (CancelToken) اختصاصی خودش استفاده می‌کرد:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/api/data', {
  cancelToken: source.token
})
.catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  }
});

// لغو درخواست
source.cancel('درخواست لغو شد');

اما این روش deprecated شده و توصیه نمی‌شه.

🔸 نسخه‌های جدید Axios:

از AbortController پشتیبانی می‌کنن:

const controller = new AbortController();

axios.get('/api/data', {
  signal: controller.signal
})
.catch(function (error) {
  if (error.name === 'CanceledError') {
    console.log('درخواست لغو شد');
  }
});

// لغو درخواست
controller.abort();

🔹 کتابخونه‌های دیگه:

  • fetch: به‌صورت پیش‌فرض از AbortController پشتیبانی می‌کنه.
  • superagent: روش لغو خودش رو داره (req.abort()).
  • XMLHttpRequest: می‌تونی xhr.abort() بزنی، اما قدیمیه.
  • اگه از fetch استفاده می‌کنی، AbortController رو راحت پیاده می‌کنی.
  • اگه از Axios نسخه جدید استفاده می‌کنی، می‌تونی از AbortController استفاده کنی.
  • بهتره با توجه به نیازت یکی رو انتخاب کنی. برای پروژه‌های مدرن، fetch + AbortController خیلی شیک و سبک هست.

نتیجه‌گیری

استفاده از AbortController در کنار fetch ابزاری بسیار کاربردی برای مدیریت درخواست‌های HTTP است، مخصوصاً در شرایطی که باید از ارسال یا ادامه پردازش درخواست‌های غیرضروری جلوگیری کرد. این کار هم منابع سیستم را حفظ می‌کند و هم تجربه کاربری بهتری ارائه می‌دهد.