Définition de valeurs de temporisation avec WinJS.xhr ou HttpClient (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Vous pouvez définir des valeurs de délai d’expiration directement avec XMLHttpRequest, mais pas avec Windows.Web.Http.HttpClient ou WinJS.xhr. Il existe toutefois une méthode permettant de définir des délais d’expiration sur les objets WinJS.Promise. Si vous appelez WinJS.Promise.timeout, vous avez la certitude que la demande sera annulée si elle n’a pas abouti dans le délai imparti.

Dans le code du projet XhrExample créé dans Comment télécharger un fichier avec WinJS.xhr, incluez dans un wrapper la fonction WinJS.xhr dans un appel à WinJS.Promise.timeout.

Si vous utilisez WinJS.Promise.timeout de cette façon, vous devez recourir à then, qui retourne Promise en cas d’erreur, au lieu de done, qui ne retourne rien.

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";
    }));

Lorsque vous exécutez ce code, la demande Web doit se terminer sans erreur et vous devez voir le DIV devenir vert. Pour afficher ce qui se produit lorsque la demande est annulée, raccourcissez la période d’expiration à 200 millisecondes :

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";
        }));

Dans ce cas précis, la demande Web doit être annulée. Le DIV doit devenir rouge, et vous devez voir le message « Erreur obtenue : annulé ».

En utilisant le code du projet XhrExample, nous pouvons également montrer comment définir un délai d’expiration lors de l’utilisation de 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";
        }));