TIL_031_210316

James·2021년 3월 16일
0

TILs

목록 보기
31/40

Promise .then 메소드 사용법

callback 함수를 매개변수로 가지고 있는 고차함수를 쓰면 callback 지옥이 발생해서 가독성을 떨어뜨리는 리스크가 있어 Promise 인스턴스를 리턴하는 함수를 대신 사용하고 있다.
비동기 수행을 위한 고차함수는 아래와 같이 callback을 매개변수로 같는다.

const playLater = (wait, callback) => {
  setTimeout(callback, wait);
}

Promise 인스턴스를 리턴하는 함수는 아래와 같다.

const playLater = (wait) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('hi')
    }, wait);
  });
}

playLater(2000) 으로 호출하면 Promise 인스턴스가 리턴되는데, 인스턴스가 생성될 때 실행되는 함수인 constructor 그 자체가 인자로 들어가 있다.
즉, playLater(2000)으로 호출하면 setTimeout함수가 바로 실행된 후에 'hi'라는 매개변수를 품은 Promise가 리턴된다는 뜻이다.
Promise 인스턴스가 성공적으로 생성되면 resolve 함수의 인자값을 then 메소드의 매개변수로 넘길 수 있다.

  playLater(2000) // 2초뒤에 Promise 생성자를 실행시키고 Promise를 리턴
    .then((param) => { // Promise가 가지고 있던 resolve 인자 'hi'를 param으로 받음
    console.log(param);	// 'hi' 출력
    return 'world'	// 'world'란 문자열을 리턴. 이 때 Promise가 아니라 문자열을 다음 then의 param으로 넘기지만 이전 Promise('hi'를 품고 있던)를 그대로 물려받고 이번엔 'world'를 품고 리턴된다.
  })
  .then((param) => {	// 'world'를 매개변수로 받고
    console.log(param);	// 출력
  })
  .then(doSomthing); // then메소드는 함수를 인자로 받는데, 위처럼 콜백정의를 할 수도 있지만, 이처럼 scope밖에서 이미 정의된 함수를 인자로 받아서 호출할 수도 있다.





profile
웹개발자 James 입니다.

0개의 댓글