· 쉽게 Promise객체로 만드는 방법(by using async function) · promise chaining을 계속 하다 보면 가독성이 떨어지게 된다. ·async & await은 promise를 동기적으로 실행되는 것 처럼 보여주는 API ·기존의 promise위에 좀 더 간편함을 추가한 syntactic sugar
왜 비동기처리는 필요한 것일까?
· JS엔진에서는 {} 안에 있는 항목들을 동기적으로 실행하게 된다. · 이때 만약 {}안에 시간이 오래 걸리는 항목이 있게 되면, 문제발생! ·그러므로 이렇게 시간이 필요해 보이는 항목들은 비동기적으로 처리
✔️ Promise?(상황극) => 내가 언제 data를 받아 올 수 있을지 모르지만, 약속하는 것! => Promise라는 Object를 가지고 있고, then이라는 콜백함수를 => 등록해 놓는 다면, data를 받아오는대로 (비동기적처리가 완료되는대로) => then에 준비한 콜백함수를 실행시켜줄게! 라고 약속하는것
위와 같은 일반적인 함수가 있고, 그것의 실행값을 user라는 변수에 담은 뒤, 콘솔에 출력 시키면 어떤 값이 출력 될까?
당연히 [1, 2, 3, 4, 5] 라는 arr이 출력 될것이다.
하지만 우리가 아래처럼 funcion 앞에 async라는 것을 붙여주게 된다면? 그 결과는 어떻게 달라질까?
이 상황에서 콘솔에 출력되는 값은 아래와 같은 Promise객체가 된다.
async함수를 썼을때 출력되는 Promise 객체
이 결과는 우리가 promise객체를 직접 만들고, then으로 출력하지 않은 아래와 같은 코드의 출력결과와 같다.
즉, 우리는 번거롭게 새로운 프로미스 인스턴스를 만들지 않고도, function 앞에 async라는 단어를 추가 함으로써,
매우 쉽게 Promise객체를 만들 수 있다는 것이다.
이러한 Promise객체값이 아닌, 제대로된 [1, 2, 3, 4, 5]라는 값을 얻기 위해서,
우리는 앞서 byPromise.then(data => console.log(data); 와 같은 방식의 콜백함수를 사용하였다.
이렇게 async를 통해 promise객체과 된 데이터에도 같은 방식(.then)도 이용이 가능하지만, await이란 것에 대해 알아보고자 한다.
await 이란?
· async함수에서만 사용이 가능! · Promise객체를 .then처럼 푸는 것이 가능!
