使用 WinJS.xhr 或 HttpClient 设置超时值 (HTML)

项目
12/11/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 时，你需要使用 then（它在发生错误时返回 Promise），而不使用不执行此返回操作的 done。

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 应该会变为红色，你应该会看到消息“收到错误: 已取消”。

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

相关主题

其他资源