Typescript - 비동기 함수의 동기식 처리 Async/Await

 

 

 

[TypeScript] 비동기 함수의 동기식 처리 Async/Await

 

 

 

 

Async/Await란??

 

자바스크립트 특성 상 '싱글 스레드'에서 실행되는 환경이다 보니 비동기 함수를 사용할 때 가장 고민이 되는 것이 아마 '응답 시간 만큼의 지연 시간이 존재하는 것'이 아닐까 싶다.

 

그 이유로 인해 원하는 작업을 하지 못하면서 난처한 경우가 많다. 단일 스레드로만 실행해야 페이지를 로딩할 때 보다 더 빠른 속도로 실행 할 수 있을 뿐만 아니라 브라우저의 인터프리터(Interpreter)가 단일 스레드기 때문이다.

 

지연시간/응답시간이 각자 다른 비동기 함수를 자바스크립트의 싱글 스레드 방식의 처리인 동기화 방식으로 사용을 해주는 Async/Await가 해결책이 될 것 같다.

 

Async/Await는 ES2015에 제안됐고 Typescript에서는 1.7 Version에서 추가됐다. IE11에서는 동작하지 않기 때문에 컴파일을 할 때 'es5' 환경으로 tsconfig.json의 "compilerOptions"을 수정해야 한다.

 

 

Async/Await의 함수 예제

 

// 프로미스 함수로 비동기 함수를 생성

// setTimeout으로 난수로 만든 시간을 통해 값을 출력

function testPromise(msg: string) {

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

    return new Promise((resolve) => {

        setTimeout(resolve, ms, msg);

    }).then((v) => {

        console.log(v, ms + "ms");

    });

}

 

// 비동기 함수의 동기식 처리를 위해 먼저 함수명 앞에 'async'를 표기

// 그 후 순차적으로 값을 받을 함수앞에 'await'를 표기하여 값을 받아온다.

async function asyncAwaitTest() {

    let start = new Date().getTime();

    

    await testPromise("a");

    await testPromise("b");

    await testPromise("c");

 

    let end = new Date().getTime();

    console.log(`시간 : ${end} - ${start} ms`);

}

 

asyncAwaitTest();

위 예제는 먼저 비동기방식의 Promise 함수를 구현한 후 그 처리를 Async/Await를 사용하여 비동기 방식의 무분별한 함수의 순서를 순차적으로 진행하여 값을 차례대로 받는 예제이다.

 

특정 값만 처리하는 비동기 처리 방식에서는 문제가 없겠지만 비동기 방식의 처리를 순차적으로 할 수 있는 방법이 있어 참 편한 것 같다.

 

 

 

 

 

 

 

 

 

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