JavaScript AbortController: Soʻrovlarni bekor qilish usullarini oʻzlashtirish

Zamonaviy veb-ishlab chiqishda asinxron operatsiyalar keng tarqalgan. Bu masofaviy serverdan ma'lumotlarni olish, fayllarni yuklash yoki fonda murakkab hisob-kitoblarni bajarish bo'ladimi, JavaScript asosan promiselar va asinxron funksiyalarga tayanadi. Biroq, nazoratsiz asinxron operatsiyalar unumdorlik muammolariga, resurslarning behuda sarflanishiga va kutilmagan xatti-harakatlarga olib kelishi mumkin. Aynan shu yerda AbortController yordamga keladi. Ushbu maqola JavaScript'ning AbortController yordamida soʻrovlarni bekor qilish usullarini oʻzlashtirish boʻyicha keng qamrovli qoʻllanmani taqdim etadi, bu sizga global auditoriya uchun yanada mustahkam va samarali veb-ilovalar yaratish imkonini beradi.

AbortController nima?

AbortController — bu bir yoki bir nechta veb-soʻrovlarni bekor qilish imkonini beruvchi oʻrnatilgan JavaScript API. U operatsiyani bekor qilish kerakligi haqida signal berish usulini taqdim etadi, bu esa keraksiz tarmoq trafigi va resurs sarfini oldini oladi. AbortController bekor qilinadigan asinxron operatsiyaga uzatiladigan AbortSignal bilan birgalikda ishlaydi. Ular birgalikda asinxron vazifalarni boshqarish uchun kuchli va moslashuvchan mexanizmni taklif qiladi.

Nima uchun AbortController'dan foydalanish kerak?

Bir nechta stsenariylar AbortController'dan foydalanishdan manfaat koʻradi:

• Yaxshilangan unumdorlik: Endi kerak boʻlmagan amaldagi soʻrovlarni bekor qilish tarmoq trafigini kamaytiradi va resurslarni boʻshatadi, bu esa tezroq va sezgirroq ilovalarga olib keladi.
• Poyga holatlarining oldini olish: Bir nechta soʻrovlar ketma-ket tez boshlanganda, faqat eng soʻnggi soʻrov natijasi muhim boʻlishi mumkin. Oldingi soʻrovlarni bekor qilish poyga holatlarining oldini oladi va maʼlumotlarning mustahkamligini taʼminlaydi.
• Foydalanuvchi tajribasini yaxshilash: Siz yozayotganingizda qidirish yoki dinamik kontentni yuklash kabi stsenariylarda eskirgan soʻrovlarni bekor qilish yanada silliq va sezgir foydalanuvchi tajribasini taʼminlaydi.
• Resurslarni boshqarish: Mobil qurilmalar va resurslari cheklangan muhitlar batareya quvvati va oʻtkazuvchanlikni tejash uchun uzoq davom etadigan yoki keraksiz soʻrovlarni bekor qilishdan foyda koʻradi.

Asosiy foydalanish

Bu yerda AbortController'ni fetch API bilan qanday ishlatishni koʻrsatuvchi asosiy misol keltirilgan:

1-misol: Oddiy Fetch soʻrovini bekor qilish

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

fetch('https://api.example.com/data', { signal })
 .then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json();
 })
 .then(data => {
  console.log(data);
 })
 .catch(error => {
  if (error.name === 'AbortError') {
   console.log('Fetch aborted');
  } else {
   console.error('Fetch error:', error);
  }
 });

// Abort the fetch request after 5 seconds
setTimeout(() => {
 controller.abort();
}, 5000);

            

              
                Copy
              
            
          

Tushuntirish:

• Yangi AbortController yaratiladi.
• AbortController'ning signal xususiyati fetch parametrlariga uzatiladi.
• controller.abort()'ni chaqirish orqali soʻrovni 5 soniyadan keyin bekor qilish uchun setTimeout funksiyasidan foydalaniladi.
• catch bloki soʻrov bekor qilinganda yuzaga keladigan AbortError'ni qayta ishlaydi.

Murakkab bekor qilish usullari

Asosiy misoldan tashqari, AbortController'dan samarali foydalanish uchun bir nechta murakkab usullar mavjud.

1-usul: Komponent oʻchirilganda bekor qilish (React misoli)

React kabi komponentlarga asoslangan freymvorklarda komponent oʻrnatilganda soʻrovlarni boshlash va komponent oʻchirilganda ularni bekor qilish odatiy holdir. Bu xotira sizib chiqishining oldini oladi va ilovaning endi koʻrinmaydigan komponentlar uchun maʼlumotlarni qayta ishlashni davom ettirmasligini taʼminlaydi.

            import React, { useState, useEffect } from 'react';

