동기와 비동기, Promise

동기

실행된 코드의 결과가 나올때까지 대기하는 것

• 동기는 말 그대로 동시에 일어난다는 뜻으로 요청과 그 결과가 동시에 일어난다는 약속입니다
  바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 합니다
  설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야하는 단점이 있습니다

비동기

실행된 순서와 관계 없이 결과가 나오는 것

• 비동기는 동시에 일어나지 않는다를 의미합니다. 요청과 결과가 동시에 일어나지 않고, 결과가 주어지는데 시간이 걸리더라도 그 시간동안 다른 작업을 할 수 있음으로 자원을 효율적으로 사용할 수 있습니다

---

Blocking Model & Non-Blocking Model

• Bloking Model
  코드의 실행이 끝나기 전까지 실행 제어권을 다른곳에 넘기지 않아 다른 작업을 하지 못하고 대기하는 것

• Non-blocking Model
  코드의 실행이 끝나지 않아도 실행 제어권을 다른곳에 넘겨 다음 코드가 실행 될 수 있는 것 (자바스크립트는 논블로킹 모델)

그렇다면 동기, 비동기와는 뭐가 다른가?

• 제어권을 넘기면(Non-bloking) 다른 코드도 실행될 수 있으므로 비동기 처리가 가능하지만, 제어권을 넘기지 않으면 (Bloking) 비동기 처리가 가능한 환경이여도 비동기 처리가 불가능

• 자바스크립트는 Async + Non-Bloking Model 을 채용함 (현재 실행중인 코드 실행이 끝나지 않아도 다음 코드 호출)

• 자바스크립트는 각 명령들이 순서대로 실행될 수 있게 구현되어 있지만, Non Bloking Model에 의해 명령이 아닌 모든 함수는 비동기적으로 실행 됨

Promise

• 자바스크립트에서 비동기 처리를 동기로 처리할 수 있게 도와주는 객체 유형

• Promise 생성자 인터페이스
  executor에는 함수만 올 수 있으며 인자로 resolve, reject가 주입됨

• executor는 Promise의 실행함수라고 불리고, Promise가 만들어질 때 자동으로 실행됨
  프로미스가 연산을 언제 종료하는지 상관 X, resolve, reject중 하나를 무조건 호출

new Promise(executor);

new Promise((resolve, reject) => {
    // 명령문
})

• Promise의 상태
  -> 대기 (Pending) : 이행하거나 거부되지 않은 초기 상태
  -> 이행 (Fulfilled) : 연산이 성공적으로 완료
  -> 거부 (Rejected) : 연산이 필요함
  

Promise Then

• Promise가 만들어 질 때 executor가 실행되며, executor에서 resolve 함수가 호출되기 전까지 firstPromise.then(...) 안에 있는 코드를 실행하지 않음

Promise Catch

• Promise 안에서 에러가 throw 되거나 reject가 실행되면 catch 메서드에 작성한 함수가 실행됨

비동기 함수 (Async Function)

• 비동기 함수의 결과 값은 항상 Promise 객체로 resolve 됨
• 비동기 함수 안에서만 await 연산자 사용 가능

// 비동기 + 일반 함수
async function 함수이름() {
	// 명령문
}

// 비동기 + 익명 함수
async function() {
  // 명령문
}

// 비동기 + 화살표 함수
async () => {
	// 명령문
}

비동기 함수는 함수가 실행되기 전까지 Promise를 생성하지 않음

await 연산자

• await 연산자를 사용하면 Promise가 fulfill 상태가 되거나 rejected될 때 까지 함수의 실행을 중단하고 기다릴 수 있음
  Promise의 연산이 끝나면 함수에서 반환한 값을 얻을 수 있음
• await 연산자는 async 함수 안에서만 사용할 수 있음.