[JS] async와 await

 

• JS에서 비동기 처리를 위해 제공하는 방식은 콜백, Promise, async & await가 있다.
• 이 중 가장 최근에 나온 문법이 async와 await이며, 핵심은 가독성 향상에 있다.

 

i). 문법

• 함수 앞에 async를 붙이고, 함수 내부 실행 중 비동기 처리를 하는 코드 앞에 await을 붙여준다.
  
  • 아래는 어디까지나 예시이며, 각 await 행에서 비동기 처리를 대기하는 Function의 반환값을 처리해줄 것.

// 비동기 처리를 한 번만 하는 경우
async function [FUNCTION_NAME]() {
  await [FUNCTION_THAT_RETURN_PROMISE]();
}

// 비동기 처리를 여러번 하는 경우
async function [FUNCTION_NAME]() {
  await [FUNCTION_THAT_RETURN_PROMISE1]();
  await [FUNCTION_THAT_RETURN_PROMISE2]();
  await [FUNCTION_THAT_RETURN_PROMISE2]();
}

• 같은 코드를 Promise 방식으로 쓸 경우,
  • then 안의 function은 Promise 객체를 반환하는 함수로 대체할 수 있다.

// 비동기 처리를 한 번만 하는 경우
function [FUNCTION_NAME]() {
  [FUNCTION_THAT_RETURN_PROMISE]().then(function() {
    //
  });
}

// 비동기 처리를 여러번 하는 경우 (Promise chaining)
function [FUNCTION_NAME]() {
  [FUNCTION_THAT_RETURN_PROMISE]()
    .then(function() {
      //
    })
    .then(function() {
    })
    .then(function() {
    });
}

• 같은 코드를 콜백 방식으로 쓸 경우,

// 비동기 처리를 한 번만 하는 경우
function [FUNCTION_NAME]() {
  [FUNCTION_THAT_ASYNC]('url', function() {
    //  
  });
}

// 비동기 처리를 여러번 하는 경우 (콜백지옥)
function [FUNCTION_NAME]() {
  [FUNCTION_THAT_ASYNC1]('url', function() {
    [FUNCTION_THAT_ASYNC2]('url', function() {
      [FUNCTION_THAT_ASYNC3]('url', function() {
        //
      });
    });
  });
}

• 즉, async & await은 가독성 면에서 우월함이 있다.

 

ii). 예외 처리

• async / await의 예외 처리는 try catch를 사용한다.
• 이는 async 과정에서의 네트워크 오류 뿐안 아니라 타입 오류 등의 일반적인 오류까지 잡아줄 수 있는 방법이다.
  • 이후는 에러의 유형에 맞게 에러 코드를 처리할 것!

async function errorCatch() {
  try {
    let user = await getUser();
    let id = await getIdByUser();
    console.log(id);
  } catch (e) {
     console.log(e);
  }
}