📌 오늘의 주제, async & await
async & await란?
async와await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 ES8 문법이다.
기존의 비동기 처리 방식인콜백 함수와프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.
흔히 말하는콜백지옥, 혹은 여러 개의프로미스가 서로 의존하고있는 경우 코드의 가독성이 저하될 수 있다.
이를async와await를 사용하여 더욱 간편하게 가독성있는 코드를 작성할 수 있다.
async & await 기본 문법
async와 await의 사용법은 매우 간단하다.
- 함수 앞에
async를 붙이면 해당 함수는 자동으로 프로미스를 반환하게 된다. - 비동기로 처리되는 부분에
await를 붙이면 해당 프로미스가 끝날때까지 기다린다. (동기적으로 처리) await는async가 붙은 함수 안에서만 사용 가능하다.
async function 함수명() {
await 비동기_처리_메서드_명();
}먼저 함수의 앞에 async 라는 예약어를 붙이고 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙인다.
❗ 이때, 비동기 처리 메서드가 꼭
프로미스 객체를 반환해야await가 의도한 대로 동작한다!!
일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수이다.
async & await 간단한 예제
async function onClickSendBtn () { const submit = await createBoardApi({ variables: { writer: writer, title: title, contents: contents } }) console.log(submit) }
onClickSendBtn()함수는 프로미스 객체를 반환하는 함수이다.
createBoardApi는 Graphql-API를 사용하기 위한 함수이며HTTP 통신을 실행한다.
async & await를 사용하면 통신이 완료될 때까지 기다린 후, 콘솔 창에submit이 보여질 것이다.이때 화살표 함수로 사용할 때는 async의 위치를 () 앞에 입력하여야 한다!
const 함수명 = async () => { await // 서버에 요청하는 코드 }
async & await 예외 처리
try ~catch
데이터를 요청하여 받아오는 작업은 실패할 수도 있다.
따라서 성공에 대한 처리, 실패에 대한 처리를 미리 염두에 두고 작업해야 한다.
try로 통신을 시도해보고 실패하면 catch로 에러를 받아올 수 있다.
try {
await createBoard({
variables: {
aaa: "훈이",
bbb: "1234",
ccc: "안녕하세요 훈이에요",
ddd: "반갑습니다"
}
})
} catch(error) {
alert(error.message) // 경고창(실패했습니다.) ==> 백엔드 개발자가 보내주는 실패 메시지
} finally {
// 성공, 실패 여부와 상관없이 무조건 마지막에 실행되는 부분
// 필요없다면 생략 가능
}
try안에서 실행되는 코드들은 위에서 부터 한 줄 한 줄 실행되다가
실행 실패가 되면, 실패한 줄 밑의 코드는 실행되지 않고 바로catch로 넘어가게 된다!!
💖 마무리
async & await에 대해 알아보았다.HTTP 통신및API 호출에 필수로 사용하게 될 개념이기 때문에 정확히 알아 두는게 도움이 많이 될 것 같다.
방대한 데이터 처리도 척척 로직을 짤 수 있는 프론트엔드 개발자가 될 수 있도록 잘 짚고 넘어가야겠다!
