then catch만 쓰다가 await의 실행순서를 마주치니 정말 머리가 하얘졌다..
아직 많이 모자란걸로 알고 배워야겠다.
참고영상 : 생활코딩 async&await
async function run(){
console.log('start');
var timr = await timer(1000);
console.log('time:'+time);
time = await timer(time+1000);
console.log('time:'+time);
console.log('end');
}
console.log('parent start');
run();
console.log('parent end')위함수를 실행시키면 어떤 결과값이 나올까??
결과값은
parent start
start
parent end
time:1000
time:2000
end이렇게 나온다.
그럼 다시 코드를 뜯어보면
async function run(){
console.log('start'); // 2-1번
아래부터는 비동기라 3번으로 넘어간 후 실행
var timr = await timer(1000); 4번
console.log('time:'+time);
time = await timer(time+1000);
console.log('time:'+time);
console.log('end');
}
console.log('parent start'); // 1번
run(); //2번
console.log('parent end') // 3번await 아래의 영역은 전부 timer를 기다린 후에 처리가 되므로
콜스택의 관점에서 본다면 (개인 생각)
1번 호출 후 실행
2번 호출 후 실행
2-1의 console.log('start') 호출 후 실행
await절은 호출 후 Web API에 넘기고 2번 삭제
3번 호출 후 실행
태스크큐로 넘어간 await절 다시 콜스택으로 호출
1번째 타임콘솔 호출 후 실행
2번째 타이머 호출 후 Web API로 넘기고 2번째 타이머 삭제
태스크큐 -> 콜스택으로 다시 호출
2번째 타임콘솔 호출 후 실행
console.log('end') 호출 후 실행
의 순서라고 생각된다.
미리 공부하고 갔으면 좋았을걸 막상 코드의 실행결과를 직접 예측할줄은 몰랐었다.
사실상 실제로 사용해본적 없는 기능이라 더더욱 멘붕이 왔었던...
그 외에도 모자란 부분은 수없이 많았지만 저 await의 실행순서가 뭔가 제일 아쉬워서 제일 먼저 정리해보았다.
지금 다시 그 문제 보면 풀 수 있을것같은데..!
>_<