24일차(2) - 비동기

비동기

Callback, Promise, Async/Await는 비동기 코드의 작동 순서를 제어하기 위해 사용한다.

• 동시에 일어나지 않는다를 의미한다.
  요청과 결과가 동시에 일어나지 않을 거라는 약속이다.
  하나의 요청에 따른 응답을 즉시 처리하지 않아도, 그 대기 시간동안 또 다른 요청에 대해 처리 가능한 방법

• 시작 시점과 완료 시점이 같은 상황 ㅡ> "동기적(synchronous)이다."

• 비동기는 음식점에서 실시간으로 여러 주문을 받고 주문받은 순서와 상관없이 조리가 완료되는 대로 서빙하는 원리와 같다.
  즉, 코드의 순서가 정해져 있지 않다는 의미

callback

• Callback 함수를 통해 비동기 코드의 순서를 제어할 수 있다.
  즉, 비동기 코드를 동기화할 수 있다는 의미.
  코드가 길어질 수록 복잡해지고 가독성이 낮아지는 Callback Hell이 발생하는 단점이 있다.

  

promise

new promise()를 통해서 인스턴스를 생성

• 프로미스를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태(states)
  여기서 말하는 상태란 프로미스의 처리 과정을 의미한다.

new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

• new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject.

• 호출된 메서드에 따라 then()이나 catch()로 분기하여 응답 결과 또는 오류를 출력합니다.

Callback 함수와 마찬가지로 Promise를 통해 비동기 코드의 순서를 제어할 수 있다
Callback 함수와 같이 코드가 길어질수록 복잡해지고 가독성이 낮아지는 Promise Hell이 발생하는 단점이 있다.

• resolve() ㅡ> 다음 액션으로 넘어감

• reject() ㅡ> 에러 핸들링

• .then() ㅡ> A 비동기 에서 B 비동기 그리고 C 비동기 작업까지 이어줌
  catch()를 통해 에러 발생한 경우 reject 실행

• Promise.prototype.then은 Promise를 반환하므로 메서드 체이닝(Chaining)을 할 수 있다

• Promise.prototype.catch는 Promise를 반환하기 때문에 Promise.prototype.then처럼 메서드 체이닝이 가능하며 에러가 난 경우 실행된다.

ㅡ promise 에러 처리 2가지 방법

• 출처 : joshua1988.github.io
  

Promise Chaining

Async/Await

복잡한 Promise 코드를 간결하게 작성할 수 있게 되었다.
사용법은 함수 앞에 async 키워드를 사용하고 async 함수 내에서 await 키워드를 사용하면 됩니다. 이렇게 작성된 코드는 await 키워드가 작성된 코드가 동작하고 나서야 다음 순서의 코드가 동작하게 됩니다.

• 출처 : joshua1988.github.io
  

// 함수 선언식
async function funcDeclarations() {
	await 작성하고자 하는 코드
	...
}

// 함수 표현식
const funcExpression = async function () {
	await 작성하고자 하는 코드
	...
}

// 화살표 함수
const ArrowFunc = async () => {
	await 작성하고자 하는 코드
	...
}

타이머 API

타이머 관련 API

1) setTimeout(callback, millisecond)

일정 시간 후에 함수를 실행

• 매개변수(parameter): 실행할 콜백 함수, 콜백 함수 실행 전 기다려야 할 시간 (밀리초)
• return 값: 임의의 타이머 ID

setTimeout(function () {
  console.log('1초 후 실행');
}, 1000);
// 123

2) clearTimeout(timerId)

setTimeout 타이머를 종료

• 매개변수(parameter): 타이머 ID
• return 값: 없음

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

3) setInterval(callback, millisecond)

일정 시간의 간격을 가지고 함수를 반복적으로 실행

• 매개변수(parameter): 실행할 콜백 함수, 반복적으로 함수를 실행시키기 위한 시간 간격 (밀리초)
• return 값: 임의의 타이머 ID

setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
// 345

4) clearInterval(timerId)

setInterval 타이머를 종료

• 매개변수: 타이머 ID
• return 값: 없음

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

출처: 유어클래스