JavaScript AbortController-ni o'zlashtirish: So'rovlarni uzluksiz bekor qilish

Zamonaviy veb-dasturlashning dinamik dunyosida asinxron operatsiyalar sezgir va qiziqarli foydalanuvchi tajribasining asosini tashkil etadi. API'lardan ma'lumotlarni olishdan tortib, foydalanuvchi bilan o'zaro aloqalarni boshqarishgacha, JavaScript ko'pincha bajarilishi uchun vaqt talab qiladigan vazifalar bilan shug'ullanadi. Biroq, so'rov tugashidan oldin foydalanuvchi sahifadan uzoqlashsa yoki keyingi so'rov oldingisini bekor qilsa nima bo'ladi? To'g'ri boshqaruvsiz, bu davom etayotgan operatsiyalar resurslarning isrof bo'lishiga, eskirgan ma'lumotlarga va hatto kutilmagan xatoliklarga olib kelishi mumkin. Aynan shu yerda JavaScript AbortController API o'zini namoyon qilib, asinxron operatsiyalarni bekor qilish uchun mustahkam va standartlashtirilgan mexanizmni taklif etadi.

So'rovni bekor qilish zarurati

Oddiy bir holatni ko'rib chiqaylik: foydalanuvchi qidiruv maydoniga yozadi va har bir tugmani bosishda ilovangiz qidiruv takliflarini olish uchun API so'rovini yuboradi. Agar foydalanuvchi tez yozsa, bir vaqtning o'zida bir nechta so'rovlar bajarilayotgan bo'lishi mumkin. Agar foydalanuvchi bu so'rovlar kutilayotgan vaqtda boshqa sahifaga o'tsa, javoblar (agar kelib tushsa) ahamiyatsiz bo'ladi va ularni qayta ishlash qimmatli mijoz tomonidagi resurslarni isrof qilishga olib keladi. Bundan tashqari, server bu so'rovlarni allaqachon qayta ishlagan bo'lishi mumkin, bu esa keraksiz hisoblash xarajatlariga sabab bo'ladi.

Yana bir keng tarqalgan holat - foydalanuvchi fayl yuklash kabi harakatni boshlaydi, lekin keyin uni o'rtada bekor qilishga qaror qiladi. Yoki, ehtimol, katta ma'lumotlar to'plamini olish kabi uzoq davom etadigan operatsiya endi kerak emas, chunki yangi, dolzarbroq so'rov yuborilgan. Bu barcha hollarda, ushbu davom etayotgan operatsiyalarni to'g'ri yakunlash quyidagilar uchun juda muhimdir:

• Foydalanuvchi tajribasini yaxshilash: Eskirgan yoki nomuvofiq ma'lumotlar ko'rsatilishining oldini oladi, keraksiz interfeys yangilanishlaridan qochadi va ilovaning tezkor ishlashini ta'minlaydi.
• Resurslardan foydalanishni optimallashtirish: Keraksiz ma'lumotlarni yuklamaslik orqali tarmoq o'tkazuvchanligini tejaydi, bajarilgan, ammo keraksiz operatsiyalarni qayta ishlamaslik orqali protsessor sikllarini kamaytiradi va xotirani bo'shatadi.
• Poyga holatlarining oldini olish: Faqat eng so'nggi tegishli ma'lumotlar qayta ishlanishini ta'minlaydi, eski, bekor qilingan so'rov javobi yangi ma'lumotlarning ustiga yozilishining oldini oladi.

AbortController API bilan tanishuv

AbortController interfeysi bir yoki bir nechta JavaScript asinxron operatsiyalariga bekor qilish so'rovini bildirish usulini taqdim etadi. U AbortSignalni qo'llab-quvvatlaydigan API'lar, ayniqsa zamonaviy fetch API bilan ishlash uchun mo'ljallangan.

Mohiyatan, AbortController ikkita asosiy komponentga ega:

• AbortController nusxasi: Bu yangi bekor qilish mexanizmini yaratish uchun siz yaratadigan obyektdir.
• signal xususiyati: Har bir AbortController nusxasining signal xususiyati bor, bu AbortSignal obyektidir. Bu AbortSignal obyekti siz bekor qilmoqchi bo'lgan asinxron operatsiyaga uzatiladi.

AbortController shuningdek, bitta metodga ega:

• abort(): AbortController nusxasida ushbu metodni chaqirish darhol bog'liq AbortSignalni ishga tushiradi va uni bekor qilingan deb belgilaydi. Ushbu signalni tinglayotgan har qanday operatsiya xabardor qilinadi va shunga muvofiq harakat qilishi mumkin.

