AbortController API: Soʻrovlarni Bekor Qilish va Resurslarni Boshqarishni Oʻzlashtirish

Zamonaviy veb-ishlab chiqishda, sezgir va unumdor ilovalarni yaratish uchun asinxron operatsiyalarni samarali boshqarish juda muhim. AbortController API soʻrovlarni bekor qilish va resurslarni boshqarish uchun kuchli mexanizmni taqdim etadi, bu esa foydalanuvchi tajribasini yaxshilaydi va keraksiz yuklamalarning oldini oladi. Ushbu keng qamrovli qoʻllanma AbortController APIni, uning asosiy tushunchalarini, amaliy qoʻllash holatlarini va ilgʻor uslublarini batafsil oʻrganadi.

AbortController API nima?

AbortController API - bu bir yoki bir nechta veb-soʻrovlarni bekor qilish imkonini beruvchi JavaScript-ga oʻrnatilgan API. U ikkita asosiy komponentdan iborat:

• AbortController: Bekor qilish jarayonini boshlovchi kontroller obyekti.
• AbortSignal: AbortController bilan bogʻlangan signal obyekti boʻlib, u bekor qilish signallarini tinglash uchun asinxron operatsiyaga (masalan, fetch soʻroviga) uzatiladi.

AbortController-da abort() metodi chaqirilganda, bogʻlangan AbortSignal abort hodisasini yuboradi, buni asinxron operatsiya tinglashi va shunga mos ravishda javob berishi mumkin. Bu soʻrovlarni toʻgʻri bekor qilish, keraksiz ma'lumotlar uzatish va qayta ishlashning oldini olish imkonini beradi.

Asosiy tushunchalar

1. AbortController yaratish

AbortController APIdan foydalanish uchun, avvalo, AbortController sinfining namunasini yaratishingiz kerak:

const controller = new AbortController();

2. AbortSignal-ni olish

AbortController namunasi oʻzining signal xususiyati orqali AbortSignal obyektiga kirishni ta'minlaydi:

const signal = controller.signal;

3. AbortSignal-ni asinxron operatsiyaga uzatish

Keyin AbortSignal siz boshqarmoqchi boʻlgan asinxron operatsiyaga parametr sifatida uzatiladi. Masalan, fetch APIdan foydalanganda, siz signal-ni parametrlar obyektining bir qismi sifatida uzatishingiz mumkin:

fetch('/api/data', { signal })
 .then(response => response.json())
 .then(data => {
 console.log('Maʼlumotlar olindi:', data);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('Fetch bekor qilindi');
 } else {
 console.error('Fetch xatosi:', error);
 }
 });

4. Soʻrovni bekor qilish

Soʻrovni bekor qilish uchun, AbortController namunasida abort() metodini chaqiring:

controller.abort();

Bu bogʻlangan AbortSignal-da abort hodisasini ishga tushiradi, natijada fetch soʻrovi AbortError bilan rad etiladi.

Amaliy qoʻllash holatlari

1. Fetch soʻrovlarini bekor qilish

AbortController API uchun eng keng tarqalgan qoʻllash holatlaridan biri bu fetch soʻrovlarini bekor qilishdir. Bu, ayniqsa, foydalanuvchi sahifadan uzoqlashganda yoki davom etayotgan soʻrovni keraksiz qilib qoʻyadigan harakatni amalga oshirganda foydalidir. Consider a scenario where a user is searching for products on an e-commerce website. If the user types a new search query before the previous search request completes, the AbortController can be used to cancel the previous request, saving bandwidth and processing power.

let controller = null;

function searchProducts(query) {
 if (controller) {
 controller.abort();
 }

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

 fetch(`/api/products?q=${query}`, { signal })
 .then(response => response.json())
 .then(products => {
 displayProducts(products);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('Qidiruv bekor qilindi');
 } else {
 console.error('Qidiruv xatosi:', error);
 }
 });
}

function displayProducts(products) {
 // Mahsulotlarni UI-da ko'rsatish
 console.log('Mahsulotlar:', products);
}

// Foydalanish misoli:
searchProducts('shoes');
searchProducts('shirts'); // 'shoes' uchun avvalgi qidiruvni bekor qiladi

2. Taymerlarni amalga oshirish

AbortController API asinxron operatsiyalar uchun taymerlarni (timeout) amalga oshirish uchun ham ishlatilishi mumkin. Bu, agar server javob bermasa, soʻrovlarning cheksiz osilib qolmasligini ta'minlaydi. Bu, tarmoq kechikishi yoki server muammolari soʻrovlarning kutilganidan uzoqroq davom etishiga olib kelishi mumkin boʻlgan taqsimlangan tizimlarda muhimdir. Setting a timeout can prevent the application from getting stuck waiting for a response that may never arrive.

