1. 후속 처리 메서드(Consuming Code)

---

• 프로미스의 비동기 처리 상태가 변화하면 후속 처리 메서드에 인수로 전달한 콜백 함수가 선택적으로 호출되는데 이때 후속 처리 메서드의 콜백 함수에 프로미스의 처리 결과가 인수로 전달된다.

• 모든 후속 처리 메서드는 프로미스를 반환하면, 비동기로 동작한다.

1) Promise.prototype.then

• 비동기 작업(excutor)이 성공하면 then 메서드는 두 개의 콜백 함수를 인수로 전달 받는데, 첫 번째 콜백 함수는 비동기 처리가 성공했을 때(recsolve) 호출되는 성공 처리 콜백 함수이며, 두 번째 콜백 함수는 비동기 처리가 실패했을 때('rejected') 호출되는 실패 처리 콜백 함수다.

• then 메서드의 콜백 함수가 프로미스를 반환하면 그 프로미스를 그대로 반환하고, 콜백 함수가 프로미스가 아닌 값을 반환하면 그 값을 암묵적으로 resolve 또는 reject하여 프로미스를 생성해 반환한다.

• 기본 문법

promise
  .then(function (value) {
    // code if successful
  });

let promise = new Promise(function (resolve, reject) {
    // 2초후 작업이 성공하면 resolve 콜백 함수를 호출하며 이때 인자로 JSX를 전달
    setTimeout(function () {
        resolve('JSX')
        // reject(new Error('no JSX'))
    }, 2000)
});

promise
    .then(function (value) {  // 여기서 result는 resolve 콜백 함수를 통해 인자로 전달 된'JSX'
        console.log(value); // JSX
    });

2) Promise.prototype.catch

• 비동기 작업(excutor)이 실패하면 catch 메서드는 한 개의 콜백 함수를 인수로 전달받는데, catch 메서드의 콜백 함수는 프로미스가 rejected 상태인 경우만 호출된다.

• 에러가 발생한 경우만 다루고 싶다면 .then(null, errorHandlingFunction)같이 null을 첫 번째 인수로 전달하면 된다. .catch(errorHandlingFunction)를 써도 되는데, .catch는 .then에 null을 전달하는 것과 동일하게 작동한다.

• then 메서드와 마찬가지로 항상 프로미스를 반환한다.

let promise = new Promise(function (resolve, reject) {
  // 2초후 작업이 성공하면 resolve 콜백 함수를 호출하며 이때 인자로 JSX를 전달
  setTimeout(function () {
    resolve('JSX')
 // reject(new Error('no JSX'))
  }, 2000)
});

promise
  .then(function (value) {  // 여기서 result는 resolve 콜백 함수를 통해 인자로 전달 된'JSX'
    console.log(value); // JSX
  })
  .catch(function (error) {
    console.log(error); // no JSX
  })

3) Promise.prototype.finally

• finally 메서드는 한 개의 콜백 함수를 인수로 전달받는데, 비동기 작업(excutor)의 성공(resolve)이나 실패(reject)와 상관없이 무조건 호출된다.

• finally 메서드는 프로미스의 상태와 상관없이 공통적으로 수행해야 할 처리 내용이 있을 때 유용하며, finally 메서드도 then, catch 메서드와 마찬가지로 항상 프로미스를 반환한다.

• finally는 아무런 인자(매개변수)를 받지 않는다.

let promise = new Promise(function (resolve, reject) {
  // 2초후 작업이 성공하면 resolve 콜백 함수를 호출하며 이때 인자로 JSX를 전달
  setTimeout(function () {
    resolve('JSX')
 // reject(new Error('no JSX'))
  }, 2000)
});

promise
  .then(function (value) {  // 여기서 result는 resolve 콜백 함수를 통해 인자로 전달 된'JSX'
    console.log(value); // JSX
  })
  .catch(function (error) {
    console.log(error); // no JSX
  })
  .finally(function () {
  // 성공 시 2초 후 JSX와 finally 동시 출력
  // 실패 시 2초 후 no JSX와 finally 동시 출력
    console.log('finally JSX')
  })

2. 에러 처리(Error Handling)

---

• 비동기 처리 결과에 대한 후속 처리는 then catch finally을 사용하여 수행한다.

1) then 메서드를 이용한 에러 처리

• then 메서드의 두 번째 콜백 함수로 에러 처리를 할 수 있다. 그러나, then 메서드의 두 번째 콜백 함수는 첫 번재 콜백 함수에서 발생한 에러를 캐치하지 못한다.

const url = 'https://navsr.com/XXX/1';

promiseGet(url)
  .then(
    res => console.log(res),
    err => console.log(err)
  );  // Error: 404

2) catch 메서드를 이용한 에러 처리

• catch 메서드를 모든 then 메서드를 호출한 이후에 호출하면 비동기 처리에서 발생한 에러(reject 상태) 뿐만 아니라 then 메서드 내부에서 발생한 에러까지 모두 캐치할 수 있다.

• then 메서드 두 번째 콜백 함수를 전달하는 것보다 catch 메서드를 사용하는 것이 가독성이 좋고 명확하므로 catch 메서드 사용이 권장된다.

// catch 메서드로 에러 처리
const url = 'https://navsr.com/XXX/1';

promiseGet(url)
  .then(res => console.log(res)); 
  .catch(err => console.log(err));  // Error: 404