AbortController
AbortController obyekti asinxron amallarni bekor qilish imkonini beradi.
U odatda fetch() so‘rovlarini bekor qilish uchun ishlatiladi.
Keraksiz operatsiyalarni bekor qilish unumdorlikni oshirishi va ilovalarni yanada sezgir qilishi mumkin.
Nega so‘rovni bekor qilish kerak?
Ba’zan asinxron amal endi kerak bo‘lmay qoladi.
Examples include:
- Foydalanuvchi bekor qilish (Cancel) tugmasini bosadi.
- Foydalanuvchi boshqa qidiruvni boshlaydi.
- Foydalanuvchi sahifani tark etadi.
- So‘rov juda uzoq davom etadi.
Bunday holatlarda siz operatsiya tugashini kutish o‘rniga uni bekor qilishingiz mumkin.
AbortController yaratish
AbortController’ni new kalit so‘zi bilan yarating.
Misol
const controller = new AbortController();
Abort signali
AbortController AbortSignal taqdim etadi.
Signal asinxron operatsiyaga uzatiladi.
Operatsiya signalni oladi va to‘xtaydi.
Misol
const controller = new AbortController();
const signal = controller.signal;
Fetch so‘rovini bekor qilish
Kontrollerning signalini fetch()’ga uzating.
Misol
const controller = new AbortController();
fetch("largefile.txt", {
signal: controller.signal
});
So‘rovni to‘xtatish
Amalni bekor qilish uchun abort()’ni chaqiring.
Misol
controller.abort();
To‘liq misol
Misol
const controller = new AbortController();
// Async function to download a file
async function loadFile(file) {
try {
const response = await fetch(file, {
signal: controller.signal
});
myDisplayer(await response.text());
} catch(err) {
if (err.name == "AbortError") {
myDisplayer("Download canceled");
}
}
}
// Call the async function
loadFile("fetch.txt");
O‘zingiz sinab ko‘ring »
Tugma bilan bekor qilish
Foydalanuvchi tugmani bosganida so‘rovni bekor qilish mumkin.
Misol
<button onclick='loadFile("fetch.txt")'>Start Download</button>
<button onclick="controller.abort()">Cancel Download</button>
<p id="demo"></p>
O‘zingiz sinab ko‘ring »
Har bir so‘rov uchun yangi boshqaruvchi yarating
AbortController to‘xtatilgandan so‘ng uni qayta ishlatib bo‘lmaydi.
Har bir yangi so‘rov uchun yangi kontroller yarating.
Oldingi so‘rovni bekor qilish
Qidiruv ilovalari ko‘pincha yangi so‘rovni boshlashdan oldin avvalgisini bekor qiladi.
Misol
let controller;
async function search(text) {
if (controller) {
controller.abort();
}
controller = new AbortController();
try {
const response = await fetch(
"/search?q=" + text,
{signal: controller.signal}
);
console.log(await response.text());
}
catch(err) {
if (err.name != "AbortError") {
console.log(err);
}
}
}
User types:
c
ca
cat
cats
↓
Only the last request finishes.
Taymautdan keyin bekor qilish
Taymerlarni AbortController bilan birgalikda ishlatishingiz mumkin.
Misol
const controller = new AbortController();
setTimeout(function(){
controller.abort();
},5000);
await fetch(url,{
signal: controller.signal
});
Umumiy xatolar
Signalni uzatishni unutish.
Wrong:
fetch(url);
Right:
fetch(url);
Bekor qilingan kontrollerdan qayta foydalanish.
Yangi kontroller yaratishni unutmang.
AbortError’ni muvaffaqiyatsizlik deb hisoblash
To‘xtatilgan so‘rov ko‘pincha kutilgan holat bo‘ladi.
Uni alohida qayta ishlang.
Misol
if (err.name == "AbortError") {
return;
}
Brauzerlarda qo‘llab-quvvatlash
AbortController barcha zamonaviy brauzerlar tomonidan qo‘llab-quvvatlanadi.
U Fetch API bilan birgalikda keng qo‘llaniladi.
AbortController nazorat ro‘yxati
- Har bir yangi so‘rov uchun yangi kontroller yarating
- Uni new AbortController() bilan yarating
- controller.signal’ni fetch()’ga uzating
- So‘rovni bekor qilish uchun abort()’ni chaqiring
- AbortError’ni catch blokida qayta ishlang
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!