캡틴 판교님 글 참고하여 공부하였습니다.

async/await란 무엇일까?(초간단 요약)

0. 결론은 보기 좋은 코드를 만들기 위해서다.

1. 내가 만든 블로그에서 쓴 async/await

// 게시물 삭제 => redux로 상태관리 안 하고 axios만 하면 꼭 get 해주기
  // 타입 신경쓰기(uuid 안 쓰니 number로)
  const deleteContent = async (contentId : number) => {
    axios.delete(`http://localhost:3001/contentList/${contentId}`)
    const { data } = await axios.get('http://localhost:3001/contentList')
    setContentList(data)
  }
// async / await로 axios 비동기를 적용한 사례

promise를 썼을 수도 있으나 가독성 등을 따졌을 때 훨씬 더 보기 좋았고 쓰기 편해서 사용했다.

2. 기본문법

• 함수에 async
• HTTP 통신을 하는 비동기 처리 코드 앞에 await. 이 곳에서 프로미스 객체를 반환해야 의도대로 된 것이라고 함.

3. 위 예제를 통해 본 기본문법

• async는 함수 앞에 붙여줌
• await는 axios 통신하는 부분에 붙여줌. 이후 프로미스 객체 반환됨.

4. 예외처리 예제(캡틴판교님 예제)

async function logTodoTitle() {
  try {
    var user = await fetchUser();
    if (user.id === 1) {
      var todo = await fetchTodo();
      console.log(todo.title); 
      // delectus aut autem
    }
  } catch (error) {
    console.log(error);
  }
}

• 나도 삭제 파트에서 예외처리를 했으면 위와 같이 했을 것. 삭제가 제대로 안 되었을 수도 있으니까.

면접용 결론

• 프로미스의 then부분의 디버깅 처리의 불편함, 예외처리가 동기 / 비동기가 섞인 코드에서 불편하다는 점, 들여쓰기가 많아 가독성이 떨어진다는 점에서 단점을 가지고 있던 것을 보완하기 위해 나온 새로운 비동기 방식으로, 비동기 코드를 마치 동기코드처럼 보이게 작성할 수 있습니다. 예외처리 또한 try/catch로 일관되게 할 수 있다는 점에서 이점이 있습니다. 사용 방법으로는 다음과 같습니다. function 앞에 async를 붙여주고 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙여줍니다. async 가 붙은 함수는 promise 객체를 반환합니다.