패스트캠퍼스 챌린지 24일차

비동기 함수

 

4장까지 작업한 해커뉴스 클라이언트의 마지막은 데이터를 가져오는 부분에서 API를 통해 서버에서 가져오기 때문에 비동기처리를 해야했다.

 

비동기 처리를 하기위해 비동기 함수를 사용했는데 callback 함수를 사용하거나 Promise를 반환하는 Promise 패턴을 사용했다.

 

그 중에서 Promise 함수를 리턴하는 함수와 Promise를 then()~catch()나 async & await을 통해 사용하는 방법이 있다.

 

function delay(ms:number) : Promise<string> {
    return new Promise<string>((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 promise' + result);
    })
    .catch((error: string) =>{
        console.error('fail promise!' + error);
    });

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

main();

delay라는 함수를 선언하고 이 함수는 Promise를 리턴한다. Promise 패턴의 함수에는 2가지의 파라미터를 받아올 수 있는데 성공, 실패이며, 여느 callback 함수와 다른건 이 부분이다. 처리가 성공했을 시 작업과 실패했을 시의 처리를 다르게 할 수 있다.

 

위 코드에서 then()~catch()패턴에서는 성공했을 시(resolve)에 'success' 문자열을 파라미터로 받아서 사용할 수 있으며 실패했을 시(reject)에 'failure' 문자열을 파라미터로 받아서 사용할 수 있다. 꼭 문자열 뿐만이 아니더라도 콜백함수로 성공과 실패의 반환값을 넘긴다면 해당하는 패턴에서 사용할 수 있다. 성공시에 then()을 리턴하고 then()에서 또 다음의 처리를 진행하고 싶다면 return을 통해 다음 작업을 같은 방식으로 진행한다. 그렇다면 이전의 then()에서 넘긴 return 값을 then()의 파라미터로 받아서 사용할 수 있다. 이 이유는 then()에서 반환한 값은 또 Promise를 리턴하기 때문이다.

 

또 Promise를 반환하는 패턴이라면 async & await으로 사용할 수 있는데 then()~catch()와 다른 점은 해당하는 코드의 진행을 동기적으로 처리할 수 있다는 점이다. then()~catch()의 경우는 then()의 처리가 완료되고 다음의 처리를 하기위해 then()을 연속적으로 붙여서 사용해야 하는데 async & await의 경우는 async로 선언된 함수 안에 await이 명시되어 있는 함수의 다음 코드의 진행은 동기적으로 작성해도 비동기로 처리된다.

 

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential