[JS] promise와 async await의 차이

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

promise

console.log('aa');

const promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve('foo');
    }, 1000);
});

console.log('bb');

promise.then(function(value) {
    console.log(value);
    // expected output: "foo"
});

console.log('cc');

// 출력
// aa
// bb
// cc
// foo

promise.then()이 끝나고 난 후 cc를 출력하기를 기대하지만, 그렇지 않습니다.

promise를 사용하면 promise객체 생성시 콜백 함수를 이용해 동기화할 수 있지만, 밖의 코드는 동기화 할 수 없습니다.

 

 

 

async await

console.log('aa');

const promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve('foo');
    }, 1000);
});

console.log('bb');

async function asyncCall() {
    try {
        console.log('calling');
        const result = await promise;
        console.log(result);
    }
    catch (err) {
        console.log(err);
    }
    
}
console.log('cc');

asyncCall();

console.log('dd');


// 출력
// aa
// bb
// cc
// calling
// dd
// foo

하지만 async await를 사용하면 promise 밖의 코드와 동기화 할 수 있습니다.

즉, promise가 resolve하거나 reject할 때 까지 asyncCall내부에서 기다립니다. 그 결과, result를 정상적으로 출력합니다.

 

만약 result를 출력한 후 dd가 출력되도록 하고 싶다면 또 async함수로 감싸줘야 할 것입니다.

 

참고로, async await를 사용하면 promise.then().catch()처럼 reject를 잡아낼 수 없기 때문에, try catch문을 사용해야 합니다.