| کانال توسعه‌دهندگان وب |
در اپ‌های وب مدرن، مخصوصاً فرم‌های سرچ زنده، گاهی چندین درخواست 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
6 · 661 ·