[ES6+] then 과 catch

then()

promise가 끝난 이후 뭔가를 실행해야하는데, 그때 사용되는 명령어가 then

자바스크립트에 promise가 끝난 이후의 명령어를 전달하려면(언제 끝나는지는 중요하지 않다❌ 끝날때가 중요할뿐!!)

then 을 사용해서 프로미스가 끝난순간 값을 돌려달라는 명령을 해야한다

어떻게하냐면

const areYouHungry = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, "yes i am");
})

areYouHungry.then(value => console.log(value));

이렇게 되면 3초뒤에 콘솔에 “yes i am”이라고 뜰 것이다

이게 바로 promise를 통해 value를 얻는방법이다.

+)부연설명

const areYouHungry = new Promise((resolve, reject) => {
  //보통은 이부분에 localStorage에서 값을 받아오던지 API에서 데이터를 불러오던지하고
  //그 받은 값들이 resolve로 들어간다(이걸 A라고 해보자)
  setTimeout(resolve, 3000, "yes i am");
})

//위의 A는 then바로 다음의 value에 들어간다
areYouHungry.then(value => console.log(value));

아마 대부분 본인이 사용할 프로미스를 만들지는 않을거다.

보통 다른사람들을 위해 프로미스를 만드는 작업을 하게 될건데,

이 프로미스에서의 value들을 리턴하기 위해서는 then을 사용하면 된다

(then으로 갖다쓰면 프로미스를 만드는 방법이기 때문에 그냥 쓰면 된다)

then다음에 함수 넣어도된다(당연)

catch()

프로미스에서 에러가 생기면 catch는 그 에러를 잡아준다

const areYouHungry = new Promise((resolve, reject) => {
  setTimeout(reject, 3000, "no i'm not");
})

areYouHungry.then(value => console.log(value));
//3초뒤에 Uncaught (in promise) no i'm not 이라는 에러가 뜸

이때 catch를 넣어주자

areYouHungry
  .then(value => console.log(value))
  .catch(value => console.log(value));
//3초뒤에 콘솔에 no i'm not으로 값을 찍는다

가끔 then이 먼저 실행되고 이후에 catch가 실행된다고 생각하는 사람들이 있다는데 (나임)

그렇지 않다고 한다…(오…)

이 두개는 각기 다른 상황에서 실행되는 거라고 한다

그래서 만약 then이 실행되면 catch는 절대 실행되지 않고, catch가 실행되면 then은 절대 실행되지 않는다

노마드코더의 ‘ES6의 정석’을 듣고 정리 =)

then()

catch()

Share this post