Gestire i timeout delle richieste AJAX in JavaScript

I browser supportano proprietà e metodi molto utili dell'oggetto XMLHttpRequest definiti nelle specifiche ufficiali del W3C. Una proprietà molto utile è sicuramente timeout, che ci permette di impostare un limite di tempo per l'attesa della risposta di una richiesta AJAX. Vediamone i dettagli.

Questa proprietà accetta un valore in millesimi di secondo:

const request = (method = 'GET'. url = location.href, data = null, timeout = 5000, timeoutFired = () => {}) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    xhr.timeout = timeout;
    xhr.ontimeout = timeoutFired;
    xhr.send(data);
};

Le specifiche affermano che:

The amount of milliseconds a request can take before being terminated. Initially zero. Zero means there is no timeout. When set: throws an InvalidAccessError exception if the synchronous flag is set when there is an associated XMLHttpRequest document.

In genere i browser gestiscono l'eccezione sollevata impostando l'oggetto restituito sul valore null, sia che si tratti di oggetti di tipo XML che di oggetti JSON. Alcuni browser estendono il valore null anche alla proprietà responseText.

Come si può notare, l'evento associato al timeout è ontimeout, che esegue il codice del gestore di eventi sotto forma di funzione di callback.