Js / 비동기 (1)

초짜의 개발 공부·2021년 8월 31일
0

비동기

목록 보기
1/2
post-thumbnail


→ 비동기란 ?

위의 사진과 같이 동기와 비동기 두 가지로 상태를 구분할 수 있다.

  • 동기(동시에 일어난다!) : 하던 작업을 수행완료 후에 다른 작업을 할 수 있다. 그렇기 때문에 요청을 하면 결과까지 동시에 발생. 요청에 blocking이다.

  • 비동기(동시에 일어나지 않는다!) : 하던 작업을 하는 도중에 다른 작업을 요청받을 수 있다. 요청에 대한 결과가 동시에 발생하지 않는다. 요청에 non-blocking이다. 요청을 받은 뒤 콜백함수로 실행한다.


비동기의 예

dom에서 이벤트 핸들러를 발생할 때 (onClick)
타이머 API



그렇다면 콜백함수(callback)는 뭘까?

간단하게 설명하면 콜백함수는 나중에 실행하는 함수이다. (내가 실행시키고자 할 때 요청한다.)



아래의 코드는 예시

//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 비동기적이 될 수 있다.

: 내부에서 실행하는 거면 동기적으로 실행
: 외부에서 서버 데이터나 타이머를 사용할 때는 콜 스택에서 실행이 아닌 큐에서 실행(위의 비동기의 예)



Promis()에 대해서 알아보자

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)
  })
})
  • promise는 두 개의 콜백함수를 받을 수 있는데 resolve와 reject라는 인자이다.

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)
})


async await에 대해 알아보자

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'
}

0개의 댓글