JavaScript의 비동기 프로그래밍(HTML)

Applies to Windows and Windows Phone

JavaScript는 단일 스레드 언어입니다. 이는 장시간 실행되는 프로세스를 호출하면 이 프로세스가 완료될 때까지 모든 실행이 차단된다는 의미입니다. 즉, UI 요소는 응답하지 않고, 애니메이션이 일시 중지되며, 그 외 다른 코드를 앱에서 실행할 수 없습니다. 이 문제를 해결하려면 가능한 한 동기 실행을 피해야 합니다.

그러한 방법 중 한 가지는 함수가 다른 호출이 이벤트를 발생시킨 후 호출되는 이벤트 처리기를 사용하여 나중에 실행되도록 하는 것입니다. 콜백 함수는 프로세스를 시작한 코드를 다시 호출하므로 또 다른 종류의 비동기 처리입니다.

비동기 프로그래밍 사용 시의 문제점

비동기 프로그래밍은 빨리 복잡해집니다. 대부분의 표준 JavaScript API는 종종 중첩되기도 하는 콜백에 크게 의존하므로 디버그하기가 어렵습니다. 또한 비동기 인라인 함수를 사용하면 호출 스택을 읽는 데 문제가 됩니다. 아주 많이 중첩된 콜백 집합 내에서 발생한 예외는 해당 체인을 시작한 함수로 상향 전파되지 않을 수 있습니다. 이로 인해 버그가 숨겨진 위치를 정확히 확인하기가 쉽지 않습니다.

JavaScript로 작성한 Windows 런타임 앱의 비동기 프로그래밍

Windows 런타임 및 JavaScript용 Windows 라이브러리는 Common JS Promises/A 제안을 구현하여 이러한 문제를 극복할 수 있는 방법을 제공합니다. Promise 개체는 미래 시점의 값을 나타냅니다. 이러한 개체를 사용하여 읽기 쉬운 비동기 코드 체인을 구성할 수 있습니다.

Windows 스토어 앱에 표시되는 모든 Windows 런타임 API는 promise 개체로 묶입니다. 이를 통해 자신에게 편한 방식으로 Windows 런타임 API를 사용할 수 있습니다. 대다수 Windows 런타임 조작 방식은 비동기식이므로 WinJS의 promise가 중요합니다.

Promise 설명

Promise는 개체입니다. Promise 개체에서 가장 흔히 사용되는 메서드는 then으로, 세 가지 매개 변수(promise가 성공적으로 완료되었을 때 호출할 함수, promise가 완료되었지만 오류가 발생했을 때 호출할 함수, 진행 정보를 제공할 함수)를 사용합니다. Windows 런타임과 WinJS 둘 다에서 동일한 세 가지 매개 변수를 사용하는 done 함수를 사용할 수 있습니다. 단, 처리에서 오류가 발생할 경우 then 함수는 오류 상태로 promise를 반환하지만 예외가 발생하지는 않는 반면 done 메서드는 오류 함수가 제공되지 않은 경우 예외를 발생시킨다는 점에서 차이가 있습니다.

(가상) 비동기 메서드가 두 개인 promise의 기본 예제를 살펴봅시다. 메서드 하나는 웹 서비스를 호출하고 다른 하나는 데이터베이스에 결과를 저장하는 데 사용됩니다.


myWebService.get("http://www.example.com")
    .then(function(result) { 
        return myDb.add(result); 
    })
    .then(function() {
        console.log('data successfully saved');
    }, function(error) {
        console.log('an error occurred while saving:');
        console.dir(error);
    });


then 함수를 myWebService.get 메서드에 추가합니다. 이 메서드는 promise를 반환하므로 두 번째 then 함수를 myDb.add 메서드에 추가하고, 두 번째 then 함수에 전달하는 오류 함수에서 오류를 처리할 수 있습니다.

또한 여러 promise를 그룹화할 수 있습니다. 예를 들면 join 함수를 사용하여 여러 웹 서비스를 호출하고 그 결과를 집계하는 다양한 비동기 작업을 실행할 수 있습니다.


function loadData() {
    var urls = [
        'http://www.example.com/',
        'http://www.example.org/',
        'http://www.example.net'
        ];
        
    var promises = urls.map(function (url) {
        return myWebService.get(url);
    });

    WinJS.Promise.join(promises).then(function () {
        //do the aggregation here.
    });
}


먼저 URL 배열을 만들고, Array.map 함수를 사용하여 URL 배열을 promise 배열로 변환합니다(mywebService.get이 promise를 반환함). 마지막으로, promise 배열을 받아들이고 모든 promise가 완료된 후 새 promise를 반환하는 join 함수를 사용합니다. then 메서드의 완전한 함수 내에서 데이터 집계를 수행합니다.

관련 항목

빠른 시작: promise 사용
promise를 사용할 때 오류 처리 방법
WinRT 오류 해결
promise 연결
Handling multiple promises

 

 

표시:
© 2014 Microsoft