OUno dei più frequenti problemi quando si ha a che fare con funzioni asincrone è quello di riuscire a gestire la cancellazione delle richieste HTTP.
Quando per esempio l’utente cambia pagina prima che termini il fetch dei dati, è utile annullare la richiesta in ottica di risparmio di risorse. Ed è esattamente a questo punto che ci viene incontro l’AbortController.
Cos’è e Come si usa
AbortController è un’interfaccia che permette di annullare una o più richieste.
Questo controller genera un signal, che viene passato alla funzione asincrona.
Si andrà così a risparmiare banda e a ridurre il carico al server; l’applicazione potrà dunque reagire più rapidamente alla navigazione.
Quando vogliamo interrompere un’operazione, è sufficiente creare un’istanza di AbortController: questa ci fornirà un oggetto AbortSignal, che useremo per comunicare con l’operazione asincrona.
È poi sufficiente utilizzare il metodo abort(): l’operazione in ascolto si interrompe e lancia un’eccezione.
La funzione fetch viene chiamata e le viene passato il signal come opzione.
Chiamando controller.abort(), la Promise verrà rigettata.
Abort multiplo
Molto utile è la possibilità di applicare lo stesso signal a più operazioni, in modo da poterle abortire con un unico metodo.
Nel momento in cui il metodo controller.abort() viene chiamato, tutte le operazioni che condividono lo stesso signal vengono terminate.
Reason
Il metodo abort() accetta un parametro opzionale che può essere qualsiasi valore valido per JavaScript. Se non fornito, il valore di default è una DOMException “AbortError”.
La reason può essere poi recuperata nel signal.
Mentre, se non viene fornito alcun parametro, il log restituirà:
Considerazioni
In quanto a compatibilità, AbortController e signal sono ampiamente supportati dai browser.
L’AbortController può essere integrato in funzioni wrapper al fine di renderne più comodo l’uso in un applicativo, mantenendo il codice pulito.
Anche se, in alcuni casi, l’efficientamento dell’esperienza utente potrebbe non beneficiare di grandi miglioramenti, è sempre bene limitare l’esecuzione di codice non necessario.
In tutti gli altri casi, invece, annullare richieste diventate inutili aumenterà le performance e l’esperienza utente.
Autore: Gianluca La Rosa, Front-end Developer @ Bitrock