AbortController Fetch bilan qanday ishlaydi

fetch API AbortController uchun asosiy va eng keng tarqalgan qo'llash holati hisoblanadi. fetch so'rovini yuborayotganda, options obyektida AbortSignal obyektini uzatishingiz mumkin. Agar signal bekor qilinsa, fetch operatsiyasi muddatidan oldin to'xtatiladi.

Asosiy misol: Yagona Fetch so'rovini bekor qilish

Oddiy misol bilan ko'rsatamiz. Tasavvur qiling, biz API'dan ma'lumotlarni olishni xohlaymiz, lekin agar foydalanuvchi u tugashidan oldin uzoqlashishga qaror qilsa, ushbu so'rovni bekor qila olishimiz kerak.

```javascript // Yangi AbortController nusxasini yaratish const controller = new AbortController(); const signal = controller.signal; // API nuqtasining URL manzili const apiUrl = 'https://api.example.com/data'; console.log('Fetch soʻrovini boshlash...'); fetch(apiUrl, { signal: signal // Signalni fetch sozlamalariga uzatish }) .then(response => { if (!response.ok) { throw new Error(`HTTP xatosi! status: ${response.status}`); } return response.json(); }) .then(data => { console.log('Maʼlumotlar qabul qilindi:', data); // Qabul qilingan maʼlumotlarni qayta ishlash }) .catch(error => { if (error.name === 'AbortError') { console.log('Fetch soʻrovi bekor qilindi.'); } else { console.error('Fetch xatosi:', error); } }); // So'rovni 5 soniyadan so'ng bekor qilishni simulyatsiya qilish setTimeout(() => { console.log('Fetch soʻrovini bekor qilish...'); controller.abort(); // Bu .catch blokini AbortError bilan ishga tushiradi }, 5000); ```

Ushbu misolda:

• Biz AbortController yaratamiz va uning signalini olamiz.
• Biz ushbu signalni fetch sozlamalariga uzatamiz.
• Agar controller.abort() fetch tugashidan oldin chaqirilsa, fetch tomonidan qaytarilgan promise AbortError bilan rad etiladi.
• .catch() bloki haqiqiy tarmoq xatosi va bekor qilish o'rtasidagi farqni aniqlash uchun ushbu AbortErrorni maxsus tekshiradi.

Amaliy maslahat: Bekor qilishlarni to'g'ri boshqarish uchun AbortControllerni fetch bilan ishlatganda har doim catch bloklaringizda error.name === 'AbortError'ni tekshiring.

Yagona kontroller yordamida bir nechta so'rovlarni boshqarish

Yagona AbortController uning signalini tinglayotgan bir nechta operatsiyani bekor qilish uchun ishlatilishi mumkin. Bu foydalanuvchi harakati bir nechta davom etayotgan so'rovlarni bekor qilishi mumkin bo'lgan holatlar uchun juda foydalidir. Masalan, agar foydalanuvchi boshqaruv paneli sahifasini tark etsa, siz ushbu panelga tegishli barcha kutilayotgan ma'lumotlarni olish so'rovlarini bekor qilishni xohlashingiz mumkin.

```javascript const controller = new AbortController(); const signal = controller.signal; const apiUrl1 = 'https://api.example.com/users'; const apiUrl2 = 'https://api.example.com/products'; function fetchData(url, name) { console.log(`${name} fetch soʻrovini boshlash...`); return fetch(url, { signal: signal }) .then(response => { if (!response.ok) { throw new Error(`HTTP xatosi! status: ${response.status}`); } return response.json(); }) .then(data => { console.log(`${name} maʼlumotlari qabul qilindi:`, data); }) .catch(error => { if (error.name === 'AbortError') { console.log(`${name} fetch soʻrovi bekor qilindi.`); } else { console.error(`${name} fetch xatosi:`, error); } }); } // Bir nechta fetch so'rovini boshlash fetchData(apiUrl1, 'Users'); fetchData(apiUrl2, 'Products'); // Barcha so'rovlarni 7 soniyadan so'ng bekor qilishni simulyatsiya qilish setTimeout(() => { console.log('Barcha fetch soʻrovlarini bekor qilish...'); controller.abort(); }, 7000); ```

Bu yerda 'Users' va 'Products' fetch operatsiyalari bir xil signaldan foydalanmoqda. controller.abort() chaqirilganda, ikkala so'rov ham to'xtatiladi.

