M

MLOG

O'zbek

JavaScript AbortController-dan foydalanib, fetch so'rovlari, taymerlar va boshqa asinxron operatsiyalarni samarali bekor qilishni o'rganing, bu esa toza va unumdor kodni ta'minlaydi.

JavaScript AbortController: Asinxron operatsiyalarni bekor qilishni o'zlashtirish

Zamonaviy veb-dasturlashda asinxron operatsiyalar hamma joyda mavjud. API'lardan ma'lumotlarni olish, taymerlarni o'rnatish va foydalanuvchi bilan o'zaro aloqalarni boshqarish ko'pincha mustaqil va uzoq vaqt davomida ishlashi mumkin bo'lgan kodni o'z ichiga oladi. Biroq, bu operatsiyalarni ular tugashidan oldin bekor qilish kerak bo'lgan holatlar mavjud. Aynan shu yerda JavaScript'dagi AbortController interfeysi yordamga keladi. U DOM operatsiyalari va boshqa asinxron vazifalarga bekor qilish so'rovlarini signal qilishning toza va samarali usulini taqdim etadi.

Bekor qilish zaruratini tushunish

Texnik tafsilotlarga sho'ng'ishdan oldin, asinxron operatsiyalarni bekor qilish nima uchun muhimligini tushunib olaylik. Ushbu keng tarqalgan holatlarni ko'rib chiqing:

AbortController va AbortSignal bilan tanishuv

AbortController interfeysi asinxron operatsiyalarni bekor qilish muammosini hal qilish uchun mo'ljallangan. U ikkita asosiy komponentdan iborat:

Asosiy foydalanish: Fetch so'rovlarini bekor qilish

Keling, fetch so'rovini bekor qilishning oddiy misolidan boshlaylik:


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:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// To cancel the fetch request:
controller.abort();

Tushuntirish:

  1. Biz AbortController obyektini yaratamiz.
  2. Biz controller'dan bog'liq AbortSignalni olamiz.
  3. Biz signalni fetch parametrlariga uzatamiz.
  4. Agar so'rovni bekor qilishimiz kerak bo'lsa, controller.abort() ni chaqiramiz.
  5. .catch() blokida xatoning AbortError ekanligini tekshiramiz. Agar shunday bo'lsa, so'rov bekor qilinganini bilamiz.

AbortError xatoligini qayta ishlash

controller.abort() chaqirilganda, fetch so'rovi AbortError bilan rad etiladi. Kodingizda bu xatolikni to'g'ri qayta ishlash juda muhim. Buni e'tiborsiz qoldirish, qayta ishlanmagan promise'larning rad etilishiga va kutilmagan xatti-harakatlarga olib kelishi mumkin.

Bu yerda xatoliklarni qayta ishlash bilan yanada mustahkamroq misol keltirilgan:


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

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data', { signal });
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log('Data:', data);
    return data;
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
      return null; // Yoki xatolikni yuqoriroq darajada qayta ishlash uchun yuborish
    } else {
      console.error('Fetch error:', error);
      throw error; // Xatolikni yuqoriroq darajada qayta ishlash uchun qayta yuborish
    }
  }
}

fetchData();

// To cancel the fetch request:
controller.abort();

AbortError bilan ishlash bo'yicha eng yaxshi amaliyotlar:

AbortSignal yordamida taymerlarni bekor qilish

AbortSignal shuningdek, setTimeout yoki setInterval bilan yaratilgan taymerlarni bekor qilish uchun ham ishlatilishi mumkin. Bu biroz ko'proq qo'l mehnatini talab qiladi, chunki o'rnatilgan taymer funksiyalari to'g'ridan-to'g'ri AbortSignalni qo'llab-quvvatlamaydi. Siz bekor qilish signalini tinglaydigan va u ishga tushganda taymerni tozalaydigan maxsus funksiya yaratishingiz kerak.


function cancellableTimeout(callback, delay, signal) {
  let timeoutId;

  const timeoutPromise = new Promise((resolve, reject) => {
    timeoutId = setTimeout(() => {
      resolve(callback());
    }, delay);

    signal.addEventListener('abort', () => {
      clearTimeout(timeoutId);
      reject(new Error('Timeout Aborted'));
    });
  });

  return timeoutPromise;
}

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


cancellableTimeout(() => {
  console.log('Timeout executed');
}, 2000, signal)
.then(() => console.log("Timeout finished successfully"))
.catch(err => console.log(err));

// To cancel the timeout:
controller.abort();

