[JS] Promise

js는 비동기 처리를 위해 콜백함수를 사용하지만 뎁스가 너무 깊어지면 콜백 지옥에 빠질 수도 있음
또한 에러처리도 힘들 뿐더러 여러 개의 비동기 처리를 한 번에 하는데 한계가 있다
이런 콜백 함수의 단점을 보완하기 위해 사용하는 객체를 promise라 한다

promise는 객체이기 때문에 생성자 함수를 호출하여 인스턴스화 할 수 있다
promise는 비동기 처리가 성공(fulfilled) 또는 실패(reject) 등의 상태 정보를 갖게 된다

Promise의 4가지 상태

1. fulfilled: Promise가 성공했을 때
2. rejected: Promise가 실패했을 때
3. pending: 아직 보류중일 때 / 아직 fulfilled이나 rejected가 나기 직전
4. settled: fulfilled 이거나 rejected 상태가 나온 후 (결론이 난 상태)

const tmp = () => new Promise((resolve, reject) => {

  let data = 1224;

  if (data === 1224) {
    resolve(data);
  }

  reject(Error("Something Broken"));
})

tmp().then(res => console.log(res))
    .catch(error => console.log(error))

// example
tmp().then((res) => console.log(res), (error) => console.log(error))

tmp 변수에 promise를 할당하였고(pending) data가 1224이면 resolve를 호출하고(fulfilled 상태) 아니면 reject을 호출한다

then에서 두 개의 매개변수를 받아 그 안에서도 에러처리를 할 수 있겠지만, promise는 catch에서 에러잡는게 더 효율적으로 관리할 수 있다고 한다
example로 작성한 코드를 보면 then 안에 첫 번째 인자로 success handler를 등록하고, 두 번째 인자로 error handler를 등록하였는데 이런 방식으로 작성하면 then 안에서 에러가 났을 경우 제대로 인지를 할 수가 없다 그렇기 때문에 then().catch() 구조를 사용하는걸 권장한다