js - async & await

이번 포스트에서는 async와 await에 대해서 적어보려 합니다.

 

 

이전 글에서 Promise 디자인 패턴에 대해서 알아봤습니다.
(필요하시다면 참고하시면 되겠습니다.)

https://jhhan009.tistory.com/126

 

Promise는 디자인 패턴으로

사용하기 어렵다고 생각하는 사람이 있을 수도 있습니다.

그럴 때는 ES8에서 등장한 async & await을 사용하는 것을 고려해 볼 수 있습니다.

 

async 와 await을 쓰는 것은 Promise보다 코드 상으로는 더 간편할 수 있습니다.

async function f1() {
    return 1+1;
}

위의 코드처럼 function에 async를 붙이면 됩니다.

그리고 난 후

async function f1() {
    return 1+1;
}

f1().then(function(r) {
    console.log("f1 완료 & 결과 = ", r);
});

코드를 추가로 작성한다면 위와 같은 결과를 얻을 수 있습니다.

Promise와 같은 결과를 얻는 것을 알 수 있네요!

 

이젠 await을 써보겠습니다.

await은 .then()을 대신해서 사용할 수 있습니다.

async function f2() {
    let output1 = new Promise(function(resolve, reject) {
        let op1 = 1+2;
        resolve(op1);
    });
    let result = await output1;
    console.log(result);
}

f2();

위와 같은 코드를 작성하면 위의 이미지와 같은 결과를 얻을 수 있습니다.

• Promise와 같은 결과를 얻는 것을 알 수 있습니다.
• async와 await은 하나의 세트처럼 묶여다니는 것을 확인할 수 있습니다.
  그래서 async & await으로 같이 배우는 것입니다.
• let result = await output1 이 쓰여진 줄은 사실 비동기 코드라고 볼 수도 있습니다.
  하지만 위의 코드에서는 느끼지 못할 수 있습니다.

 

await의 경우 코드가 실패하면 에러가 나고 코드가 멈추게 됩니다.

async function f2() {
    let output1 = new Promise(function(resolve, reject) {
        let op1 = 1+2;
        reject(op1);
    });
    let result = await output1;
    console.log(result);
}

f2();

reject가 실행되는 경우 로그창에서 Error가 나오는 것을 알 수 있습니다.

하지만 실제라고 생각한다면 꽤나 치명적인 오류입니다.

이 부분을 해결하기 위해서 try - catch문을 써서 해결할 수 있습니다.

 

async function f2() {
    let output1 = new Promise(function(resolve, reject) {
        let op1 = 1+2;
        reject(op1);
    });
    
    try {
        let result = await output1;
        console.log(result);
    } catch(e) {
        console.log('error...', e);
    }
}

f2();

위의 코드를 실행하는 경우

에러가 발생하기는 하지만, 에러에 대해서 처리를 하기 때문에

실제로는 아무 문제가 없는 것으로 볼 수 있습니다.

 

 

await의 경우 실패 처리를 할 때 try - catch 문을 써야 하기 때문에

어떻게 보면 .then()이 훨씬 나을 수도 있다는 생각이 들 수 있습니다.

이것은 개인의 선택이니 그때그때마다 더 나은 선택을 하면 될 것 같습니다.

 

 

이렇게 async & await에 대해서 알아봤습니다.

역시 간단하게 사용법 정도를 알아보았기 때문에 실전에 사용하기에는 무리가 있고

여러번 사용해보면서 익숙해지시면 될 것 같습니다.

 

 

 

 

출처: 코딩애플 - 쉽게 이해하는 JavaScript 객체지향 & ES6 신문법