비동기함수

GoGoDev·2022년 1월 23일
0

JS & TS

목록 보기
7/11

지연 함수

function delay(ms: number): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (Math.floor(Math.random() * 10) % 2 === 0) {
                resolve('success');
            } else {
                reject('failure');
            }
        }, ms);
    });
}

delay(3000).then((result: string) => {
    console.log('done primise!' + result);
    })
    .catch((error: string) => {
        console.error('fail promise!' + error);
    });

delay함수는 특정 시간을 주면 그 시간만큼 코드를 딜레이 시키는 함수이다.
(Javascript에는 코드를 딜레이 시킬 수 있는 방법이 없다. 예를 들어 100번째 줄 코드를 실행 한 후 5초 있다가 101번째 코드를 실행하는 방법이 없다. 이를 위해서는 타이머를 이용해서 callback 함수를 제공한 후, 특정 시간 이후에 그 callback 함수가 호출되는 패턴의 코드를 작성해야한다.)

delay 함수에 ms라는 데이터를 받아온다. 1000ms는 1초이다.
반환 값으로는 promise 객체를 반환한다. promise의 resolve나 reject가 발생할 때, 문자열을 return할 것이므로 Promise으로 선언했다.
new promise객체를 return하고 비동기 코드가 작성될 함수를 넘겨준다.
그 함수는 resolve와 reject를 인자로 받고 setTimeout함수를 선언한다.
setTimeout 함수의 첫번째 인자는 함수를 받고 두번째 인자로는 시간(ms)을 받는다.
setTimeout에 시간이 입력되어 입력된 시간뒤에 첫번째 인자로 온 함수를 실행한다.

비동기 함수

async function main() {
    try {
 		console.log('start job');
        const result = await delay(3000);
        console.log('done async!' + result)
    } catch (e) {
        console.error('fail async!' + e);
    }
}
  
main();

비동기 함수에는 async라는 지시어를 붙이고 기존의 promise 객체를 반환하는 함수에 await를 붙이면 된다.
실제 작동은 비동기적으로 작동하지만 코드적으로만 동기적으로 작동하는 것처럼 보여준다.
promise를 반환하는 함수 앞에 await를 붙여준다

항상 await 구문을 try-catch로 감싸서 error는 catch구문에서 처리하도록 깔끔한 코드를 작성해보자.

profile
🐣차근차근 무럭무럭🐣

0개의 댓글