비동기 처리, Callback 이해하기

동기와 비동기

자바스크립트는 동기적!

코드가 우리가 작성한 순서에 맞춰 실행됨

hoisting : 함수 선언들이 제일 위로 올라가는 것

 

비동기: 언제 실행될지 알 수 없음

setTimeOut: 우리가 지정한 시간이 지나면 우리가 전달한 콜백함수 실행해줘 => 브라우저 API

 

브라우저 API?

브라우저에게 무조건 먼저 요청을 보내는 것

 

언제 개강할지 모르는 강좌

미리 이메일을 통해 등록할수 있게 함

학생 a : 등록 완료함

며칠 뒤 강좌 오픈. 학생 a에게 공지 전달=> 수업참여

 

학생B : 이미 개강후에 소식을 접해 이메일로 수강신청 => 바로 수업참여

 

Promise : 비동기작업을 위해 콜백함수 대신 사용됨

1) state(상태) : process가 무거운 operation을 수행중인지, 끝났는지 

pending(비동기 처리 수행전)=>fulfille(수행 성공(resolve 호출)) or rejected(수행 실패(reject 호출))

settled: 성공 or 실패

let promise = new Promise((resolve, reject)=>{
	setTimeout(()=>{resolve("완료!")},1000)
});

promise.then(result=>{ //성공했을때, 실패했을 때(꼭 넘겨줄 필요는 없다)
	console.log(result);
}, error =>{
console.log('errrr')'
});

출력값

//보낸다.
Promise{<pending>};
완료!
//준비됨ㅋ

promise 입력

출력값
Promise{<fulfilled>:"완료!"}

 

프라미스 체이닝(promise chaining)

: 후속처리 메서드(then)을 이어주는것(콜백헬 해결가능)

먼저해야하는 비동기 작업 순서대로 써줌

 

 

 

2) 데이터를 제공한사람(producer)과 데이터를 받아쓰는사람(consumer)

When new Promise is created, the automatially.

 

비동기 처리를 엄청 많이하게 되면?

어떤 값을 받아와야 하는데 이걸로 다른비동기 작업을 해야하는 상황이 문제가 있음

 

꼬리에 꼬리를 물고 가는것 => 콜백헬

 

그래서 나온게 Promise

=> 비동기 연산이 종료된 이후에 결과를 알기위해 사용

비동기 처리 시점을 더 명확하게 표현할 수 있다.

 

Promise(resolve, reject) => { } 

resolve : 성공 시

reject : 실패 시

 

async & await

1)async
: 비동기도 아니고 Promise를 만들지 않았음에도 async를 사용하면 Promise를 반환함

async function myFunc(){
	return "hello"; //문자열만 넣어도 async를 사용하면 Promise를 반환한다
}

myFunc( ).then(result=>{
	console.log(result);
})

출력값

hello
Promise{<fulfilled>:undefined} //완료돼따

2)await

: 자바스크립트에서 비동기 작업을 하면 "일단 비동기 작업 해줘" 하고 위임해놓고 바로 다음 작업을 함

  await를 사용하면 promise가 작업이 끝날때까지 기다렸다가 결과를 듣고 다음 작업

async function myFunc1(){
	let promise = new Promise((resolve,reject)=>{
    	setTimeout(()=> resolve("hello"),1000);
    });
    console.log(promise);
    
    let result = await promise;
    
    console.log(promise);
    console.log(result);  
}

myFunc1() 입력

출력값
//첫번째 콘솔
Promise{<pending>}
//두번째 콘솔
Promise{<pending>}
Promise {<fulfilled>:"hello"}
//세번째 콘솔
hello