동기 & 비동기
동기 (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 에 원하는 값이 들어오기도 전에 콘솔을 찍었을 것이다.