TIL_비동기

Today 공부

• 비동기
• blocking / non-blocking
• synchronous / asynchronous

• callback
• Promise
• async / await

---

비동기 호출

• Javascript는 synchronous(동기적)이다

• synchronous (동기) : 요청에 대한 결과가 동시에 일어난다

• asynchronous(비동기적) : 요청에 대한 결과가 동시에 일어나지 않는다

비동기의 주요 사례

• DOM Element의 이벤트 핸들러
  • 마우스, 키보드 입력(click, keydown 등)
• 타이머
  • 타이머API (setTimeout 등)
• 서버에 자원요청 및 응답
  • fetch API
  • AJAX (XHR)

---

Callback

  const printString = (string, callback) => {
	setTimeout(
    	() => {
        	console.log(string)
            callback() // 콜백실행 (받은함수)
        },
        Math.floor(Math.random() * 100) + 1
     )
  } 
  const printAll = () => { 
    printString("A", () => {  // 콜백 실행
       	printString("B", () => { // 콜백 실행
           	printString("C", () => {}) // 콜백 실행..
          })
      })
   }
  printAll()

콜백을 이용하여 원하는 순서를 지킬 수 있다.
하지만 콜백이 많아지면 Callbak HELL 이라고 불리는 형태가 되고
코드를 관리하기가 어려워진다

콜백 헬을 벗어나기 위해 Promise를 이용한다

---

Promise

const printString = (string) => { // callback을 인자로 받지 않음
	return new Promise((resolve, reject) => { // 두개의 콜백 함수를 인자로 받음
		setTimeout(
	    	() => {
        	console.log(string)
            resolve() // Promise가 이행 되었을 때
        },
        Math.floor(Math.random() * 100) + 1
     	)
     })
  } 
const printAll = () => {          // Promise Chaining 
    printString("A")              // A출력
    .then(() => {                 // then 으로 이어나갈 수 있음 (콜백같은함수)
    	return printString("B") 
    })
    .then(() => {               
       return printString("C")
    })
}
  printAll()

일종의 Promise 자체가 하나의 클래스 라고 표현할 수 있다.
new Promise()를 인스턴스가 생성된다.
resolve() , reject() 라는 명령을 통해서
다음액션으로 넘어가거나, 에러를 핸들링 할 수 있다.

Errer는 .catch로 잡을 수 있다.
Promise Hell 도 생길 수도 있다.

---

async / await

const result = async () => {            // 함수앞에 async를 붙여야 async를 사용할 수 있다
    const one = await gotoCodestates(); // 프라미스가 이행될 때까지 아래 코드로 넘어가지 않는다
    console.log(one) 
    const two = await sitAndCode();  // 
    console.log(two) 
    const three = await eatLunch();
    console.log(three) 
    const four = await goToBed();
    console.log(four)
} 
result();

표현자체를 동기적으로 쓸 수 있다.

---

마치며,

비동기식 처리방법에도 여러가지가 있다는 걸 알게 되었고,
각각의 장단점이 있는걸 알게 되었다.