callback -> promise -> async-await 순으로 개선됨.
function aaa(qqq) {
//함수로직
}
aaa(function(){})
aaa(() => { })aaa안에 function(), ()=>{}가 callback함수이다.
why?
데이터를 받아오고 그 값을 받아서 요리를 해줄때 사진처럼 써줬다.
callback을 계속 사용하다 보면 콜백지옥(callback hell)에 빠진다.
그래서 나왔던게 promise이다.
.then or .catch를 이용해 깔끔하게 사용할 수 있었다.
setTimeOut은 매크로-태스크큐
promise는 마이크로 태스크 큐
두개의 차이는 우선순위의 차이가 있다.
마이크로 태스크큐는 얘부터 꺼내서 실행하고, setTimeOut은 마지막에 심심하면 들러서 꺼내오는 느낌으로 내용을 꺼내쓴다.
문제
결과
bbb함수에서 bbb시작을 콘솔로 찍고
async가 await를 만나자마자 마이크로큐로 들어가서 모든게 끝나고 실행되던 곳을 기억했다가 거기서부터 다시 시작해서 이런 결과가 나타났다.
문제2
결과
bbb에서 ccc()가 실행되고 await가 만나져서 ccc가 4번째 실행에 ccc시작이 나온다.
async가 await를 만나면 await를 써준 axios나 promise를 마이크로큐에 넣어주고 그 다음에 await를 감싸고 있는 함수가 마이크로큐에 들어가게 된다.
이제 콜스택에 들어가있는 것들이 다 끝나고 마이크로큐에 있는 걸 시켜줄때 promise를 실행시켜주고 그 다음 들어온 function을 await 아래로 다시 실행시켜주니 기다려준 것처럼 보여진 것이다.
그럼 이 사진을 해석해보면
함수가 실행되면 isSubmmitting이 true가 되고 await부터 마이크로큐로 가기때문에 함수가 끝나고 다시 실행되고 마지막에 isSubmmitting가 false가 돼서 setIsSubmmitting가 두번 실행되는 것이다.
=> 버튼을 누르면 블락처리가 되고 함수가 끝나고 await가 실행되고 다 불러오면 마지막에 다시 false가 되니 다시 누를 수 있게 된다.
