비동기 처리방법 async/await

비동기가 발생하는 다양한 경우가 존재하지만 백엔드에서 가장 많이 접하는 비동기는 바로 query를 사용할 때입니다.

비동기로 처리를 하면 처리 속도가 빨라지니까 무조건 사용하는 게 좋을까요? 비동기처리를 한다고 해서 무조건 다 좋은 것만은 아닙니다. 왜냐하면 비동기 처리 시에도 문제점이 존재하기 때문이죠. 그렇다면 어떤 문제가 발생을 할까요?

let data;

setTimeout(()=>{
    data = 10
},1000)

let value = data * 10
console.log(value)

비동기 동작을 위해서 setTimeout을 이용하여 data값을 입력받고 그 값으로 value 값을 구하는 코드를 작성을 해보았습니다. 이때 우리가 예상하는 value 값은 얼마인가요? 100이라고 생각할 수 있는데요 실제 값은 100이 아닌 NaN값이 나오게 됩니다. 왜냐하면 setTimeout이 동작하는 1초 동안에 value값을 계산한 것이기 때문에 data 값이 존재하지 않은 상태에서 10을 곱한 것이기 때문입니다. 이처럼 비동기임에도 불구하고 순서를 맞춰주어야 할 경우에는 비동기를 동기 처리를 해주어야 합니다.

어떻게 해야 비동기를 동기 처리 할수 있는지 알아봅시다.

• 콜백함수
• promise
• ES2017(ES8) promise => async / await

---

async/await

Promise 객체를 조금더 쉽고 편리하게 사용하는 문법으로 제너레이터라는 개념으로 처음 등장하였고 ES20

17에서 조금더 간단하고 가독성이 좋게 비동기 처리 할 수 있게 구현된 함수입니다.

 

async/await은 기본적으로 promise 기반으로 동작하는데요, async/await을 사용하게 되면 promise에서 사용되던 then, catch, finally와 같은 후속처리 메서드를 사용할 필요 없이 마치 동기처럼 promise를 사용할 수 있습니다.

 

async 함수

const sum = async (a, b) => {
  return (a + b);
};

sum(1, 3).then((result) => {
  console.log("결과 :", result);
});

 

function ( ){ }가 일반함수라면 async function( ){ }를 우리는 async 함수라고 합니다. async 함수는 promise처럼 사용이 가능하다 하는데 그렇다면 후속처리 메서드도 사용가능할까요? 네, 사용가능합니다. promise를 사용하지 않아도 반환값이 promise가 아닌 경우에 promise.resolve()로 감싸 처리를 해주기 때문에 promise의 후속처리 메서드도 이용이 가능합니다.

 

await 키워드

await은 async 안에서만 동작합니다. 또 await은 promise의 후속처리를 대신해줍니다. 어떻게 대신 처리를 해주는 것일까요? async 함수 안에 비동기를 동기처리 해주기 위해서 데이터를 받기까지 기다려야 하는데요 그 동작을 할 수 있게 하는 게 바로 await입니다.

const foo = async () => {
    let promise = new Promise((resolve,reject)=>{
        setTimeout(()=> resolve("성공"),3000)
    })
    let result = await promise;
    console.log(result)
}

foo();

위 코드를 보면 promise 앞에 await를 사용했는데요 이는 promise가 전부다 동작을 할 때까지 기다려주고 동작이 다 끝나면 result에 값을 넣어주는 방식입니다.

 

async/await의 에러처리

콜백함수의 비동기 처리 단점은 에러처리가 힘들다는 것입니다.

하지만 async/await은 try... catch를 통해서 에러처리가 가능합니다. 콜백함수를 인수로 전달받는 비동기 함수와는 다르게 async/await은 프로미스를 반환하는 비동기 함수이기 때문입니다. 또한 비동기 함수뿐만 아니라 코드 블록 내에 발생하는 일반적인 에러까지 모두 잡을 수 있기 때문에 유용하게 사용이 가능합니다.