promise를 사용할 때 오류 처리 방법

Promise를 사용할 때 오류 처리 방법(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

promise의 각 단계에서 예외 처리 방법을 알기가 어려운 경우가 있습니다. 빠른 시작: JavaScript에서 promise 사용에서 JavaScript용 Windows 라이브러리 기본 promise를 사용하고 then 함수에서 오류를 처리하는 방법을 살펴보았습니다.

이 항목에서는 promise를 사용할 때 오류를 발견하고 처리하는 여러 가지 방법에 대해 설명합니다. 이러한 모든 종류의 오류 처리를 구현할 필요는 없지만 앱에 가장 잘 맞는 오류 처리 유형을 선택해야 합니다.

사전 요구 사항

  • 이 항목의 코드는 빠른 시작: JavaScript에서 promise 사용에서 만든 앱을 기본으로 하므로 과정을 따라 하려면 먼저 앱을 만들어야 합니다. 아래에 설명된 색은 "ui-dark.css" 스타일시트를 사용할 경우에만 설명된 대로 표시됩니다.

지침

단계 1: JavaScript first-chance 예외 사용

처음 예외를 사용하면 이를 처리하기 위해 아무 작업도 수행하지 않고 예외를 볼 수 있습니다. Visual Studio의 디버그 메뉴에서 예외를 선택하고 예외 대화 상자에서 JavaScript 런타임 예외발생되도록 선택합니다. 그런 다음 디버그 모드에서 앱을 실행합니다. 예외가 발생하면 오류를 표시하는 메시지 상자가 나타납니다. 이 대화 상자 유형은 앱이 디버거에서 실행 중일 때만 나타나므로 사용자에게는 이러한 예외가 표시되지 않습니다.

단계 2: 오류 처리기를 then 또는 done 함수에 추가

Promise를 사용할 경우 then 또는 done 함수를 추가하여 promise의 완료 값(오류가 없을 경우 promise에 의해 반환되는 값)과 오류 값을 명시적으로 처리해야 합니다. thendone은 둘 다 3개의 함수(completed, error, progress)를 옵션 매개 변수로 사용합니다. Promise가 실행된 후 업데이트를 수행하려면 completed 함수를 사용하고, 오류를 처리하려면 error 함수를 사용하며, promise가 만드는 진행 상황을 표시하거나 기록하려면 progress 함수를 사용합니다.

thendone 사이에는 다음 두 가지 차이점이 있습니다.

  • then 함수는 promise를 반환하지만 done은 값을 반환하지 않습니다. then 함수는 체인(myPromise().then().then().then())에서 중간 함수로 사용할 수 있지만 done은 마지막 함수여야 합니다.

  • then 함수의 처리되지 않은 예외는 promise 상태의 일부로 자동으로 캡처되지만, done 함수의 처리되지 않은 예외는 throw됩니다. 두 함수 모두 promise 상태의 일부로 전달된 예외를 처리할 수 있습니다.

thendone 함수에서 오류를 처리하는 몇 가지 방법에 대해 살펴보겠습니다. 이 예제에서는 첫 번째 then이 두 번째 then에 오류를 전달하는 두 개의 then 함수를 설정합니다.

  1. TestPromise 프로젝트에서 두 번째 DIV 요소를 추가하고 이 요소에 "div2"라는 ID를 지정합니다.

    
    <div id="div2">Second</div>
    
    
  2. 변경 처리기에서 then 함수로부터 오류 처리기를 제거하고 두 번째 DIV 요소를 가져옵니다.

    
    function changeHandler(e) {
        var input = e.target;
        var resDiv = document.getElementById("divResult");
        var twoDiv = document.getElementById("div2");
    
        WinJS.xhr({url: e.target.value}).then(function fulfilled (result) {
                if (result.status === 200) {
                    resDiv.style.backgroundColor = "lightGreen";
                    resDiv.innerText = "Success";
            });
    }
    
    
  3. 두 번째 then 함수를 추가하고, 결과가 성공적일 경우 이를 두 번째 DIV 색을 변경하는 fulfilled 함수에 추가합니다. 원래 오류 처리기를 해당 함수에 추가합니다.

    
    function changeHandler(e) {
        var input = e.target;
        var resDiv = document.getElementById("divResult");
        var twoDiv = document.getElementById("div2");
    
        WinJS.xhr({ url: e.target.value })
            .then(function (result) {
                if (result.status === 200) {
                    resDiv.style.backgroundColor = "lightGreen";
                    resDiv.innerText = "Success";
                }
                return result;
            })
            .then(function (result) {
                if (result.status === 200) {
                    twoDiv.style.backgroundColor = "yellow";
                }
            },
            function (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";
                }
            });
        }
    
    
    
  4. 디버거에서 이 코드를 실행할 때 잘못된 URL을 입력해 봅니다. 실행이 두 번째 then 함수의 오류 함수로 들어가는 것을 볼 수 있습니다. 그 결과 첫 번째 DIV는 빨강, 두 번째 DIV는 검정으로 표시됩니다.

다음 예제에서는 두 번째 then 함수에서 error 함수를 제거하고 오류 처리기가 없는 done 함수를 추가합니다.

  1. TestPromise 프로젝트에서 두 번째 DIV 요소를 "div2" 요소로 추가하지 않은 경우 지금 추가해야 합니다.

  2. 변경 처리기를 수정하여 두 번째 then에서 오류 함수를 제거하고 두 번째 DIV를 파랑으로 바꾸는 done 함수를 추가합니다. 변경 처리기 코드는 다음과 유사합니다.

    
    function changeHandler(e) {
        var input = e.target;
        var resDiv = document.getElementById("divResult");
        var twoDiv = document.getElementById("div2");
    
        WinJS.xhr({ url: e.target.value })
            .then(function (result) {
                if (result.status === 200) {
                    resDiv.style.backgroundColor = "lightGreen";
                    resDiv.innerText = "Success";
                }
                return result;
            })
            .then(function (result) {
                if (result.status === 200) {
                    twoDiv.style.backgroundColor = "yellow";
                }
            })
            .done(function (result) {
                if (result.status === 200) {
                    twoDiv.style.backgroundColor = "lightBlue";
            }
        });
    }
    
    
    
  3. 디버거에서 이 코드를 실행할 때 잘못된 URL을 입력해 봅니다. 오류를 표시하는 메시지 상자가 나타날 것입니다. then 함수 또는 done 함수에서 코드가 실행되지 않았으므로 첫 번째 및 두 번째 DIV는 검정입니다.

단계 3: WinJS.promise.onerror 처리기 추가

onerror 이벤트는 promise에서 런타임 오류가 catch될 때마다 발생합니다. 오류 처리기를 사용하여 디버깅하는 동안 중단점을 설정하거나, 오류 로깅 같은 일반적인 오류 처리를 제공할 수 있습니다. 그러나 이는 일반적인 오류 처리 메커니즘이므로 오류를 발생시킨 사용자 입력 또는 정확한 코드에 대해 충분한 세부 정보를 얻지 못할 수 있습니다.

다음은 일반적인 오류 처리기를 추가하는 방법입니다.

  1. TestPromise 프로젝트에서 changeHandler 코드로부터 then 함수를 제거합니다. 결과 changeHandler 함수는 다음과 유사합니다.

    
    function changeHandler(e) {
        var input = e.target;
        var resDiv = document.getElementById("divResult");
    
        WinJS.xhr({url: e.target.value});
    }
    
    
    
  2. 일반적인 오류 처리 함수를 만들고 app.activated 이벤트 처리기에서 onerror 이벤트에 가입합니다.

    
    app.activatedHandler = function (args) {
        var input = document.getElementById("inUrl");
        input.addEventListener("change", changeHandler);
        WinJS.Promise.onerror = errorHandler
    }
    function errorhandler(event) {
            var ex = event.detail.exception;
            var promise = event.detail.promise;
        }
    
    
    

    오류 이벤트는 예외, 예외가 발생한 promise, promise의 현재 상태(항상 error) 등의 일반적인 오류 정보를 제공합니다. 오류를 처리하는 데 필요한 모든 정보가 제공되지는 않을 수 있지만, 코드의 다른 곳에서 명시적으로 처리하지 않는 오류에 대한 유용한 정보가 제공됩니다.

관련 항목

JavaScript의 비동기 프로그래밍

 

 

표시:
© 2017 Microsoft