async & await

동기 & 비동기

동기 (Synchronous)

• 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식.
• 모든 일은 순차적으로 실행되며 어떤 작업이 실행중이라면 다음 작업은 대기하게 된다.

비동기 (Asynchronous)

• 특정 코드의 연산이 끝날 때까지 기다리지 않고, 그동안 다른 코드를 실행한다.

async & await

• JavaScript 는 싱글 스레드 프로그래밍 언어이기 때문에 비동기처리가 필수적이다.
• 이 때 동기식으로 처리하는 기법중 하나가 async 와 await 이다.

사용법

• function 키워드 앞에 async 를 붙여주고, 비동기로 처리되는 부분 앞에 await 를 붙여주면 된다.

• async 가 붙은 함수는 promise 를 반환하고, promise 가 아닌 것은 promise로 감싸 반환한다.

• await 키워드를 만나면 promise 가 처리될 때까지 기다린다.

예시)

const onClickGraphqlApi = async () => {
		const result = await callGraphql();
		console.log(result);
	}

• async 와 await 가 없었다면 result 에 원하는 값이 들어오기도 전에 콘솔을 찍었을 것이다.