비동기란
자바스크립트의 구조적 특성상 비동기적인 액션이 취해질경우가 많다.
쉽게생각하면 default가 비동기다.
동기란
같은기수 아니고
같이 흘러간다. 이런느낌이다.
C언어를 예를 들어보자.어떤 코드가 줄줄이 그대로 진행된다.
느낌으로는 커피숍에갔는데. 아메리카노 주문받고 만드는 동안 아무행동을 할수없다는것이다.(blocking)
Callback함수
먼저 콜백이라는친구에 대해서 이해가 잘되어 있어야한다.
콜백 왜 콜백일까. 우리가원할때 다시 전화줘~
지금 자리에 없는데 , 이따 자리에있으면 전화좀 줘~ call Back !
결국 바로 실행! 이아니라.
나중에 그친구가 자리에 있으면 실행해~
function cbfn(){
//something
}
function aux(cbfn){
// 대충 무지막지하게 긴 코드 소모시간이 한 30초
cbfn();
}
aux();콜백함수가 실행되기까지 앞선 내용을 실행하고 aux가 원하는타이밍에 콜백함수를 사용할수있다.
callback화 하는방법
1. 함수만 보낸다.
2. 함수실행에 바인드로 묶어서보낸다.
3. arrow 함수를통해서 (무명)함수화해서 보낸다.
간단한 콜백에서는 1~2로도 충분하다.
하지만
특정 요청(콜)에의한 결과(데이터)를 받아서 그 데이터로 무언가 또 요청을 보낸다면?
결국 Ajax던, axios던 fetch던 api요청을 보내고 그결과로 또 요청을보내고 하면
after1second(()=>{
after2second(()=>{
after3second(()=>{
after4second(()=>{
after5second(()=>{
console.log("done!")
});
});
});
});
})
1초걸리는 요청~ 5초걸리는 요청을 함수이름으로 직관적으로 지어놨다.
즉
저 요청ㅇ은 1초요청ㅇ 결과를받아서 2초요청을보내고 ... 5초요청까지 간다.
-출처 : https://velog.io/@daybreak/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC
이 사진으로 쉽게 이해할수있다.
1+2+3+4+5 의 시간이 소모된다는점을 알수있다.
하지만 사진에서와같이 비동기라면?
근데 비동기는 default이다.
그리고 비동기가 성립하려면 에초에!!
데이터가 연결될이유가 없어야한다 (chaning)
즉 서로 독립적이여야하므로
after1second();
after2second();
after3second();
after4second();
after5second();
이러면 비동기적으로 실행된다.
하지만 우리가 필요한것은 동기인것이다.
사실 JS배우면서 비동기, 비동기 하지만
결국 비동기는 기본- > 동기처럼 쓰고싶어!
이부분이 우리가원하는 바이다.
Promise
일종의 약속이며,
형태이고, 상태를 나타낼수있고,
성공하면 1번째인자로받은 함수를 실행해야하고
실패하면 2번째인자로받은 함수를 실행해야한다.
예를들어서 오늘저녁에 친구랑 7시에 만나기로한 약속이있다.
let isTime7 = false; //아직 7시가아니다.
let 약속 = new Promise((약속이행,약속실패)=>{
if(isTime7){
약속이행("어서오고")
}else{
약속실패("아직시간이안됬어")
})
약속.then((data)=>{return data}) // 아직 시간이 안됬어
직관적으로 한글로 쓰자면 이런식의 코드가 진행된다.
그리고 우리는 주로 프로미스를 리턴에 주게되는경우가 많다.
왜냐하면 특정함수가 약속을 받환하면
우리는 그함수의 행동을 명시적으로 약속을 받아내는 느낌이다.
function 친구만나기(){
return new Promise((resolve,reject)=>{ // reject는 안쓴다면 생략가능
resolve("잘 만났다");
})
}
친구만나기().then((res)=>{return res})resolve로 보내는 값은
then으로 받아서 콜백의 첫번째 인자와 값이 같다!
하지만 결국 Promise도 then .. then .. then .. then ..등등 점점 길어지는데
가독성이 떨어진다 ..
그래서 등장한게
Async Await
Async 즉 비동기 ( 기본이긴하지만. . 명시적으로)로써 외부를 감싸고
내부에서 프로미스콜이 있을경우 그값을 await 시키면 동기적으로 그부분을 기다린다.
즉
친구랑약속잡기()
.then(몇시에만날까=>몇시에만날까)
.then(어디서만날까=>어디서만날까)
.then(무엇을할까=>무엇을할까)
.....
이렇게만되도 가독성이 나쁘진않다.
하지만
async await 을 사용하면
//async function 친구랑약속잡기 (){
// ...
//}
const 친구랑약속잡기 = async ()=>{
await 몇시에만날까();
await 어디서만날까();
await 무엇을할까();
}처럼 생각할수있다.
(실제사용과는 많이다를수 있다 .)
핵심은
1. await을 쓰고싶다면 async로 감싸줘야한다.
2. async를 호출하면 호출한 함수도 async화 되어야한다. (오류가생긴다면 이부분부터 체크)
