[JS] 자바스크립트 비동기 처리(Async/Await)

 

Async와 Await

Async와 Await은 Promise를 더 쉽게 다룰 수 있도록 도와주며,

Promise 또한 너무 중첩적으로 체이닝 하면 가독성이 떨어져 콜백 지옥 같은 Promise 지옥이 발생할 수 있다.

Async함수는 항상 Promise를 반환하며, Await 키워드는 Promise가 처리될 때까지 기다리며 코드를 동기식으로 작성할 수 있다.

 

Async

function myFunc() {
  return Promise.resolve('name')
}

myFunc().then(console.log) //name

async function myFunc() {
  return 'name';
}

myFunc().then(console.log) //name

함수 앞에 async를 붙여 함수가 비동기적으로 실행됨을 나타낸다. 그래서 작업이 완료될 때까지 다른 코드가 실행될 수 있다.

async는 항상 Promise 객체를 반환하는데 나중에 어떤 값을 반환할 것이라고 약속을 하게 된다.

async 함수 안에 return 하는 값은 자동으로 Promise.resolve()로 감싸져서 Promise가 되기 때문에

then 메서드를 이용해서 그 값에 접근할 수 있게 된다.

 

Await

function wait(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function myFunc() {
  const x = await wait(10); // promise가 처리 될 때까지 기다림
  console.log(x); // 10
}

myFunc();

await 키워드는 async가 붙은 함수 안에서만 사용 가능하며, 비동기로 처리되는 부분 앞에 await을 붙여주면 된다.

await 키워드는 promise가 처리되고 값을 반환할 때까지 다른 코드를 실행하지 않고 기다린다.

따라서 wait함수는 2초뒤에 주어진 값을 반환하는 promise를 만들며 콘솔에 10이 찍히게 된다.

 

예외 처리

promise에서 catch() 메서드로 예외처리를 했던 것처럼 async/await 에서 예외처리 하는 방법은 try...catch 구문

async function f1() {
    throw 'error'; // 예외 던지기. 현재 함수 실행 x
}

async function f2() {
    try {
        await f1() // 비동기 함수 앞에 await을 붙여 promise를 기다린다.
    } catch (e) {
        console.log('에러 발생:', e) // 예외 잡기
    }
}

f2()

try 블록내에는 예외가 발생할 수 있는 코드를 포함하여 작성하면 된다.

만약 예외가 발생한다면 코드 실행이 중지되고 예외를 처리하기 위해 catch 블록으로 이동한다.

catch 블록은 예외를 처리하는 코드를 포함하며, 예외가 발생한 경우 실행될 코드를 작성한다.

 

async 함수에서 에러 처리는 일반함수처럼 throw를 던지면 되지만 에러를 잡아주지 않기 때문에 try...catch로 에러를 잡아야 한다.