function DataComponent() {
 const [data, setData] = useState(null);
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState(null);

 useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  const fetchData = async () => {
   try {
    const response = await fetch('https://api.example.com/data', { signal });
    if (!response.ok) {
     throw new Error(`HTTP error! status: ${response.status}`);
    }
    const json = await response.json();
    setData(json);
   } catch (error) {
    if (error.name === 'AbortError') {
     console.log('Fetch aborted');
    } else {
     setError(error);
    }
   } finally {
    setLoading(false);
   }
  };

  fetchData();

  return () => {
   controller.abort(); // Cleanup function to abort the request
  };
 }, []); // Empty dependency array ensures this runs only on mount/unmount

 if (loading) return 
Loading...
;
 if (error) return 
Error: {error.message}
;

 return (
  

   
Data:
   
{JSON.stringify(data, null, 2)}
  
 );
}

export default DataComponent;

            

              
                Copy
              
            
          

Tushuntirish:

• useEffect hook'i komponent oʻrnatilganda yon taʼsirlarni (bu holda maʼlumotlarni olish) bajarish uchun ishlatiladi.
• AbortController useEffect hook'i ichida yaratiladi.
• useEffect tomonidan qaytarilgan tozalash funksiyasi komponent oʻchirilganda controller.abort()'ni chaqiradi, bu esa davom etayotgan har qanday soʻrovning bekor qilinishini taʼminlaydi.
• useEffect'ga boʻsh qaramlik massivi ([]) uzatiladi, bu effekt faqat oʻrnatilganda bir marta va oʻchirilganda bir marta ishga tushishi kerakligini bildiradi.

2-usul: Debouncing va Throttling

Debouncing va throttling — bu funksiyaning bajarilish tezligini cheklash uchun ishlatiladigan usullar. Ular odatda siz yozayotganingizda qidirish yoki oyna oʻlchamini oʻzgartirish kabi stsenariylarda qoʻllaniladi, bu yerda tez-tez sodir boʻladigan hodisalar qimmat operatsiyalarni ishga tushirishi mumkin. AbortController yangi hodisa yuzaga kelganda oldingi soʻrovlarni bekor qilish uchun debouncing va throttling bilan birgalikda ishlatilishi mumkin.

Misol: AbortController bilan Debounced qidiruv

            function debouncedSearch(query, delay = 300) {
 let controller = null; // Keep the controller in the scope
 return function() {
    if (controller) {
      controller.abort(); // Abort previous request
    }

    controller = new AbortController(); // Create a new AbortController
    const signal = controller.signal;
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        fetch(`https://api.example.com/search?q=${query}`, { signal })
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json(); 
          })
          .then(data => {
            resolve(data);
          })
          .catch(error => {
              if (error.name === 'AbortError') {
                console.log('Search Aborted for: ' + query);
              } else {
                reject(error);
              }
          });
      }, delay);
    });
  };
}

// Usage Example:
const search = debouncedSearch('Example Query');
search().then(results => console.log(results)).catch(error => console.error(error)); //Initial search
search().then(results => console.log(results)).catch(error => console.error(error)); //Another search; aborts the previous
search().then(results => console.log(results)).catch(error => console.error(error)); //...and another

            

              
                Copy
              
            
          

Tushuntirish:

• debouncedSearch funksiyasi qidiruv funksiyasining debounced versiyasini qaytaradi.
• Debounced funksiyasi har safar chaqirilganda, u avval controller.abort() yordamida har qanday oldingi soʻrovlarni bekor qiladi.
• Keyin yangi AbortController yaratiladi va yangi soʻrovni boshlash uchun ishlatiladi.
• setTimeout funksiyasi soʻrov yuborilishidan oldin kechikishni kiritadi, bu qidiruv faqat foydalanuvchi maʼlum bir vaqt davomida yozishni toʻxtatgandan keyingina amalga oshirilishini taʼminlaydi.

3-usul: Bir nechta AbortSignal'larni birlashtirish

Baʼzi hollarda, soʻrovni bir nechta shartlarga asoslanib bekor qilishingiz kerak boʻlishi mumkin. Masalan, agar taymaut yuzaga kelsa yoki foydalanuvchi sahifadan chiqib ketsa, soʻrovni bekor qilishni xohlashingiz mumkin. Bunga bir nechta AbortSignal nusxalarini bitta signalga birlashtirish orqali erishishingiz mumkin.

Bu usul toʻgʻridan-toʻgʻri mahalliy tarzda qoʻllab-quvvatlanmaydi va siz odatda oʻzingizning birlashtirish mantigʻingizni amalga oshirishingiz kerak boʻladi.

4-usul: Taymautlar va muddatlar

