비동기란?
예를 들어, 카페에서 1번 손님이 커피를 주문하고, 커피가 나올 때까지 2번 손님이 커피를 주문을 못한다면 => 'blocking' 이라고 한다.
1번 손님의 커피가 나오는 시점과
2번 손님이 주문을 하는 시점이 같은 것을 '동기적'이라고 한다.
Node.js 개발자가, non-blocking과 비동기적으로 작동하는 런타임으로 개발을 했다.
비동기 주요 사례로,
DOM Element 이벤트 핸들러(click, keydown) / 페이지 로딩, 타이머API, fetch API
그냥 딱 예를들어
유튜브 영상 보면서 다른 것도 할 수 있잖아!
검색을 할수도, 댓글을 적을수도,,, 다 비동기임
Callback
오케이~ 비동기가 좋은거 알겠어.
빨리 끝나는 순대로 처리하다 보니까 순서가 뒤죽박죽 아니니?
순서를 제어하고 싶을 땐 어쩌고??
func('a', ()=>{
func('b', ()=>{
func('c', ()=>{
})
})
})위와 같이 콜백함수를 이용해서 내가 비동기 함수 func의 순서를 내가 제어할 수 있게 된다. (func를 비동기 함수로 코드를 짰다고 생각했을때)
(err,data) =>{
if(err){
callback(err, null)
}else{
callback(null, data)
}
}
err, data 콜백함수를 전달인자로 받을때의 코드
근데 콜백함수를 이용하면 '콜백헬' 이 우려된다.
그래서 생겨난게 Promise
Promise
Promise 자체가 하나의 클래스 같은 것이다.
그래서 new Promise 를 통해서 인스턴스가 만들어진다.
resolve(), reject() 를 전달인자로 받고, 이를 통해서 핸들링을 한다.
또, .then()을 통해서 함수의 순서를 제어하고 있는 것을 볼 수 있다.
.then()이 재밌는게
.then(()=>{return }) 이런식으로 순서를 제어해주기도 하지만
.then((el)=> return el.map()) 이런식으로 위의 정보를 그대로 el에 받아와서 그 정보를 갖고 놀 수 있다는 점이다.
const printString = (string) => {
return new Promise((resolve, reject)=>{
setTimeout(
()=> {
console.log(string)
resolve()
},
Math.floor(Math.random() * 100) + 1
)
})
}
const primtAll =() =>{
printString('a')
.then(()=> {
return printString('b')
})
.then(()=>{
return printString('c')
})
}
printAll()
Promise Chaining
이렇게 return 을 통해서 데이터를 잘 받아오고 .then()으로 이어가는 것을 'promise chaining' 이라고 한다. Promise hell이 되지 않게 만들어 준것임
async / await
그리고 Promise의 쌍둥이 녀석이 있다.
비동기 함수들을, 마치 동기적인 함수처럼 쓸 수 있다.
그리고 async와 await을 항상 같이 써줘야 한다.
따라서 밑의 코드에서 two가 더 빨리 실행됨에도 불구하고,
one two의 순서로 return 된다.
const result = async() =>{
const one = await 비동기함수1(2초후 실행);
const two = await 비동기함수2(1초후 실행)
}
