위의 사진과 같이 동기와 비동기 두 가지로 상태를 구분할 수 있다.
비동기의 예
dom에서 이벤트 핸들러를 발생할 때 (onClick)
타이머 API
간단하게 설명하면 콜백함수는 나중에 실행하는 함수이다. (내가 실행시키고자 할 때 요청한다.)
아래의 코드는 예시
//setTimeout()
=> 첫 번째 인자 함수, 두번째 인자 시간
setTimeout(()=> {
console.log('say: hi')
},1000)
function Delay(callback, delay){
callback()
}
--동기적
console.log(1)
setTimeout(function(){
console.log('good')
},0)
console.log(2)
-- 비동기적
먼저 실행되는 것은 메인에 있는 숫자 1,2 그 다음으로 setTimeout()이 실행하게 된다!
콜백은 나중에 실행하라고 인자를 다른 함수에 넘겨준다. 그 콜백을 받은 함수가 역할에 따라서 함수가 실행한다. 콜백함수를 받는 함수가 어떻게 동작하는지에 따라서 동기적 or 비동기적이 될 수 있다.
: 내부에서 실행하는 거면 동기적으로 실행
: 외부에서 서버 데이터나 타이머를 사용할 때는 콜 스택에서 실행이 아닌 큐에서 실행(위의 비동기의 예)
function time(sec){
return new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve(new Date())
},sec * 2000)
})
}
---이러한 함수를 만들었다.
---then의 result에서 결과값을 알 수 있다.
time(1).then((result)=>{
console.log(1,result)
time(1).then((result)=>{
console.log(2,result)
})
})
resolve : 할 일을 다하면 호출
reject : 에러가 발생했을 떄 호출
- promise라는 인스턴스를 생성하게 되면 안에 저장된 then 메서드를 사용해서 data를 넘겨준다.
---이번 예시는 리턴을 통해 값을 전달한다.
function time(sec){
return new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve(new Date())
},sec * 2000)
})
}
---이런식으로 리턴해서 비동기로 받는다.
time(1).then((result)=>{
console.log(1,result)
return time(1)
}).then((result)=>{
console.log(2, result)
})
function base(){
return 'base'
} //결과값 스트링
async function okAsync(){
return 'async'
} //결과값 Promise
// async는 promise를 사용하기에 then도 사용가능하다.
async function okAsync(){
return 'async'
}
okAsync().then((result)=>{
console.log(result)
})
async는 내가 보낸 값이 resolve가 끝나야 다음 줄의 코드가 실행된다.
function time(sec){
return new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve(new Date())
},sec * 2000)
})
}
// 예시 1)
async function okAsync(){
await time(5)
return 'Hello async'
}
// 예시 2) 이런식으로 then을 붙여도 되고 할당도 가능하다!
async function okAsync(){
const ok = await time(5).then((data)=>{
return 'ok'
})
console.log(ok)
return 'Hello async'
}