빠른 시작: promise 사용(HTML)

Applies to Windows and Windows Phone

일부 종류의 처리를 비동기적으로 수행하여 UI의 응답 속도를 향상시키고 앱의 UI 스레드는 사용자 입력에 자유롭게 응답하도록 유지할 수 있습니다. 이 빠른 시작에서는 Windows 런타임 앱에서 비동기 프로그래밍을 수행하는 방법을 보여 줍니다.

JavaScript용 Windows 라이브러리 및 Windows 런타임의 비동기 API는 JavaScript에서 promise로 표현되며 Common JS Promises/A 제안에 정의되어 있습니다. 비동기 프로그래밍 및 promise에 대한 자세한 내용은 JavaScript의 비동기 프로그래밍에서 확인할 수 있습니다.

Promise를 사용할 때 일부 오류 처리를 포함함으로써 보다 강력한 코드를 만들 수 있습니다. 이 빠른 시작에서는 오류를 처리할 수 있는 여러 방법 중 하나만 소개하지만 JavaScript에서 promise를 사용한 오류 처리 방법에서 더 많은 내용을 학습할 수 있습니다.

사전 요구 사항

이 빠른 시작을 완료하려면 WinJS를 사용하는 기본 Windows 런타임 앱을 만들 수 있어야 합니다. 첫 번째 앱을 만드는 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 런타임 앱 만들기를 참조하세요.

지침

1. Promise를 반환하는 함수 사용

Promise의 간단한 예제를 살펴보기 위해, URL을 가져와 해당 사이트에 접속한 다음 성공 여부를 보고하는 앱을 만들겠습니다.

  1. TestPromise라는 빈 Windows 런타임 앱을 만듭니다.

  2. INPUT 요소를 추가합니다.

    
    <div>
    <input id="inUrl" />
    </div>
    
    
  3. URL의 결과를 표시하는 DIV 요소를 추가합니다.

    
    <div id="divResult">Result</div>
    
    
  4. 다음 스타일 지정 명령을 "default.css"에 추가합니다.
    
    input {
       
    }
    
    
  5. INPUT 요소에 대한 변경 처리기를 추가합니다. WinJS.Utilities.ready 함수의 일부로 이를 수행할 수 있습니다. 페이지가 구문 분석된 후 모든 리소스가 로드되기 전에 실행되는 DOMContentLoaded 이벤트 직후에 호출됩니다.

    다음 코드를 "default.js"의 app.onactivated 이벤트 처리기에 추가합니다.

    
    WinJS.Utilities.ready(function () {
        var input = document.getElementById("inUrl");
        input.addEventListener("change", changeHandler);
      }, false);
    
    
  6. 변경 처리기에서 사용자가 입력한 URL에 전달하는 xhr을 호출하고, 해당 결과로 결과 DIV를 업데이트합니다. xhr 함수는 Promise를 반환하므로 promise의 then 또는 done 함수를 사용하여 UI를 업데이트할 수 있습니다. then 메서드는 xhr 함수가 XmlHttpRequest를 성공적으로 만들거나 오류를 발생시키면 바로 실행됩니다. done 함수도 해당 함수 내에서 처리되지 않은 오류를 발생시킨다는 점을 제외하면 동일합니다.

    최대 3개의 매개 변수(promise가 오류 없이 수행될 경우 이를 처리하는 completed 함수, 오류를 처리하는 error 함수, 완료되기까지 promise의 진행 상황을 표시하는 progress 함수)를 then 또는 done에 제공할 수 있습니다. 지금은 completed 함수를 추가하는 방법만 설명하고, 오류 처리는 다른 단계에서 알아보겠습니다. completed 함수는 결과 DIV의 배경색을 녹색으로, 텍스트를 "성공"으로 설정합니다.

    
    function changeHandler(e) {
        var input = e.target;
        var resDiv = document.getElementById("divResult");
    
        WinJS.xhr({ url: e.target.value }).then(function completed(result) {
            if (result.status === 200) {
                 resDiv.style.backgroundColor = "lightGreen";
                 resDiv.innerText = "Success";
             }
         });
     }
    
    
  7. 앱을 빌드 및 디버그한 다음 URL을 입력합니다. URL을 입력한 후 변경 이벤트가 발생하도록 하려면 INPUT 컨트롤 외부를 클릭해야 할 수 있습니다. URL이 유효한 경우 결과 DIV는 녹색으로 바뀌고 "성공"으로 표시됩니다. 잘못된 URL을 입력하면 아무 변화도 일어나지 않습니다.

2. 오류 처리

  1. 오류 처리를 수행하려면 성공 단추의 배경색을 빨강으로, 텍스트를 오류 메시지로 설정하는 then 함수의 내부에 error 함수를 추가합니다.

    
    function changeHandler(e) {
        var input = e.target;
        var resDiv = document.getElementById("divResult");
    
        WinJS.xhr({url: e.target.value}).then(
            function fulfilled (result) {
                if (result.status === 200) {
                    resDiv.style.backgroundColor = "lightGreen";
                    resDiv.innerText = "Success";
                }
            }, 
            function error(e) {
                resDiv.style.backgroundColor = "red";
    
                if (e.message != undefined) {  // If the URL is really malformed or blank.
                resDiv.innerText = e.message;
                }
                else if (e.statusText != undefined) { // If an XmlHttpRequest is made.
                    resDiv.innerText = e.statusText;
                }
                else {    
                    resDiv.innerText = "Error";
                }
        });
    }
    
    
  2. 앱을 빌드하고 디버그합니다. 잘못된 URL을 입력할 경우 단추가 빨강으로 변하고 오류 메시지가 표시됩니다.

요약 및 다음 단계

지금까지 promise를 반환하는 함수의 사용 방법과 오류 처리 중 한 가지 유형을 수행하는 방법에 대해 알아보았습니다.

다음 항목에서는 promise를 사용하는 보다 복잡한 시나리오에 대해 설명합니다.

관련 항목

JavaScript의 비동기 프로그래밍

 

 

표시:
© 2014 Microsoft