使用 WinJS.xhr 或 HttpClient 設定逾時值 (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

使用 XMLHttpRequest 時，可以直接設定逾時值，但是使用 Windows.Web.Http.HttpClient 或 WinJS.xhr 時則無法執行此動作。不過，有一個方法可以在 WinJS.Promise 物件上設定逾時。您可以透過呼叫 WinJS.Promise.timeout，確認如果要求在指定時間內沒有完成就取消要求。

使用在如何使用 WinJS.xhr 下載檔案中建立的 XhrExample 專案程式碼，將 WinJS.xhr 函式包在對 WinJS.Promise.timeout 的呼叫中。

請注意，當您用這種方式使用 WinJS.Promise.timeout 時，需要使用 then，因為它會在發生錯誤時傳回 Promise，不要使用 done，因為它不會傳回 Promise。

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

當您執行此程式碼時，網頁要求應可順利完成 (沒有錯誤)，而您應該會看到 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";
        }));

在此情況下，應該會取消網頁要求。DIV 應該會變成紅色，而您應該會看到訊息「發生錯誤：已取消」。

使用 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)

相關主題

其他資源