Soʻrovlar uchun taymautlarni oʻrnatish ularning cheksiz osilib qolishining oldini olish uchun juda muhimdir. AbortController yordamida taymautlarni osongina amalga oshirish mumkin.

            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); // Clear timeout if request completes successfully

  if (!response.ok) {
   throw new Error(`HTTP error! status: ${response.status}`);
  }
  return await response.json();
 } catch (error) {
  clearTimeout(timeoutId); // Clear timeout in case of any error
  throw error;
 }
}

// Usage:
fetchDataWithTimeout('https://api.example.com/data', 3000) // 3 seconds timeout
 .then(data => console.log(data))
 .catch(error => console.error(error));

            

              
                Copy
              
            
          

Tushuntirish:

• fetchDataWithTimeout funksiyasi URL va taymaut qiymatini argument sifatida qabul qiladi.
• Belgilangan taymautdan keyin soʻrovni bekor qilish uchun setTimeout funksiyasi ishlatiladi.
• Soʻrov muvaffaqiyatli yakunlansa yoki xatolik yuzaga kelsa, taymautni tozalashni taʼminlash uchun clearTimeout funksiyasi try va catch bloklarida chaqiriladi.

Global jihatlar va eng yaxshi amaliyotlar

AbortController bilan global kontekstda ishlaganda quyidagilarni hisobga olish muhim:

• Mahalliylashtirish: Soʻrovni bekor qilish bilan bogʻliq xato xabarlari va foydalanuvchi interfeysi elementlari turli mintaqalardagi foydalanuvchilar uchun tushunarli boʻlishini taʼminlash uchun mahalliylashtirilishi kerak.
• Tarmoq sharoitlari: Turli geografik joylashuvlarda tarmoq sharoitlari sezilarli darajada farq qilishi mumkin. Turli mintaqalarda kutilayotgan tarmoq kechikishi va oʻtkazuvchanligiga qarab taymaut qiymatlari va bekor qilish strategiyalarini sozlang.
• Server tomonidagi mulohazalar: Server tomonidagi API endpointlaringiz bekor qilingan soʻrovlarni toʻgʻri qayta ishlashiga ishonch hosil qiling. Masalan, agar klient soʻrovni bekor qilgan boʻlsa, uni qayta ishlashni toʻxtatish mexanizmini joriy qilishingiz mumkin.
• Qulaylik (Accessibility): Soʻrov bekor qilinganda foydalanuvchilarga aniq va informatsion fikr-mulohazalarni taqdim eting. Bu foydalanuvchilarga soʻrov nima uchun bekor qilinganini tushunishga va tegishli choralar koʻrishga yordam beradi.
• Mobil va Desktop: Mobil foydalanuvchilarda ulanishlar beqarorroq boʻlishi mumkin, shuning uchun mobil qurilmalar uchun taymautlar va xatoliklarni qayta ishlash mustahkam ekanligiga ishonch hosil qiling.
• Turli brauzerlar: AbortController API'si bilan bogʻliq har qanday muvofiqlik muammolarini tekshirish uchun turli brauzerlar va versiyalarda sinovdan oʻtkazishni oʻylab koʻring.

Xatoliklarni qayta ishlash

AbortController'dan foydalanishda xatoliklarni toʻgʻri qayta ishlash juda muhim. Har doim AbortError'ni tekshiring va uni mos ravishda qayta ishlang.

            try {
 // ... fetch code ...
} catch (error) {
 if (error.name === 'AbortError') {
  console.log('Request was aborted');
  // Perform any necessary cleanup or UI updates
 } else {
  console.error('An error occurred:', error);
  // Handle other errors
 }
}

            

              
                Copy
              
            
          

Xulosa

JavaScript AbortController asinxron operatsiyalarni boshqarish va veb-ilovalarning unumdorligi va sezgirligini oshirish uchun kuchli vositadir. Asosiy foydalanish va ilgʻor usullarni tushunib, siz global auditoriya uchun yaxshiroq foydalanuvchi tajribasini taqdim etadigan yanada mustahkam va samarali ilovalar yaratishingiz mumkin. Ilovalaringizda soʻrovlarni bekor qilishni amalga oshirishda mahalliylashtirish, tarmoq sharoitlari va server tomonidagi mulohazalarni hisobga olishni unutmang.

Yuqorida keltirilgan usullardan foydalangan holda, ishlab chiquvchilar asinxron operatsiyalarni ishonchli boshqarishi, resurslardan foydalanishni optimallashtirishi va turli muhitlar hamda global auditoriyalar uchun ajoyib foydalanuvchi tajribasini taqdim etishi mumkin.

Ushbu keng qamrovli qoʻllanma JavaScript'ning AbortController yordamida soʻrovlarni bekor qilish usullarini oʻzlashtirish uchun mustahkam poydevor yaratishi kerak. Dasturlashda omad!