async & await을 진짜 간단히 정리해보자.

async / await ?

asnyc/await 는 비동기 코드를 작성하는 새로운 방법이다.
async/await는 promise처럼 non-blocking 이다.
비동기 코드의 겉모습과 동작을 좀 더 동기 코드와 유사하게 만들어준다는 것이 가장 큰 장점이다.

🤔 왜 non-blocking 이야 ??

async/await의 동작 방식은 await이 실행되는 시점에 async 내부의 실행을 멈춘다고 공식 문서에서 설명하고 있다.

내가 대략 아는 async / await은 async 함수 내에서 await을 걸면 await에서 async가 Blocking되는걸로 알고 있는데...?

async/await은 반드시 Promise 객체를 반환받아야 하기 때문에 await은 Promise의 반환값을 기다리는 함수라고 생각할 수 있다.

그리고 async 내부의 await이 실행되는 시점에는 해당 함수의 Promise 반환값을 받을 때 까지 async의 내부 코드들의 실행을 멈춘다.

하지만 실제로 await은 async 내부 코드들의 실행을 멈추지 않는다.
다만 보이지 않는 .then을 통해 다음 코드들을 담아둔다.

await의 실행 방식은 함수를 콜백 또는 프로미스 체인으로 작성하는 것과 같다고 보면 된다.

즉, async/await은 코드를 동기적으로 실행하는 것처럼 보이지만 실제로 인터프리터의 실행을 멈추는 것은 아니며, await 또한 콜백으로 동작하는 것과 같기 때문에 여전히 다른 이벤트가 이벤트 핸들러를 실행할 수 있는 상태인 것이다.

이 말은 곧 다른 이벤트들에 대해 이벤트 큐가 여전히 동작하고 있다는 것이고, await이 실행되는 순간 정말로 async 내부의 실행이 Blocking 되는 것이 아니라 일단 해결되지 않은 Promise를 반환한 후 다른 것을 실행하다가 Promise 객체의 반환값을 받는 시점에 다음 코드를 실행할 수 있는 이벤트가 되는 것이다.

async / await을 이용한 비동기요청 처리

await는 async 안에서만 사용 가능하다

async function main(title) {
  let posts = await getPostsByTitle(title);
}

만약 일반 함수 혹은 전역 컨텍스트(window)에서 await를 사용하면 에러가 발생한다. await를 사용하려면 항상 async가 선언된 함수 내부에서 사용해야 한다.

await 함수는 promise를 return한다.

async function a() {
    return 1;
}
let result = a(); // Promise {<resolved>: 1}

일반적으로 async / await 는 비동기 함수를 처리하기 위해 사용한다. 하지만, 비동기 처리가 없는 일반적인 함수에 async를 붙이면 리턴해주는 값을 resolve로 감싼 Promise를 리턴해준다.

await은 resolve로 리턴해주는 값을 꺼낸다

async function a() {
    return 1;
}

async function main() {
   let promise = a(); // Promise {<resolved>: 1}
   let value = await a(); // 1
}

async 함수를 실행하면 Promise 객체를 리턴한다. 이 때 만약 await 키워드를 사용하면 내부의 값을 리턴한다.

즉, await 키워드가 내포하고 있는 기능은 두 가지로 볼 수 있다.
1. 비동기 함수가 끝날때까지 waiting 시킨다.
2. 비동기 함수가 리턴하는 값을 뽑아낸다.

원랜 async & await 전에 callback과 promise의 개념이 선행되어야하는데 이건 나중에 알아보기로.....!