async & await

동기 실행과 비동기 실행

비동기 실행

서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신으로 서버에 요청(등록, 수정, 삭제 등)이 저장될 때까지 기다리지 않고 다른 작업을 진행한다.
이러한 특징 때문에 비동기 실행은 요청들 사이에 서로 기다려 줄 필요가 없을 경우, 여러 가지 요청을 동시에 처리해 줄 때에 사용된다.

동기 실행

서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신이다.
자바스크립트의 경우 동기 실행 방식이다.

REST-API 동기/비동기

비동기 통신

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

REST-API에서 데이터 요청, 응답을 위해 axios를 사용하여 비동기 통신을 사용하였다.
Promise 객체는 자바스크립트에서 비동기 처리에 사용되는 객체이다.
데이터를 받아오기 전에 화면에 표시하려고 하면 오류가 발생하는데, 이러한 문제를 해결하기 위한 방법 중 하나이다.
Promise 객체는 세가지 상태가 있다.

• Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해 준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

동기 통신(async/awiat)

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

비동기 실행 방식에서 동기 실행 방식으로 변경해주기 위해서는 async/awiat가 필요하다.
이렇게 작성하면 await가 작성된 부분의 코드 실행이 완료되기 전까지는 하단의 코드로 실행이 넘어가지 않는다.