Global nuqtai nazar: Ushbu naqsh mustaqil ravishda API chaqiruvlarini boshlashi mumkin bo'lgan ko'plab komponentlarga ega murakkab ilovalar uchun bebahodir. Masalan, xalqaro elektron tijorat platformasida mahsulotlar ro'yxati, foydalanuvchi profillari va xarid savatchasi xulosalari uchun komponentlar bo'lishi mumkin, ularning barchasi ma'lumotlarni oladi. Agar foydalanuvchi bir mahsulot kategoriyasidan boshqasiga tezda o'tsa, bitta abort() chaqiruvi oldingi ko'rinishga oid barcha kutilayotgan so'rovlarni tozalashi mumkin.

`AbortSignal` hodisa tinglovchisi

fetch avtomatik ravishda bekor qilish signalini boshqarsa-da, boshqa asinxron operatsiyalar bekor qilish hodisalari uchun aniq ro'yxatdan o'tishni talab qilishi mumkin. AbortSignal obyekti 'abort' hodisasini tinglash imkonini beruvchi addEventListener metodini taqdim etadi. Bu, ayniqsa, AbortControllerni maxsus asinxron mantiq yoki o'z konfiguratsiyasida signal opsiyasini to'g'ridan-to'g'ri qo'llab-quvvatlamaydigan kutubxonalar bilan integratsiya qilishda foydalidir.

```javascript const controller = new AbortController(); const signal = controller.signal; function performLongTask(signal) { return new Promise((resolve, reject) => { const taskDuration = 10000; // Vazifa 10 soniya davom etadi let elapsedTime = 0; const intervalId = setInterval(() => { elapsedTime += 1000; console.log(`Vazifa jarayoni: ${elapsedTime / 1000}s`); if (elapsedTime >= taskDuration) { clearInterval(intervalId); resolve('Vazifa muvaffaqiyatli yakunlandi!'); } }, 1000); // 'abort' hodisasini tinglash signal.addEventListener('abort', () => { clearInterval(intervalId); console.log('Uzoq vazifa hodisa tinglovchisi orqali bekor qilindi.'); reject(new DOMException('Aborted', 'AbortError')); }); }); } console.log('Uzoq vazifani boshlash...'); performLongTask(signal) .then(result => console.log(result)) .catch(error => { if (error.name === 'AbortError') { console.log('Operatsiya bekor qilindi.'); } else { console.error('Kutilmagan xato yuz berdi:', error); } }); // Vazifani 3 soniyadan so'ng bekor qilish setTimeout(() => { console.log('Bekor qilishni boshlash...'); controller.abort(); }, 3000); ```

Ushbu misolda:

• performLongTask funksiyasi AbortSignal qabul qiladi.
• U jarayonni simulyatsiya qilish uchun interval o'rnatadi.
• Eng muhimi, u 'abort' hodisasi uchun signalga hodisa tinglovchisini qo'shadi. Hodisa ishga tushganda, u intervalni tozalaydi va promise'ni AbortError bilan rad etadi.

Amaliy maslahat: addEventListener('abort', callback) naqshi maxsus asinxron mantiq uchun juda muhim bo'lib, kodingiz tashqaridan keladigan bekor qilish signallariga javob bera olishini ta'minlaydi.

`signal.aborted` xususiyati

AbortSignal shuningdek, mantiqiy aborted xususiyatiga ega, agar signal bekor qilingan bo'lsa true, aks holda false qiymatini qaytaradi. Bu bekor qilishni boshlash uchun to'g'ridan-to'g'ri ishlatilmasa-da, asinxron mantiqingiz ichida signalning joriy holatini tekshirish uchun foydali bo'lishi mumkin.

```javascript const controller = new AbortController(); const signal = controller.signal; function checkStatus(signal) { if (signal.aborted) { console.log('Statusni tekshirib boʻlmaydi, signal allaqachon bekor qilingan.'); return; } console.log('Statusni tekshirish...'); // Ba'zi ishlarni simulyatsiya qilish... setTimeout(() => { if (!signal.aborted) { console.log('Status tekshiruvi yakunlandi.'); } else { console.log('Status tekshiruvi bekor qilinish sababli toʻxtatildi.'); } }, 2000); } checkStatus(signal); // 1 soniyadan so'ng bekor qilish setTimeout(() => { console.log('Bekor qilinmoqda...'); controller.abort(); }, 1000); ```

Ushbu parchada signal.aborted sizga resurs talab qiladigan operatsiyalarni davom ettirishdan oldin holatni tekshirish imkonini beradi. fetch API buni ichki ravishda boshqarsa-da, maxsus mantiq bunday tekshiruvlardan foyda ko'rishi mumkin.

