WinJS.xhr または HttpClient によるタイムアウト値の設定 (HTML)

[アーティクル]
12/22/2015

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

XMLHttpRequest を使っている場合には、タイムアウト値を直接設定できますが、Windows.Web.Http.HttpClient または WinJS.xhr ではそのようなことができません。ただし、WinJS.Promise オブジェクトならタイムアウト値を設定する方法があります。指定した時間内に要求が完了していなければ、WinJS.Promise.timeout を呼び出し、要求を確実に取り消すことができます。

「WinJS.xhr によるファイルのダウンロード方法」で作った XhrExample プロジェクトのコードで、WinJS.xhr 関数を WinJS.Promise.timeout への呼び出しでラップします。

WinJS.Promise.timeout をこのように使うのであれば、エラーが発生した場合に Promise を返さない done ではなく、Promise を返す then を使う必要があります。

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

このコードを実行すると、Web 要求はエラーなしで終了するため、DIV が緑色になります。要求が取り消されるとどうなるかを確認するには、タイムアウト期間を 200 ミリ秒に短くします。

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

これにより、Web 要求が取り消されます。DIV が赤に変わり、"Got error: Canceled" (エラー: 取り消されました) というメッセージが表示されます。

また、XhrExample プロジェクトからのコードにより、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";
        }));

WinJS.xhr または HttpClient によるタイムアウト値の設定 (HTML)

関連トピック

その他のリソース