JS)async & await 간단학습

async await은 JS의 비동기 패턴 중

제일 신상이며 ECMAScrip2017에서 추가되었다고 합니다.

기존 콜백 패턴과 프로미스 기능을 보완해줍니다.

 

async

 

fetchUser의 로직이 db통신 혹은 서버와의 통신으로

값을 받아온다고  가정합니다.

 

아래처럼 작성하면 fetchUser에서 계속 제어권이 잡힌 상태여서

값을 받기 전까지는 사용자가 아무 행동을 할 수 없게 됩니다.

function fetchUser(){
    //do request
    return 'user1';
}

const user = fetchUser();
console.log(user);

 

간단하게 function키워드 앞에 'async'를 입력합니다.

그러면 promise기능을 사용했던 것처럼 비동기 방식을 이용할 수 있습니다.

async function fetchUser(){
    return 'result!';        
}

const user = fetchUser();
console.log(user);

 

async를 사용하고 브라우저 콘솔 창을 보니 Promise가 보이네요

'async'를 사용하면 해당 함수 블록 안은 자동으로 Promise로 변경된다고 합니다.

return 값은 promise객체가 감싼 후 반환됩니다.

 

await

 

이제 await을 사용하겠습니다.

예시를 하나 작성하였습니다. 아래 asyncFunc() 부분을 일단

기존 Promise를 사용하는 형식을 차용하였습니다.

 

then()으로 받고 로직을 사용하네요

function work(sec) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('work func');
        }, sec * 1000);
    })
}

function asyncFunc() {
    work(2).then(console.log)
}

asyncFunc();
console.log(1);
console.log(2);

 

await을 사용하려면 함수에 'async'키워드를 기입하고

Promise객체를 반환하는 함수 호출 앞에 'await'을 기입합니다.

 

콘솔 출력문은 위와 동일합니다. 1 -> 2 -> 'work func'입니다.

function work(sec) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('work func');
        }, sec * 1000);
    })
}

async function asyncFunc() {
    const result = await work(2);
    console.log(result);
}

asyncFunc();
console.log(1);
console.log(2);

 

이렇게 로직이 복잡성이 떨어질 때는 그냥 then()을 사용하는 게 좋아 보입니다.

프로미스 체이닝을 사용하니 매우 복잡해 보이네요

 

function asyncFunc() {
    work('1').then(result => {
        work('2').then(result2 => console.log(result + result2))
    })
}

Promise객체에서 지원하는 다른 메서드들을 사용해도 되지만

await을 사용하면 위 코드와 동일한 결과를 보여줍니다.

 

좀 더 선언형 프로그래밍 같네요 보기도 편합니다.

async function asyncFunc() {
    const obj1 = await work('1');
    const obj2 = await work('2');
    console.log(obj1 + obj2);
}

 

그냥 then, catch만 사용하지 말고

다른 함수들과 async, await 섞어가면서 사용하는게

좋을 것 같습니다.🐥