Asynchronous 2 ( 프로미스의 상태와 메서드)

Promise의 상태

콜백: resolve(value), reject(error)

• new Promise() 생성자에 전달되는 함수는 executor(실행자 또는 실행함수)라고 부른다. 그리고 executor의 인수로는 resolve(value)와 reject(error)라는 콜백이 있다. executor는 결과로 둘 중 하나를 호출하게 된다.
  - executor는 resolve()나 reject() 중 하나는 반드시 호출해야 하고, 처리가 끝난 프로미스에 resolve()와 reject()를 호출하면 무시된다.
  - resolve()의 경우는 작업이 성공적으로 끝난 경우에 그 value를 호출하고, reject()의 경우는 error를 호출한다.
  - resolve()와 reject()는 즉시 호출이 가능하다.
  

내장 프로퍼티: state, result

// 1초 뒤에 result는 "Success!"
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Success!"), 1000);
});
// 1초 뒤에 result는 "Fail!"
const promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error("Fail!")), 1000);
});

• 반환된 promise 객체에는 state와 result라는 프로퍼티가 있다.
  - state 에는 'settled(처리된)'상태와 'pending(대기)' 상태가 있다.
  - 'settled(처리된)'상태에는 fulfilled와 rejected가 있다.
  - state는 'pending(대기)' 상태에서 resolve()가 호출되면 fulfilled, reject()가 호출되면 rejected로 변한다.
  - result는 'pending(대기)' 상태에서 undefined이었다가 resolve()가 호출되면 value로, reject()가 호출되면 error로 변한다.
  - promise가 pending(대기)' 상태일 때는 비동기 처리 로직이 아직 완료되지 않은 상태이기 때문에 값을 읽어낼 수가 없다.
  

Promise의 메서드

then()

.then(successHandlingFunction)
.then(successHandlingFunction, errorHandlingFunction)
// 작성 방법

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Success!"), 1000);
});

promise.then(alert);
// 1초 뒤 "Success!" 출력

• then() 메서드는 수행하는 작업이 끝난 다음으로 계속해서 또 다른 작업을 하고자 할 때 사용하는 메서드이다.
• then()의 첫번째 인수는 프로미스 작업이 성공적으로 이행 되었을 때 실행할 함수, 두번째 인수는 프로미스 작업이 실패하여 거부가 되었을 때 실행할 함수를 넣는다.
• 이행되었을 때는 실행 결과를 받아오고, 거부되었을 때는 에러를 받아온다.
• 이 때 성공적으로 이행되었을 때만 다루고 싶다면, 첫번째 인수만 작성하면 된다.

catch()

.then(null, errorHandlingFunction)
.catch(errorHandlingFunction)
// 작성 방법

const promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error("Fail!")), 1000);
});

promise.catch(alert)
// 1초 뒤에 "Error: Fail!" 출력

• 작업이 실패하여 에러가 발생된 경우만 필요한 경우도 있다. 이 때 위 코드처럼 then() 메서드를 사용하여 처리가 가능하다.
• then() 메서드를 이용하여 처리하는 것보다 더 간결한 코드를 작성하고자 할 때, catch()를 사용한다. 위 코드는 동일하게 작동한다.
• 에러 처리를 할 때는 catch()를 사용하는 것이 더 간결할 뿐만 아니라, 오류를 제대로 잡아낸다. then() 메서드를 이용하여 에러 처리를 하면, 첫 번째 콜백 함수 내부에서 오류가 발생하는 경우에 오류를 제대로 잡아내지 못하는 이슈가 있다.

.finally

new Promise((resolve, reject) => {
  resolve("Success!");
})
  .finally(() => alert("The promise is ready."))
  .then(result => alert(result));
// 즉시 "The promise is ready."와 "Success!"가 순서대로 출력

new Promise((resolve, reject) => {
  reject(new Error("Fail!"));
})
  .finally(() => alert("The promise is ready."))
  .catch(error => alert(error));
// 즉시 "The promise is ready."와 "Error: Fail!"가 순서대로 출력

• 프로미스의 이행, 거부 상태와 관계 없이 절차를 마무리 하고자 할 때 사용한다.
• .finally는 자동으로 다음 핸들러에 결과와 에러를 전달한다.