Fetch'dan tashqari: Boshqa qo'llash holatlari

fetch AbortControllerning eng mashhur foydalanuvchisi bo'lsa-da, uning imkoniyatlari AbortSignalni tinglash uchun mo'ljallangan har qanday asinxron operatsiyaga taalluqlidir. Bularga quyidagilar kiradi:

• Uzoq davom etadigan hisob-kitoblar: Web Workers, murakkab DOM manipulyatsiyalari yoki intensiv ma'lumotlarni qayta ishlash.
• Taymerlar: Garchi setTimeout va setInterval to'g'ridan-to'g'ri AbortSignal qabul qilmasa-da, ularni performLongTask misolida ko'rsatilganidek, buni amalga oshiradigan promise'larga o'rashingiz mumkin.
• Boshqa kutubxonalar: Asinxron operatsiyalar bilan shug'ullanadigan ko'plab zamonaviy JavaScript kutubxonalari (masalan, ba'zi ma'lumotlarni olish kutubxonalari, animatsiya kutubxonalari) AbortSignalni qo'llab-quvvatlashni integratsiya qila boshlamoqda.

Misol: AbortController'ni Web Workers bilan ishlatish

Web Workers og'ir vazifalarni asosiy oqimdan olib tashlash uchun ajoyibdir. Siz Web Worker bilan aloqa o'rnatishingiz va unga workerda bajarilayotgan ishni bekor qilish imkonini berish uchun AbortSignal taqdim etishingiz mumkin.

main.js

```javascript // Web Worker yaratish const worker = new Worker('worker.js'); // Worker vazifasi uchun AbortController yaratish const controller = new AbortController(); const signal = controller.signal; console.log('Workerga vazifa yuborilmoqda...'); // Vazifa ma'lumotlari va signalni worker'ga yuborish worker.postMessage({ task: 'processData', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], signal: signal // Eslatma: Signallarni bu tarzda to'g'ridan-to'g'ri uzatib bo'lmaydi. // Biz worker foydalanishi mumkin bo'lgan xabar yuborishimiz kerak // o'z signalini yaratish yoki xabarlarni tinglash uchun. // Amaliyroq yondashuv - bekor qilish uchun xabar yuborish. }); // Signalni workerlar bilan boshqarishning mustahkamroq usuli xabar almashish orqali: // Keling, aniqlashtiramiz: Biz 'start' xabarini va 'abort' xabarini yuboramiz. worker.postMessage({ command: 'startProcessing', payload: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }); worker.onmessage = function(event) { console.log('Workerdan xabar:', event.data); }; // Worker vazifasini 3 soniyadan so'ng bekor qilishni simulyatsiya qilish setTimeout(() => { console.log('Worker vazifasini bekor qilish...'); // Worker'ga 'abort' buyrug'ini yuborish worker.postMessage({ command: 'abortProcessing' }); }, 3000); // Ish tugagach, worker'ni to'xtatishni unutmang // worker.terminate(); ```

worker.js

```javascript let processingInterval = null; let isAborted = false; self.onmessage = function(event) { const { command, payload } = event.data; if (command === 'startProcessing') { isAborted = false; console.log('Worker startProcessing buyrugʻini qabul qildi. Yuklama:', payload); let progress = 0; const total = payload.length; processingInterval = setInterval(() => { if (isAborted) { clearInterval(processingInterval); console.log('Worker: Qayta ishlash bekor qilindi.'); self.postMessage({ status: 'aborted' }); return; } progress++; console.log(`Worker: ${progress}/${total} element qayta ishlanmoqda`); if (progress === total) { clearInterval(processingInterval); console.log('Worker: Qayta ishlash yakunlandi.'); self.postMessage({ status: 'completed', result: 'Barcha elementlar qayta ishlandi' }); } }, 500); } else if (command === 'abortProcessing') { console.log('Worker abortProcessing buyrugʻini qabul qildi.'); isAborted = true; // isAborted tekshiruvi tufayli interval keyingi siklda o'zini o'zi tozalaydi. } }; ```

Tushuntirish:

• Asosiy oqimda biz AbortController yaratamiz.
• signalni to'g'ridan-to'g'ri uzatish o'rniga (bu murakkab va oson uzatilmaydigan obyekt bo'lgani uchun imkonsiz), biz xabar almashishdan foydalanamiz. Asosiy oqim 'startProcessing' buyrug'ini va keyinroq 'abortProcessing' buyrug'ini yuboradi.
• Worker bu buyruqlarni tinglaydi. U 'startProcessing'ni qabul qilganda, o'z ishini boshlaydi va interval o'rnatadi. U shuningdek, isAborted bayrog'idan foydalanadi, bu 'abortProcessing' buyrug'i bilan boshqariladi.
• isAborted true bo'lganda, workerning intervali o'zini tozalaydi va vazifa bekor qilinganligini xabar qiladi.

