JavaScript AbortController: Ovládanie zrušenia asynchrónnych operácií

V modernom webovom vývoji sú asynchrónne operácie všadeprítomné. Získavanie dát z API, nastavovanie časovačov a spracovanie interakcií používateľa často zahŕňa kód, ktorý beží nezávisle a potenciálne aj dlhšiu dobu. Existujú však scenáre, kde potrebujete tieto operácie zrušiť predtým, ako sa dokončia. Práve tu prichádza na pomoc rozhranie AbortController v JavaScripte. Poskytuje čistý a efektívny spôsob signalizácie požiadaviek na zrušenie operácií DOM a iných asynchrónnych úloh.

Pochopenie potreby zrušenia

Predtým, ako sa ponoríme do technických detailov, poďme pochopiť, prečo je zrušenie asynchrónnych operácií dôležité. Zvážte tieto bežné scenáre:

• Navigácia používateľa: Používateľ iniciuje vyhľadávací dotaz, ktorý spustí požiadavku API. Ak rýchlo prejde na inú stránku predtým, ako sa požiadavka dokončí, pôvodná požiadavka sa stane irelevantnou a mala by sa zrušiť, aby sa predišlo zbytočnej sieťovej prevádzke a potenciálnym vedľajším účinkom.
• Správa časového limitu: Nastavíte časový limit pre asynchrónnu operáciu. Ak sa operácia dokončí pred vypršaním časového limitu, mali by ste časový limit zrušiť, aby ste predišli redundantnému vykonávaniu kódu.
• Odmontovanie komponentu: V front-end frameworkoch, ako sú React alebo Vue.js, komponenty často vykonávajú asynchrónne požiadavky. Keď sa komponent odmontuje, všetky prebiehajúce požiadavky spojené s týmto komponentom by sa mali zrušiť, aby sa predišlo únikom pamäte a chybám spôsobeným aktualizáciou odmontovaných komponentov.
• Obmedzenia zdrojov: V prostrediach s obmedzenými zdrojmi (napr. mobilné zariadenia, vstavané systémy) môže zrušenie nepotrebných operácií uvoľniť cenné zdroje a zlepšiť výkon. Napríklad zrušenie sťahovania veľkého obrázka, ak používateľ prejde okolo tejto časti stránky.

Predstavujeme AbortController a AbortSignal

Rozhranie AbortController je navrhnuté tak, aby riešilo problém zrušenia asynchrónnych operácií. Skladá sa z dvoch kľúčových komponentov:

• AbortController: Tento objekt spravuje signál zrušenia. Má jednu metódu, abort(), ktorá sa používa na signalizáciu požiadavky na zrušenie.
• AbortSignal: Tento objekt reprezentuje signál, že operácia by sa mala zrušiť. Je spojený s AbortController a je odovzdaný asynchrónnej operácii, ktorá musí byť zrušiteľná.

Základné použitie: Zrušenie Fetch požiadaviek

Začnime s jednoduchým príkladom zrušenia požiadavky fetch:

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();

Vysvetlenie:

1. Vytvoríme inštanciu AbortController.
2. Získame pridružený AbortSignal z controller.
3. Odovzdáme signal do fetch options.
4. Ak potrebujeme zrušiť požiadavku, zavoláme controller.abort().
5. V bloku .catch() skontrolujeme, či je chyba AbortError. Ak áno, vieme, že požiadavka bola zrušená.

Spracovanie AbortError

Keď sa zavolá controller.abort(), požiadavka fetch bude odmietnutá s chybou AbortError. Je dôležité správne spracovať túto chybu vo vašom kóde. Ak to neurobíte, môže to viesť k nespracovaným odmietnutiam promise a neočakávanému správaniu.

Tu je robustnejší príklad so spracovaním chýb:

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; // Or throw the error to be handled further up
    } else {
      console.error('Fetch error:', error);
      throw error; // Re-throw the error to be handled further up
    }
  }
}

fetchData();

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

Osvedčené postupy pre spracovanie AbortError:

• Skontrolujte názov chyby: Vždy skontrolujte, či error.name === 'AbortError', aby ste sa uistili, že spracovávate správny typ chyby.
• Vráťte predvolenú hodnotu alebo znova vyhoďte: V závislosti od logiky vašej aplikácie možno budete chcieť vrátiť predvolenú hodnotu (napr. null) alebo znova vyhodiť chybu, ktorá sa má spracovať vyššie v zásobníku volaní.
• Vyčistite zdroje: Ak asynchrónna operácia pridelila nejaké zdroje (napr. časovače, poslucháčov udalostí), vyčistite ich v obslužnom programe AbortError.

Zrušenie časovačov pomocou AbortSignal

