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을 사용하는 경우 오류가 있을 때 Promise를 반환하는 then을 반환하지 않는 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";
    }));

이 코드를 실행하면 웹 요청이 오류 없이 완료되고 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가 빨간색으로 바뀌며 "Got error: 취소됨"이라는 메시지가 표시됩니다.

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)

관련 항목

추가 리소스