async function fetchDataWithTimeout(url, timeout) {
 const controller = new AbortController();
 const signal = controller.signal;

 const timeoutId = setTimeout(() => {
 controller.abort();
 }, timeout);

 try {
 const response = await fetch(url, { signal });
 clearTimeout(timeoutId);
 return await response.json();
 } catch (error) {
 clearTimeout(timeoutId);
 if (error.name === 'AbortError') {
 throw new Error('Soʻrov vaqti tugadi');
 } else {
 throw error;
 }
 }
}

// Foydalanish misoli:
fetchDataWithTimeout('/api/data', 5000) // 5 soniyalik taymer
 .then(data => {
 console.log('Maʼlumotlar olindi:', data);
 })
 .catch(error => {
 console.error('Xato:', error.message);
 });

3. Bir nechta asinxron operatsiyalarni boshqarish

AbortController API bir vaqtning oʻzida bir nechta asinxron operatsiyalarni boshqarish uchun ishlatilishi mumkin. Bu, bogʻliq soʻrovlar guruhini bekor qilishingiz kerak boʻlgan stsenariylarda foydalidir. Masalan, bir nechta manbalardan ma'lumotlarni oladigan boshqaruv paneli ilovasini tasavvur qiling. Agar foydalanuvchi boshqaruv panelidan uzoqlashsa, resurslarni boʻshatish uchun barcha kutilayotgan soʻrovlar bekor qilinishi kerak.

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

const urls = [
 '/api/data1',
 '/api/data2',
 '/api/data3'
];

async function fetchData(url) {
 try {
 const response = await fetch(url, { signal });
 return await response.json();
 } catch (error) {
 if (error.name === 'AbortError') {
 console.log(`${url} uchun fetch bekor qilindi`);
 } else {
 console.error(`${url} uchun fetch xatosi:`, error);
 }
 throw error;
 }
}

Promise.all(urls.map(fetchData))
 .then(results => {
 console.log('Barcha maʼlumotlar olindi:', results);
 })
 .catch(error => {
 console.error('Maʼlumotlarni olishda xatolik:', error);
 });

// Barcha so'rovlarni bekor qilish uchun:
controller.abort();

Ilgʻor uslublar

1. AbortController-ni hodisa tinglovchilari bilan ishlatish

AbortController API hodisa tinglovchilarini (event listeners) boshqarish uchun ham ishlatilishi mumkin. Bu, komponent oʻchirilganda yoki ma'lum bir hodisa yuz berganda hodisa tinglovchilarini tozalash uchun foydalidir. Masalan, maxsus video pleyer yaratayotganda, siz 'play', 'pause' va 'ended' hodisalari uchun hodisa tinglovchilarini biriktirishingiz mumkin. Using AbortController ensures that these listeners are properly removed when the player is no longer needed, preventing memory leaks.

function addEventListenerWithAbort(element, eventType, listener, signal) {
 element.addEventListener(eventType, listener);

 signal.addEventListener('abort', () => {
 element.removeEventListener(eventType, listener);
 });
}

// Foydalanish misoli:
const controller = new AbortController();
const signal = controller.signal;
const button = document.getElementById('myButton');

function handleClick() {
 console.log('Tugma bosildi!');
}

addEventListenerWithAbort(button, 'click', handleClick, signal);

// Hodisa tinglovchisini olib tashlash uchun:
controller.abort();

2. AbortSignallarni zanjirlash

Ba'zi hollarda, bir nechta AbortSignallarni bir-biriga zanjirlash kerak boʻlishi mumkin. Bu, bekor qilish signallarining ierarxiyasini yaratishga imkon beradi, bunda bir signalni bekor qilish avtomatik ravishda uning barcha bolalarini bekor qiladi. Bunga bir nechta signalni yagona signalga birlashtiradigan yordamchi funksiya yaratish orqali erishish mumkin. Imagine a complex workflow where multiple components depend on each other. If one component fails or is cancelled, you might want to automatically cancel all dependent components.

function combineAbortSignals(...signals) {
 const controller = new AbortController();

 signals.forEach(signal => {
 if (signal) {
 signal.addEventListener('abort', () => {
 controller.abort();
 });
 }
 });

 return controller.signal;
}

// Foydalanish misoli:
const controller1 = new AbortController();
const controller2 = new AbortController();
const combinedSignal = combineAbortSignals(controller1.signal, controller2.signal);

fetch('/api/data', { signal: combinedSignal })
 .then(response => response.json())
 .then(data => {
 console.log('Maʼlumotlar olindi:', data);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('Fetch bekor qilindi');
 } else {
 console.error('Fetch xatosi:', error);
 }
 });

