JavaScript: gestire i timeout nelle richieste AJAX con la proprietà timeout

Una proprietà molto utile delle richieste AJAX è 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 millisecondi:

const xhr = new XMLHttpRequest();

xhr.open("GET", '/api/test', true);
xhr.timeout = 10000;
xhr.ontimeout = timeoutFired;
xhr.send(null);

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.