비동기

김나율·2022년 9월 27일

section2

목록 보기

6/15

blocking: 하나의 작업이 끝날때까지, 이어지는 작업을 ‘막는것’
시작시점과 완료시점이 같은 상황은 ‘동기적(synchronous)이다’ 라고 한다.
합리적인것은 non-blocking하고 비동기적으로 작동하는 것

<비동기 호출(Asynchronous call) 순서를 제어하고 싶은 경우>

‣ callback

: 다른 함수의 전달인자로 넘겨주는 함수
1. Callback in action: 반복 실행하는 함수(iterator)
=> 배열의 길이만큼 반복
2. Callback in action: 이벤트에 따른 함수( event handler)

*함수실행을 연결하는 것이 아니라 함수 자체를 연결하는 것
Ex) document.querySelector(‘#btn’).onclick= handClick(); (x)
document.querySelector(‘#btn’).onclick= handClick; (o)

ex)

  const prString=(string, callback)=>{
  }
 Const prAll=()=>{ //콜백을 받는다.
  prString(“A”,() =>{
   prString(“B”,() =>{
    prString(“C”,() =>{})
    })
   })
  }  //A B C 순서대로 나온다.
  ```

But, callback hell이 형성될 수 있다.
순서대로 일어나지만 수가 많아지면 가독성이 떨어진다.

‣Promise

: 하나의 클래스로 다음 action으로 넘어가거나 에러를 핸들링 가능하다.
callback을 받지않고 promise만의 resolve와 reject인자를 받는 콜백을 넣어서 실행한다.

resolve: 인수가 하나인 함수

reject: 이유 또는 오류를 인수로 취하는 함수

ex)

  const prString=(string)=>{
  Return new Promise((resolve, reject)=>{
  if(someCondition){
  resolve('I resolved');
  }else{
  reject('I rejected');
  }
 })
}
 Const prAll=()=>{
  prString(“A”)
  .then(() =>{ //A 비동기 작업이 끝나면
   Return prString(“B”)
  })
  .then(() =>{  //B 비동기 작업이 끝나면
   Return prString(“C”)
   })
   .catch
  } //동작은 동일, A B C 순서대로

첫 task가 끝나고 난후 .then으로 다음 task를 이어서 진행가능하다.
에러 처리가 되는 경우에는 .catch로 에러 핸들링을 마지막 체이닝에서 한다.
*callback은 항상 에러처리를 하고 promise는 마지막 체인에서 .catch에서 잡는다.But, return을 하지 않으면 끝나고 실행해서
promise hell이 일어날수 있다.

‣promise chaining

: return을 통해 해당 비동기를 다음으로 넘기면 callback을 피할수 있다.

‣Async await

: await로 비동기함수들을 동기적인 프로그램인것처럼 쓸수 있다.
(일반함수인것처럼 할 수 있다.)

ex)

function getUp(){
  return new Promise((resolve, reject) => {
    setTimeout (() => { resolve('1 , get up')},100)
  })
}
function sitChair(){
  return new Promise((resolve, reject) => {
    setTimeout (() => { resolve('1 , sit chair')},100)
  })
}
function openThebook(){
  return new Promise((resolve, reject) => {
    setTimeout (() => { resolve('1 , open the book)},100)
  })
}
const result= async() => {  //async무조건 써야한다.
  const one= await getUp();
  console.log(one);
  const two= await sitChair();
  console.log(two);
  const three= await openThebook();
  console.log(three);
} //순서대로 실행한다.

동기적으로 쓸수 있어 훨씬 코드 가독성이 높아진다.

◎타이머관련 API

setTimeout(callback, millisecond)
: 일정 시간 후에 함수를 실행
-매개변수: 실행할 콜백함수, 콜백함수 실행 전 기다려야할 시간(밀리초)
-Return 값: 임의의 타이머 ID
ex)
```
setTimeout(function () {
   console.log('1초 후 실행');
 }, 1000);
 or
 setTimeout(callbackfunction,2000)
```

cleartimeout(timerId)
: setTimeout 타이머를 종료
-매개변수: 타이머 ID
-Return 값: 없음

ex)

const timer = setTimeout(function () {
 console.log('10초 후 실행');
}, 10000);
clearTimeout(timer);

setInterval(callback, millisecond)
: 일정 시간의 간격을 가지고 함수를 반복적으로 실행
-매개변수: 실행할 콜백함수, 반복적으로 함수를 실행시키기 위한 시간 간격(밀리초)
-return 값: 임의의 타이머 ID
Ex)
```
setInterval(function () {
 console.log('1초마다 실행');
}, 1000);
```

clearInterval(timerId)
: setInterval 타이머를 종료
-매개변수: 타이머 ID
-return값: 없음

ex)

const timer = setInterval(function () {
 console.log('1초마다 실행');
}, 1000);
clearInterval(timer);

김나율

이전 포스트

프로토타입(2)

다음 포스트

비동기