async & await

자바스크립트에서 서버와의 통신은 비동기로 작동한다. 비동기로 시간을 절약할 수 있지만, 원하지 않게 데이터 없는 화면이띄워질 수 있다. 이때 데이터를 받아오고 화면을 띄울 수 있게 만드는 즉, 비동기를 동기로 만드는 async와 await가 필요하다. 

비동기 실행

async function  async() {
	const data = axios.get('https://koreanjson.com/posts/1')
	console.log(data) // Promise
}

axois로 비동기 통신을 사용했다. 자바스크립트는 상단에서부터 내려오면서 위 코드를 실행한다. 실행 시 서버측에 데이터를 요청하고 응답을 보여주는데, 이때 async를 이용한 통신은 데이터 보다 promise 객체를 먼저 반환한다(async function은 무조건 promise 객체를 반환한다. promise 값이 아닌 값이 들어오더라도 promise 객체로 값을 반환한다). 화면을 그리고 난 후 값을 받아오더라도 화면에는 아무것도 표시되지 못한다. 화면 렌더링이 이미 끝났기 때문이다.

Promise 객체
Promise 객체는 자바스크립트에서 비동기 처리 시 사용하는 객체다. 서버에서 가져온 데이터를 화면에 표시할 때 주로 사용한다. 다만, 데이터를 받아오기도 전에 값을 불러올 경우 데이터가 아닌 promise 객체만 있음을 알 수 있다. pormise 객체 안에는 3가지가 들어 있다. Pending, Fulfilled, Rejected. 비동기 처리가 완료되지 않았을 때는 pending을, 비동기 처리가 완료됐거나 결과 값을 반환한 상태라면 fulfilled, 비동기 처리가 실패하거나 오류가 났다면 rejected를 반환한다.

 

동기 실행(async & await)

async function sync() {
	const data = await axios.get('https://koreanjson.com/posts/1')
	console.log(data) // {id: 1, title: "정당의 목적이나 활동이 ...", ...}
}

서버와 통신한 값을 받아온 후 화면을 그리고 싶을 때 await를 쓴다. 문법 그대로 이해하면 쉽다. async 비동기로 이루어지는 상태에서 await 기다리라는 명령을 만나면, 해당 구문이 해결될 때까지 일시정지한다. 즉, 잠시 동기(sync)처럼 작동한다. promise 객체를 기다린 후 await 구문 실행이 완료되면 다음 코드로 넘어가고, 이미 데이터를 받아왔기 때문에 화면을 그리더라도 통신으로 받아온 데이터가 포함된 화면이 그려진다. await는 async 안에서만 사용할 수 있기 때문에 세트로 같이 따라다닌다. 

await가 무조건 기다리지는 않는다. promise 객체가 fulfilled되거나, rejected될 때까지만 기다린다. 통신이 실패하면 실패했다고 반환을 받은 것이니 다음 코드를 실행한다.

[MDN] async function

[MDN] await

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)