// controller1-ni bekor qilish fetch so'rovini ham bekor qiladi:
controller1.abort();

3. AbortError xatoliklariga global ishlov berish

Kodning saqlanuvchanligini oshirish uchun, siz AbortError istisnolarini ushlash va ularga ishlov berish uchun global xatolik ishlovchisini yaratishingiz mumkin. Bu sizning ilovangizda xatoliklarga ishlov berishni soddalashtirishi va izchil xatti-harakatni ta'minlashi mumkin. This can be done by creating a custom error handling function that checks for AbortErrors and takes appropriate action. This centralized approach makes it easier to update error handling logic and ensures consistency across the application.

function handleAbortError(error) {
 if (error.name === 'AbortError') {
 console.log('Soʻrov global miqyosda bekor qilindi');
 // Kerakli tozalash yoki UI yangilanishlarini bajaring
 }
}

// Foydalanish misoli:
fetch('/api/data')
 .then(response => response.json())
 .then(data => {
 console.log('Maʼlumotlar olindi:', data);
 })
 .catch(error => {
 handleAbortError(error);
 console.error('Fetch xatosi:', error);
 });

Xatoliklarga ishlov berish

AbortController API yordamida soʻrov bekor qilinganda, fetch promise-i AbortError bilan rad etiladi. Ilovangizda kutilmagan xatti-harakatlarning oldini olish uchun ushbu xatolikka toʻgʻri ishlov berish muhimdir.

fetch('/api/data', { signal })
 .then(response => response.json())
 .then(data => {
 console.log('Maʼlumotlar olindi:', data);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('Fetch bekor qilindi');
 // Kerakli tozalash yoki UI yangilanishlarini bajaring
 } else {
 console.error('Fetch xatosi:', error);
 // Boshqa xatoliklarga ishlov berish
 }
 });

Xatoliklarga ishlov berish blokida siz error.name xususiyatini tekshirib, AbortError-ni aniqlashingiz mumkin. Agar xato AbortError boʻlsa, siz kerakli tozalash yoki UI yangilanishlarini bajarishingiz mumkin, masalan, foydalanuvchiga xabar koʻrsatish yoki ilova holatini tiklash.

Eng yaxshi amaliyotlar

• Har doim AbortError istisnolariga ishlov bering: Kodingiz kutilmagan xatti-harakatlarning oldini olish uchun AbortError istisnolariga toʻgʻri ishlov berishini ta'minlang.
• Tushunarli xato xabarlaridan foydalaning: Ishlab chiquvchilarga xatoliklarni tuzatishda yordam berish uchun aniq va ma'lumotli xato xabarlarini taqdim eting.
• Resurslarni tozalang: Soʻrov bekor qilinganda, xotira sizib chiqishining oldini olish uchun taymerlar yoki hodisa tinglovchilari kabi bogʻliq resurslarni tozalang.
• Taymer qiymatlarini inobatga oling: Soʻrovlarning cheksiz osilib qolishining oldini olish uchun asinxron operatsiyalar uchun mos taymer qiymatlarini oʻrnating.
• Uzoq davom etadigan operatsiyalar uchun AbortController-dan foydalaning: Bajarilishi uzoq vaqt talab qilishi mumkin boʻlgan operatsiyalar uchun, foydalanuvchilarga zarur boʻlganda operatsiyani bekor qilish imkonini berish uchun AbortController APIdan foydalaning.

Brauzerlar bilan mosligi

AbortController API zamonaviy brauzerlarda, jumladan Chrome, Firefox, Safari va Edge-da keng qoʻllab-quvvatlanadi. Biroq, eski brauzerlar ushbu APIni qoʻllab-quvvatlamasligi mumkin. Eski brauzerlar bilan moslikni ta'minlash uchun siz polyfill-dan foydalanishingiz mumkin. Several polyfills are available that provide AbortController functionality for older browsers. These polyfills can be easily integrated into your project using package managers like npm or yarn.

AbortController kelajagi

AbortController API rivojlanayotgan texnologiya boʻlib, spetsifikatsiyaning kelajakdagi versiyalari yangi xususiyatlar va yaxshilanishlarni taqdim etishi mumkin. Staying up-to-date with the latest developments in the AbortController API is crucial for building modern and efficient web applications. Keep an eye on browser updates and JavaScript standards to take advantage of new capabilities as they become available.

Xulosa

AbortController API JavaScript-da asinxron operatsiyalarni boshqarish uchun qimmatli vositadir. By providing a mechanism for canceling requests and managing resources, it enables developers to build more responsive, performant, and user-friendly web applications. Understanding the core concepts, practical use cases, and advanced techniques of the AbortController API is essential for modern web development. By mastering this API, developers can create robust and efficient applications that provide a better user experience.