| کانال توسعه‌دهندگان وب |: post #112 — TG.ME

در اپ‌های وب مدرن، مخصوصاً فرم‌های سرچ زنده، گاهی چندین درخواست fetch پشت‌سرهم ارسال می‌شود و پاسخ‌های قدیمی‌تر، نتیجه جدید را خراب می‌کند. راه‌حل تمیز و امروزی: استفاده از AbortController

با این کار می‌توان درخواست قبلی را قبل از کامل شدن، لغو کرد تا هم UI تمیز بماند، هم پهنای‌باند و منابع سرور هدر نرود.

const controller = new AbortController();
const { signal } = controller;

fetch("/api/search?q=test", { signal })
.then(res => res.json())
.then(data => {
console.log("result", data);
})
.catch(err => {
if (err.name === "AbortError") {
console.log("request cancelled");
} else {
console.error(err);
}
});

// هر وقت لازم بود:
controller.abort();


برای سرچ‌های لحظه‌ای، می‌توان در هر ورودی جدید، controller.abort() قبلی را صدا زد و بعد یک AbortController جدید ساخت.

این تکنیک کمک می‌کند Race Condition در پاسخ‌ها کمتر شود و تجربه کاربری سریع‌تر و قابل‌اعتمادتر به نظر برسد 🚀

مرجع: MDN - AbortController

🔖 #Web #وب #Frontend #Backend #AbortController #fetch #JavaScript #Web_API #frontend

👤 Developix

💎 Channel: @DevelopixWeb
👍2❤1
August 19, 2026 312 6