Tushuntirish:

  1. cancellableTimeout funksiyasi argument sifatida callback, kechikish va AbortSignalni qabul qiladi.
  2. U setTimeout o'rnatadi va taymer ID'sini saqlaydi.
  3. U AbortSignalga abort hodisasini tinglaydigan hodisa tinglovchisini qo'shadi.
  4. abort hodisasi ishga tushganda, hodisa tinglovchisi taymerni tozalaydi va promise'ni rad etadi.

Hodisa tinglovchilarni bekor qilish

Taymerlarga o'xshab, siz hodisa tinglovchilarni bekor qilish uchun AbortSignaldan foydalanishingiz mumkin. Bu, ayniqsa, o'chirilayotgan komponent bilan bog'liq hodisa tinglovchilarni olib tashlashni xohlaganingizda foydalidir.


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

const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log('Button clicked!');
}, { signal });

// To cancel the event listener:
controller.abort();

Tushuntirish:

  1. Biz signalni addEventListener metodiga parametr sifatida uzatamiz.
  2. controller.abort() chaqirilganda, hodisa tinglovchisi avtomatik ravishda olib tashlanadi.

React komponentlarida AbortController

React'da siz komponent o'chirilganda (unmount) asinxron operatsiyalarni bekor qilish uchun AbortControllerdan foydalanishingiz mumkin. Bu xotira sizib chiqishining va o'chirilgan komponentlarni yangilash natijasida yuzaga keladigan xatoliklarning oldini olish uchun juda muhimdir. Mana useEffect hookidan foydalanishga misol:


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

function MyComponent() {
  const [data, setData] = useState(null);

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

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

    fetchData();

    return () => {
      controller.abort(); // Komponent o'chirilganda fetch so'rovini bekor qilish
    };
  }, []); // Bo'sh bog'liqliklar massivi ushbu effekt faqat bir marta o'rnatilganda ishlashini ta'minlaydi

  return (
    

      {data ? (
        
Data: {JSON.stringify(data)}

      ) : (
        
Loading...

      )}
    

  );
}

export default MyComponent;

Tushuntirish:

  1. Biz useEffect hook ichida AbortController yaratamiz.
  2. Biz signalni fetch so'roviga uzatamiz.
  3. Biz useEffect hookidan tozalash funksiyasini qaytaramiz. Bu funksiya komponent o'chirilganda chaqiriladi.
  4. Tozalash funksiyasi ichida biz fetch so'rovini bekor qilish uchun controller.abort() ni chaqiramiz.

Ilg'or foydalanish holatlari

AbortSignal'larni zanjirlash

Ba'zan siz bir nechta AbortSignalni bir-biriga zanjir qilishni xohlashingiz mumkin. Masalan, sizda ota-komponent bo'lishi mumkin, u o'zining bola komponentlaridagi operatsiyalarni bekor qilishi kerak. Bunga yangi AbortController yaratib, uning signalini ham ota, ham bola komponentlarga uzatish orqali erishishingiz mumkin.

Uchinchi tomon kutubxonalari bilan AbortController'dan foydalanish

Agar siz AbortSignalni to'g'ridan-to'g'ri qo'llab-quvvatlamaydigan uchinchi tomon kutubxonasidan foydalanayotgan bo'lsangiz, kodingizni kutubxonaning bekor qilish mexanizmi bilan ishlashga moslashtirishingiz kerak bo'lishi mumkin. Bu kutubxonaning asinxron funksiyalarini AbortSignalni boshqaradigan o'zingizning funksiyalaringizga o'rashni o'z ichiga olishi mumkin.

AbortController'dan foydalanishning afzalliklari

Brauzer mosligi

AbortController zamonaviy brauzerlarda, jumladan Chrome, Firefox, Safari va Edge'da keng qo'llab-quvvatlanadi. Eng so'nggi ma'lumotlar uchun MDN Web Docs saytidagi moslik jadvalini tekshirishingiz mumkin.

Polifillar

AbortControllerni tabiiy ravishda qo'llab-quvvatlamaydigan eski brauzerlar uchun siz polifildan foydalanishingiz mumkin. Polifil - bu eski brauzerlarda yangi funksiyaning imkoniyatlarini ta'minlaydigan kod qismidir. Onlaynda bir nechta AbortController polifillari mavjud.

Xulosa

AbortController interfeysi JavaScript'dagi asinxron operatsiyalarni boshqarish uchun kuchli vositadir. AbortControllerdan foydalanib, siz bekor qilishni osonlikcha boshqaradigan toza, unumdor va mustahkam kod yozishingiz mumkin. API'lardan ma'lumotlarni olyapsizmi, taymerlarni o'rnatyapsizmi yoki hodisa tinglovchilarni boshqaryapsizmi, AbortController veb-ilovalaringizning umumiy sifatini yaxshilashga yordam beradi.

Qo'shimcha o'qish uchun