[JavaScript - 22] Promise.prototype.then(), catch(), finally()

본 내용은 Promise 개념의 내용을 포함하고 있지 않습니다.

Promise를 모른다면 다음 사이트에서 Promise의 개념을 이해하고 보시길 바랍니다.

[JavaScript - 21] Promise

---

Promise.prototype.then()

executor(실행자)에 작성했던 코드들이 정상적으로 처리가 되었다면 resolve 함수를 호출하고 then()으로 접근할 수 있습니다.

또한 then() 안에서 리턴한 값이 Promise면 Promise의 내부 프로퍼티 result를 다음 then() 의 콜백 함수의 인자로 받아오고, Promise가 아니라면 리턴한 값을 then()의 콜백 함수의 인자로 받아올 수 있습니다.

 

아래의 예시를 살펴보면서 동작 방식을 확인해보세요.

let promise = new Promise((resolve, reject) => {
	resolve("성공");
});

promise.then(value => {
	console.log(value);
	// "성공"
})

---

Promise.prototype.catch()

executor에 작성했던 코드들이 에러가 발생했을 경우에는 reject 함수를 호출하고 catch()로 접근할 수 있습니다.

let promise = new Promise(function(resolve, reject) {
	reject(new Error("에러"))
});

promise.catch(error => {
	console.log(error);
	// Error: 에러
})

---

Promise.prototype.finally()

executor에 작성했던 코드들의 정상 처리 여부와 상관없이 .finally 메서드로 접근할 수 있습니다.

let promise = new Promise(function(resolve, reject) {
	resolve("성공");
});

promise
.then(value => {
	console.log(value);
	// "성공"
})
.catch(error => {
	console.log(error);
})
.finally(() => {
	console.log("성공이든 실패든 작동!");
	// "성공이든 실패든 작동!"
})

---

Promise chaining

Promise chaining가 필요하는 경우는 비동기 작업을 순차적으로 진행해야 하는 경우입니다. 

Promise chaining이 가능한 이유는 then(), catch(), finally() 의 메서드들은 Promise를 반환하기 때문입니다.

따라서  then()을 통해 연결할 수 있고, 에러가 발생할 경우 catch() 로 처리하면 됩니다.

let promise = new Promise(function(resolve, reject) {
	resolve('성공');
	...
});

promise
  .then((value) => {
    console.log(value);
    return '성공';
  })
  .then((value) => {
    console.log(value);
    return '성공';
  })
  .then((value) => {
    console.log(value);
    return '성공';
  })
  .catch((error) => {
    console.log(error);
    return '실패';
  })
  .finally(() => {
    console.log('성공이든 실패든 작동!');
  });