[JS] 비동기 다시 정리 : callback / promise / async, await

callback

비동기이다.

비동기적이다. (hello가 먼저 찍힘)

비동기적이다. (거의 동시다발적)

 

콜백을 이용해 순차적으로 실행한다.

 

 

2를 뒤에 넣어도 비동기이기 때문에 이와 무관하게 12번째 딜레이가 시작되자 마자 2~ 가 출력된다.

-> 문제 : 가독성이 떨어진다. (실행순서가 바로 눈에 들어오지 않는다.)

 

---

promise

기본형태 (11라인부터)

 

.then에 결과를 받을 콜백을 넣게 된다.

then이라는 메소드 가지고 있는 애가 promise의 인스턴스이다. 즉, delayP에서 만드는게 promise의 인스턴스.

 

 

8, 20번째 줄 정상 작동

resolve 에 결과값에 넘겨지게 되면 then에게 넘겨주게 된다.

 

프로미스에서는 콜백을 순차적으로 지정해준다.

 

promise를 리턴

 

 

아무 것도 리턴하지 않으면 result 값에는 undefined가 들어간다.   then의 리턴값은 resolve한 프로미스를 리턴한다.

비동기 연산인 promise를 리턴하지 않기 때문에 지연 없이 마지막 로그가 찍힌 것

 

async/ await

 

 

async 도 promise 를 리턴한다. 즉 then을 쓸 수 있다. 여기서의 result 는 return 값이다. 

(promise에서 then의 리턴값이 곧 다음 promise의 값으로 넘어가듯)

 

 

async 에서는 reject을 해야한다면 안에서 에러를 throw하면 된다.

awiat은 promise가 resolve 되어 결과값이 오길 기다린다. 

 

비동기다. async 먼저 찍히고 3초 뒤에 시간이 찍힌다.

 

 

 

delayP promise 가 resolve 되기 전까지 기다린다.

 

 

 

then에서 받은 결과값을 마치 일반함수 리턴값을 받듯이 쓸수 있게 된다.

 

 

반 함수 앞에 await 을 넣어도 된다. 꼭 promise 리턴이 아니어도 된다.