Impostazione di valori di timeout con WinJS.xhr o HttpClient (HTML)

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Quando usi XMLHttpRequest puoi impostare valori di timeout direttamente. Questa operazione non è invece consentita con Windows.Web.Http.HttpClient o WinJS.xhr. Puoi tuttavia impostare timeout sugli oggetti WinJS.Promise. Chiamando WinJS.Promise.timeout, puoi assicurarti che la richiesta venga annullata se non viene completata entro l'intervallo specificato.

Usando il codice del progetto XhrExample creato in Scaricare un file con WinJS.xhr, esegui il wrapping della funzione WinJS.xhr in una chiamata a WinJS.Promise.timeout.

Considera che quando usi WinJS.Promise.timeout in questo modo, devi utilizzare then, che restituisce Promise in caso di errore, anziché done che non ha questo comportamento.

var xhrDiv = document.getElementById("xhrReport");

WinJS.Promise.timeout(1500, WinJS.xhr({ url: "https://www.microsoft.com" })
    .then(function complete(result) {
        xhrDiv.innerText = "Downloaded the page";
        xhrDiv.style.backgroundColor = "#00FF00";
        },
        function error(error){
            // The error thrown when xhr is canceled has a message property, not a statusText property.
            if (error.statusText)
                xhrDiv.innerHTML = "Got error: " + error.statusText;
            else
                xhrDiv.innerHTML = "Got error: " + error.message;
            xhrDiv.style.color = "#000000";
            xhrDiv.style.backgroundColor = "#FF0000";
        },
        function progress(result) {
            xhrDiv.innerText = "Ready state is " + result.readyState;
            xhrDiv.style.color = "#000000";
            xhrDiv.style.backgroundColor = "#0000FF";
    }));

Quando esegui questo codice, la richiesta Web dovrebbe essere completata senza errori e l'elemento dovrebbe diventare verde. Per verificare cosa succede quando la richiesta viene annullata, riduci il periodo di timeout a 200 millisecondi:

var xhrDiv = document.getElementById("xhrReport");

WinJS.Promise.timeout(200, WinJS.xhr({ url: "https://www.microsoft.com" })
    .then(function complete(result) {
        xhrDiv.innerText = "Downloaded the page";
        xhrDiv.style.backgroundColor = "#00FF00";
        },
        function error(error){
            // The error thrown when xhr is canceled has a message property, not a statusText property.
            if (error.statusText)
                xhrDiv.innerHTML = "Got error: " + error.statusText;
            else
                xhrDiv.innerHTML = "Got error: " + error.message;
            xhrDiv.style.color = "#000000";
            xhrDiv.style.backgroundColor = "#FF0000";
        }));

In questo caso, la richiesta Web dovrebbe essere annullata. L'elemento DIV dovrebbe diventare rosso e dovrebbe essere visualizzato il messaggio "Got error: Canceled".

Con il codice del progetto XhrExample possiamo anche mostrare come impostare un timeout quando si usa Windows.Web.Http.HttpClient.

var xhrDiv = document.getElementById("xhrReport");

var hc = new Windows.Web.Http.HttpClient();
var uri = new Windows.Foundation.Uri("https://www.microsoft.com");
WinJS.Promise.timeout(1500, hc.getAsync(uri)
    .then(function complete(result) {
        xhrDiv.innerText = "Downloaded the page:";
        xhrDiv.style.backgroundColor = "#009900"; // Set to dark green.
        result.content.readAsStringAsync().then(function complete(str) {
            xhrDiv.innerText += "Content:" + str;
            xhrDiv.style.backgroundColor = "#00FF00"; // Set to light green.
        })
    },
        function error(error) {
            // The error thrown when xhr is canceled has a message property, not a statusText property.
            if (error.statusText)
                xhrDiv.innerHTML = "Got error: " + error.statusText;
            else
                xhrDiv.innerHTML = "Got error: " + error.message;
            xhrDiv.style.color = "#000000";
            xhrDiv.style.backgroundColor = "#FF0000";
        },
        function progress(result) {
            xhrDiv.innerText = "Ready state is " + result.readyState;
            xhrDiv.style.color = "#000000";
            xhrDiv.style.backgroundColor = "#0000FF";
        }));