JavaScript # Promise (catch, finally,all, timeEnd)

Error 처리하기 (Feat. Catch) 🤲

1. reject handler 로 처리하기 🤠

let promise = new Promise(function(resolve, reject) {
	setTimeout(function() {
      reject('으악!');
  }, 2000);
});

promise.then(function() {}, function(msg) {
	console.log(msg);
});

then의 두번째 함수로 reject를 정의하는것!

2. catch 로 처리하기 👍

let promise = new Promise(function(resolve, reject) {
	setTimeout(function() {
        reject('으악!');
  }, 2000);
});

promise
	.then(function() {})
	.catch(function(err) {
		console.log(err);
	});

✅ catch를 사용하자 (기능을 동일하지만...)

• 가독성이 조금 더 좋다.
• then에서의 error를 handling 할 수 있다. 아래 사진의 첫번째 실행하는 then의 error도 잡아줄 수 있다.
  

---

finally , all 을 사용해보자! 😃

🟢 finally

• finally는 promise의 상태가 fulfilled,rejected 에 상관없이 무조건 실행된다.
• 로딩 화면을 없앨 때 유용하다.

아래 예제코드에서 resolve 이건 reject이건 마지막엔 finally를 호출한다.

🟣 all

• Promise. all 모든 함수를 한번에 실행시키고 싶을 때 사용한다

• 한꺼번에 실행하고 모두 이행되면 값을 사용할 수 있다.

• 값은 배열로 받는다.

👇아래 예제 코드에서 3가지의 promise를 가진 함수가 있고 이것을 차례대로 promise chanining을 통해 실행시키려고 한다.

👇 promise chanining을 통해 출력시키면 다음과 같이 console에 정상으로 찍힌다.

🧐 하지만 병렬적으로 동시에 실행시켜 최대시간인 3초안에 모든 계산을 끝내고 싶다면?

사용방법

값은 배열로 받고 안에는 실행될 콜백함수를 집어넣어준다.

이후 then 사용하여 console을 찍어주었다.(배열안의 모든작업이 완료되어야 then이 실행)

주의할점 ❌

하나의 reject라도 있을 경우 error가 발생된다!!

하나의 정보라도 누락이 되는경우 페이지를 보여주면 안될 때 이 부분을 이용해서

error처리를 하면 된다.

timeEnd ⏰

timeEnd를 사용하여 소요되는 시간도 확인이 가능하다.