AbortSignal sa dá použiť aj na zrušenie časovačov vytvorených pomocou setTimeout alebo setInterval. To si vyžaduje trochu viac manuálnej práce, pretože vstavané funkcie časovača nepodporujú priamo AbortSignal. Musíte vytvoriť vlastnú funkciu, ktorá počúva signál prerušenia a vymaže časovač, keď sa spustí.

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();

Vysvetlenie:

1. Funkcia cancellableTimeout preberá callback, oneskorenie a AbortSignal ako argumenty.
2. Nastaví setTimeout a uloží ID časového limitu.
3. Pridá poslucháča udalostí do AbortSignal, ktorý počúva udalosť abort.
4. Keď sa spustí udalosť abort, poslucháč udalostí vymaže časový limit a odmietne promise.

Zrušenie poslucháčov udalostí

Podobne ako pri časovačoch, môžete použiť AbortSignal na zrušenie poslucháčov udalostí. To je užitočné najmä vtedy, keď chcete odstrániť poslucháčov udalostí spojených s komponentom, ktorý sa odmontováva.

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();

Vysvetlenie:

1. Odovzdáme signal ako možnosť metóde addEventListener.
2. Keď sa zavolá controller.abort(), poslucháč udalostí sa automaticky odstráni.

AbortController v React komponentoch

V React môžete použiť AbortController na zrušenie asynchrónnych operácií, keď sa komponent odmontuje. To je nevyhnutné na zabránenie únikom pamäte a chybám spôsobeným aktualizáciou odmontovaných komponentov. Tu je príklad pomocou hooku useEffect:

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(); // Cancel the fetch request when the component unmounts
    };
  }, []); // Empty dependency array ensures this effect runs only once on mount

  return (
    

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

export default MyComponent;

Vysvetlenie:

1. Vytvoríme AbortController v rámci hooku useEffect.
2. Odovzdáme signal do požiadavky fetch.
3. Vrátime funkciu vyčistenia z hooku useEffect. Táto funkcia sa zavolá, keď sa komponent odmontuje.
4. Vo funkcii vyčistenia zavoláme controller.abort() na zrušenie požiadavky fetch.

Pokročilé prípady použitia

Reťazenie AbortSignals

Niekedy možno budete chcieť zreťaziť viacero AbortSignal dohromady. Napríklad môžete mať nadradený komponent, ktorý potrebuje zrušiť operácie vo svojich podradených komponentoch. Môžete to dosiahnuť vytvorením nového AbortController a odovzdaním jeho signálu nadradenému aj podradenému komponentu.

Používanie AbortController s knižnicami tretích strán

Ak používate knižnicu tretej strany, ktorá priamo nepodporuje AbortSignal, možno budete musieť prispôsobiť svoj kód tak, aby fungoval s mechanizmom zrušenia knižnice. To môže zahŕňať zabalenie asynchrónnych funkcií knižnice do vlastných funkcií, ktoré spracovávajú AbortSignal.

Výhody používania AbortController

• Zlepšený výkon: Zrušenie nepotrebných operácií môže znížiť sieťovú prevádzku, využitie CPU a spotrebu pamäte, čo vedie k zlepšenému výkonu, najmä na zariadeniach s obmedzenými zdrojmi.
• Čistejší kód: AbortController poskytuje štandardizovaný a elegantný spôsob správy zrušenia, vďaka čomu je váš kód čitateľnejší a udržiavateľnejší.
• Prevencia únikov pamäte: Zrušenie asynchrónnych operácií spojených s odmontovanými komponentmi zabraňuje únikom pamäte a chybám spôsobeným aktualizáciou odmontovaných komponentov.
• Lepšia používateľská skúsenosť: Zrušenie irelevantných požiadaviek môže zlepšiť používateľskú skúsenosť tým, že zabráni zobrazovaniu zastaraných informácií a zníži vnímanú latenciu.

Kompatibilita prehliadača

AbortController je široko podporovaný v moderných prehliadačoch, vrátane Chrome, Firefox, Safari a Edge. Najnovšie informácie nájdete v tabuľke kompatibility na MDN Web Docs.

Polyfilly

Pre staršie prehliadače, ktoré natívne nepodporujú AbortController, môžete použiť polyfill. Polyfill je časť kódu, ktorá poskytuje funkčnosť novšej funkcie v starších prehliadačoch. Existuje niekoľko AbortController polyfillov dostupných online.

Záver

Rozhranie AbortController je výkonný nástroj na správu asynchrónnych operácií v JavaScripte. Používaním AbortController môžete písať čistejší, výkonnejší a robustnejší kód, ktorý elegantne spracováva zrušenie. Či už získavate dáta z API, nastavujete časovače alebo spravujete poslucháčov udalostí, AbortController vám môže pomôcť zlepšiť celkovú kvalitu vašich webových aplikácií.

Ďalšie čítanie

• MDN Web Docs: AbortController
• WHATWG DOM Living Standard: AbortController