서론

• '(JavaScriot) 비동기(1)' 앞 글을 통해서 어떻게 JavaScript가 비동기적으로 함수를 처리하는 지 알아보았다.
• 우리는 가독성과 편의를 위해 이러한 비동기 처리를 동기적으로 할 수 있게 '흐름 제어'라는 것을 해야한다.

흐름 제어

: 비동기적으로 실행되는 함수를 동기적으로 흐름을 제어하는 행위

---

• 3가지의 방법이 있다.
  1) Callback 함수 사용

func1(function(err1){
  console.log('func1');
  func2(function(err2){
    console.log('func2');
    func3(function(err3){
      console.log('func3');
    });
  });
});

: 연관성이 있는 함수들을 순서대로 실행하기 위해 함수 안에 함수가
  들어가는 형태가 계속 반복된다!! --> Callback -Hell이라고 부른다.
      (코드의 가독성이 좋지 못함)

---

2) Promise
: Callback보다 효율적으로 흐름 제어를 하기 위한 방법
  3가지 상태를 갖는다. (Pending / Fullfilled / Rejected)

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

 new Promise(); 
  // 최초 호출을 할 때 대기(Pending)상태가 된다.

 new Promise(function(resolve, reject){   
 });
  // resolve()와 reject()를 사용할 수 있다.

---

• Fullfilled(이행)
  : 비동기 처리가 완료되어 프로미스가 결과 값을 반환(성공) 해준 상태

function getData(){
 return new Promise(function(resolve, reject){
   var data = 100;
    resolve(data);
 });
}

getData().then(function(resolvedData){
    console.log(resolvedData); // 100
});

: '이행' 상태는 코드를 성공하는 것을 의미하며
  .then()을 이용하여 처리 결과 값을 받을 수 있다.
(이렇게 .then()을 이용해서 여러 개의 프로미스를 연결시키는 것을
  Promise Chaining이라고 한다.)

---

• Rejected(실패) : 비동기 처리가 실패하여 오류가 발생한 상태

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

: 코드를 처리하는데 오류가 발생한 것을 의미한다.
  이렇게 reject되면 .catch()를 이용해서 예외처리를 해줄 수 있다.

---

3) async/await
: 사용하기 어려운 promise()의 단점을 개선하기 위한 방법.
내부적으로 promise객체를 사용하며 사용하기가 좋다!

// 비동기 콜백 함수
function delay(sec) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('B')
    }, sec*1000);
  });
}

  // async await 사용!
async function myAsync(){
  console.log('A');
  try{ // 예외 처리 (promise에서 reject하면 catch로 가게 된다.)
    const result = await delay(3).then(result => console.log(result));
  }catch(e){
    console.error(e); 
  }
  console.log('C');
}

myAsync();
 // 비동기 콜백 함수를 await을 사용해서 기다리게 했기 때문에
 // A -> B -> C  순서대로 출력된다.

: 비동기 함수 delay에 await을 사용하여 동기적으로 흐름 제어를 하였다.

• async를 선언한 함수 내부에서만 await을 사용할 수 있다.
• Promise만을 쓰는 것 보다 쉽게 사용할 수 있다.
• 일반 함수 사용해도 오류가 나지 않는다.
• 예외 처리는 try ~ catch 를 통해서 한다.