Typescript - 비동기 통신 Promise

 

[TypeScript] 비동기 통신 Promise

 

 

 

Promise의 대해

 

예전에는 비동기 처리를 하기 위해 Ajax를 많이 사용했으나 콜백 함수를 사용하는데 있어 코드의 가독성이나 자칫 잘못 구현하면 콜백 지옥을 맛볼 수 있는 경우가 많았으나, 최근에는 Promise 객체를 사용함에 있어 비동기 처리를 더욱 쉽게 처리할 수 있게 되었다.

 

TypeScript에서의 비동기 처리는 기본적으로 ES6의 Promise로 처리한다.(axios도 괜찮지만 일단...)

 

Promise Pattern은 IE11/오페라 미니 외 브라우저에서는 지원하지 않는 단점이 있다.

 

하지만 컴파일 할 때 'ES5 + 프로미스' 조합으로 컴파일을 하면 모든 브라우저에서 동작이 가능하다.

 

 

tsc promise.ts --lib ES2015.Promise,dom,es5

 

또한 tsconfig.json 설정을 통해 프로미스 컴파일도 가능하다.

 

 

{

    "compilerOptions": {

        "outDir": "./dist",

        "lib": ["es5","dom","es2015.promise"]

    },

    "exclude": [

        "node_modules",

        ".vscode"

    ]

}

 

 

 

Promise의 세 가지 상태

 

대기(pending) 상태 : Promise가 실행되고 값이 결정되지 않는 상태.

 

충족(fulfilled) 상태 : 대기 상태가 끝난 뒤 값이 결정된 상태며 reolve 함수를 통해 값을 전달한다.

 

거부(rejected) 상태 : Promise가 제대로 처리되지 않고 거부된 상태로 catch Method로 반환하여 예외 처리를 할 수 있다.

 

 

 

Promise의 기본적인 구조

 

 

const promise = new Promise((resolve, reject) => {

resolve(1);    

}).then(res => {

console.log(res);

return 2;

}).then(res => {

console.log(res);

throw "Exception";

}).catch((err) => {

console.log(err);

});

 

(위 기본 Promise를 구현 해 놓은 코드를 보면 이해가 빠를 것 같다...)

 

Promise는 then 메서드를 이용해 중첩 코드와 가독성을 개선했으며 체이닝 형태로 여러개로 사용할 수도 있으며 catch 메서드를 이용해 에러처리를 할 수 있다.

 

then 메서드는 Promise가 정상적으로 resolve method를 실행하면 처리하는 구간이며 catch 메서드는 reject mehtod를 실행하면 처리되는 구간이다. then 메서드에서 발생한 예외 처리를 하기 위해서는 catch 메서드를 꼭 마지막에 선언해야한다.

 

 

 

Promise.all()

 

비동기 통신을 하면서 가장 불편했던 것은 정말 말도 안되는 비동기 순서로 인한 문제점이 아닐까 싶다.

 

원하지 않은 순서 때문에 제대로 값이 전달 되지 못해 처리가 원활하게 동작하지 못해 애를 먹었던 적이 많다.

 

하지만 Promise는 호출 순서에 따라 처리할 수 있는 Promise.all() 메서드 인터페이스를 제공한다.

 

작업 완료 시점이 일정치 않아 뒤바뀐 결정 값의 순서를 호출 순서에 따라 출력해 주는 역할을 한다!

 

function asyncDelay(order: number) {

    return new Promise((resolve, reject) => {

        let ms: number = Math.random() * 1000 + 1;

        setTimeout(() => {

            console.log(`작업 완료 : ${order}`);

            resolve(order);

        }, ms);

    }).then();

}

 

 

function syncResultPromise() {

    let p1 = asyncDelay(1);

    let p2 = asyncDelay(2);

    let p3 = asyncDelay(3);

    let p4 = asyncDelay(4);

 

 

    Promise.all([p1, p2, p3, p4]).then((order) => {

        console.log(`동기화 된 출력 : ${order}`);

    })

}

 

syncResultPromise();

 

위 코드는 asyncDelay 함수는 임의의 지연시간으로 처리하는 프로미스를 객체를 생성했으며 실행 시 setTimeout의 ms값에 따라 '작업 완료'의 순서는 바뀌지만, syncResultPromise() 함수안의 Promise.all() Method를 통해 '동기화 된 출력'은 호출 순서에 따라 정확하게 호출 되는 값을 확인 할 수 있다.

 

 

 

 

 

 

 

(참고 : 타입스크립트 퀵스타트)