# Promise, async await #2

Promise ?

JavaScript를 비동기적으로 처리할 때 사용되는 객체

• 이전 코드의 연산이 완료될때까지 기다리지 않고, 다음 코드를 실행하는 자바스크립트 특성

Promise 탄생 전

순서를 보장하는 코드를 구현하기 위해서 자바스크립트에서는 callback 함수를 사용했다.

readFile('1.js', function(error, script) {
	if (error) {
    handleError(error);
	} else {
    readFile('2.js', function(error, script) {
      if (error) {
        handleError(error);
      } else {
       readFile('3.js', function(error, script) {
	      if (error) {
	        handleError(error);
	      } else {
	        // ...
      }
      }
    }
  }
}
// readFile를 처음 실행하고 error가 나면 에러처리 나지 않으면 readFile2를 실행
// 과 같이 순차적으로 실행한다 -> callback 함수가 깊어짐 = callback 지옥이라 부름

Promise가 탄생 후

function readFilePromise(filename) { // readFilePromise()를 promise 형태로 구현
  return new Promise((resolve, reject) => {
    if(error) {
      reject(error); // promise의 상태 표현
      return;
    }

    resolve(result); // promise의 상태 표현
  })
}

readFilePromise('1.js') //readFilePromise() 읽고 난 후 그 다음
  .then(() => readFilePromise('2.js')) // then이라는 키워드 사용해서 2, 3도 읽는다
  .then(() => readFilePromise('3.js'))
  .catch((error) => handleError(error))

Promise의 상태

⇒ promise가 반환하는 객체

• Pending(대기) : 비동기 로직의 대기 상태
• Fulfilled(이행) : 비동기 로직이 완료된 상태. 결과값을 받은 상태
• Rejected(실패) : 비동기 로직이 실패 or 오류가 발생한 상태

1. promise는 pending 상태를 처음에 거쳐서
2. fullfilled가 일어나면 then이 호출된다. → 그래서 위의 예시 코드 보면 readFilePromise 함수 다음에 then을 호출한다. (then에 도달했다는것은 이미 fullfilled 상태라는 뜻)
3. reject는 에러가 발생했을 때, then이 아니라 catch를 사용할 수 있다.

⇒ 이런 방식으로 자바스크립트에서 promise를 동작할 수 있다.

Async Await

promise는 then이라는 키워드를 통해서 계속 promise 체인이 일어난다.

이런 방식이 너무 좋지는 않음, 그래서 async await가 나옴

function readFilePromise(filename) {
  return new Promise((resolve, reject) => {
    readFilePromise(filename, function(error, result) {
      if(error) {
        reject(error);
        return;
      }

      resolve(result);
    })
  })
}

try {
  await readFilePromise('1.js');
  await readFilePromise('2.js');
  await readFilePromise(`3.js`);
} catch (e) {
  handleError(error);
}

• promise 객체로 생성된 함수는 비동기적으로 호출할 수 있는 방식
• then을 거치지 않고 끊기는 함수 만들 수 있다.

async function 함수명() {
	await 비동기함수();
}
// await 함수를 호출하기 위해 상위에async라는 키워드를 꼭 가지고 있어야 한다
// async await가 짝꿍이 되어야 함

Async Await 에러처리

**try {**
  await readFilePromise('1.js');
  await readFilePromise('2.js');
  await readFilePromise(`3.js`);
} **catch (e)** {
  handleError(error);
}

try catch문을 사용

• try문을 실행하고 안에서 에러가 나면 catch문에서 error 객체를 받는다.

처음에 javascript callback 함수 이용 → promise → async await