Amaliy maslahat: Web Workers uchun bekor qilishni signal qilish uchun xabarlarga asoslangan aloqa naqshini amalga oshiring, bu AbortSignal xatti-harakatini samarali takrorlaydi.

Eng yaxshi amaliyotlar va e'tiborga olinadigan jihatlar

AbortControllerdan samarali foydalanish uchun quyidagi eng yaxshi amaliyotlarni yodda tuting:

• Aniq nomlash: Kontrollerlaringizni samarali boshqarish uchun tavsiflovchi o'zgaruvchi nomlaridan foydalaning (masalan, dashboardFetchController, userProfileController).
• Qamrovni boshqarish: Kontrollerlarning to'g'ri qamrovda ekanligiga ishonch hosil qiling. Agar komponent demontaj qilinsa, u bilan bog'liq har qanday kutilayotgan so'rovlarni bekor qiling.
• Xatolarni boshqarish: Har doim AbortError va boshqa tarmoq yoki qayta ishlash xatolari o'rtasida farqlang.
• Kontrollerning hayot sikli: Kontroller faqat bir marta bekor qilishi mumkin. Agar vaqt o'tishi bilan bir nechta mustaqil operatsiyani bekor qilish kerak bo'lsa, sizga bir nechta kontroller kerak bo'ladi. Biroq, bitta kontroller, agar ularning barchasi uning signalini baham ko'rsa, bir vaqtning o'zida bir nechta operatsiyani bekor qilishi mumkin.
• DOM AbortSignal: AbortSignal interfeysi DOM standarti ekanligini yodda tuting. Keng qo'llab-quvvatlansa-da, agar kerak bo'lsa, eski muhitlar uchun mosligini ta'minlang (garchi zamonaviy brauzerlar va Node.js'da qo'llab-quvvatlash odatda a'lo darajada bo'lsa ham).
• Tozalash: Agar siz AbortControllerni komponentlarga asoslangan arxitekturada (React, Vue, Angular kabi) ishlatsangiz, komponent DOMdan olib tashlanganda xotira sizib chiqishi va kutilmagan xatti-harakatlarning oldini olish uchun tozalash bosqichida (masalan, `componentWillUnmount`, `useEffect` qaytarish funksiyasi, `ngOnDestroy`) controller.abort()ni chaqirganingizga ishonch hosil qiling.

Global nuqtai nazar: Global auditoriya uchun dasturlashda, tarmoq tezligi va kechikishdagi o'zgaruvchanlikni hisobga oling. Ulanish sifati yomonroq bo'lgan hududlardagi foydalanuvchilar uzoqroq so'rov vaqtlarini boshdan kechirishi mumkin, bu esa ularning tajribasi sezilarli darajada yomonlashishining oldini olish uchun samarali bekor qilishni yanada muhimroq qiladi. Ilovangizni ushbu farqlarni hisobga olgan holda loyihalash muhimdir.

Xulosa

AbortController va unga bog'liq bo'lgan AbortSignal JavaScript'da asinxron operatsiyalarni boshqarish uchun kuchli vositalardir. Bekor qilishni signal qilishning standartlashtirilgan usulini taqdim etish orqali ular dasturchilarga yanada mustahkam, samarali va foydalanuvchiga qulay ilovalar yaratish imkonini beradi. Oddiy fetch so'rovi bilan shug'ullanasizmi yoki murakkab ish oqimlarini boshqarasizmi, AbortControllerni tushunish va amalga oshirish har qanday zamonaviy veb-dasturchi uchun asosiy mahoratdir.

AbortController yordamida so'rovlarni bekor qilishni o'zlashtirish nafaqat unumdorlik va resurslarni boshqarishni yaxshilaydi, balki yuqori darajadagi foydalanuvchi tajribasiga bevosita hissa qo'shadi. Interaktiv ilovalar yaratayotganda, kutilayotgan operatsiyalarni to'g'ri boshqarish uchun ushbu muhim API'ni integratsiya qilishni unutmang, bu sizning ilovalaringiz butun dunyodagi barcha foydalanuvchilaringiz uchun sezgir va ishonchli bo'lib qolishini ta'minlaydi.