✍🏻 [Code Camp_TIL] 4일차: 동기&비동기 방식

동기와 비동기

API 요청을 보내면 응답을 받을 때까지 기다려야 하는데, 여기서 기다리는 것이 동기, 기다리지 않는 것이 비동기 방식이라고 한다.

예를 들어 게시글을 등록한다고 했을 때, 동기 방식은 게시글을 등록하고, 등록 완료 후 게시글을 불러오는 형식이다. 반면, 비동기 방식은 게시글이 등록 완료되기 전에 게시글을 불러온다. 비동기 방식은 여러 가지 요청들이 일어날 때 서로 기다릴 필요가 없을 경우 사용한다. 따라서 동시에 여러가지의 일을 할 때 사용한다.

하지만 비동기 방식은 게시글 등록 후 게시글을 불러왔을 때 게시글이 불러와지지 않는 등의 오류가 발생할 수 있기 때문에 이 경우에 동기 방식을 사용하게 된다.

Rest-API에서 동기 & 비동기 실행

JS를 포함해서 대부분의 언어는 동기 실행 방식이고, 외부에서 제공해주는 기능들은 효율적으로 작동하도록 하기 위해 비동기 방식을 사용한다.

그렇다면 먼저, 비동기 방식으로 요청하는 방법에 대해 알아보자.

VS Code에서 비동기로 API 요청하는 방법

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

요청을 보내놓고 나서 응답이 올거라고 약속한 상태로 다음줄의 코드로 넘어간다. 위 코드를 실행하면 콘솔창에는 return된 promise 객체가 보여지게 된다. 여기서 promise 객체란?

Promise 객체는 JS에서 비동기 처리에 사용되는 객체로, 서버에서 받아온 데이터를 화면에 표시하기 위해 사용하며 데이터를 받아오기 전에 데이터를 화면에 표시하려고 할 때 발생하는 오류를 해결하기 위한 방법 중 하나이다!

Promise에는 3가지 상태가 있다.

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

비동기 방식을 동기 방식으로 바꿔주는 명령어는 async와 await이다.

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

위와 같이 작성하면 await를 사용해서 응답이 올 때까지 기다리고 응답이 온 후에 아랫줄 코드로 내려가게 된다.

---