Promise

자바스크립트에서 동기적인 처리를 위해서는 아래 코드처럼

const printString = (string, callback) => {
    setTimeout(
      () => {
        console.log(string)
        callback()
      }, 
      Math.floor(Math.random() * 100) + 1
    )
  }
 
  const printAll = () => {
    printString("A", () => {
      printString("B", () => {
        printString("C", () => {})
      })
    })
  }

콜백을 이용하여 처리해주어야 했었다.

 

하지만 Promise라는 새로운 기능덕에 위의 코드를

const printString = (string) => {
    return new Promise((resolve, reject) => {
      setTimeout(
        () => {
         console.log(string)
         resolve()
        }, 
       Math.floor(Math.random() * 100) + 1
      )
    })
  }
 
  const printAll = () => {
    printString("A")
    .then(() => {
      return printString("B")
    })
    .then(() => {
      return printString("C")
    })
    .catch((err) => {
      console.error(err)
    })
  }

이런식으로 작성할 수 있게되었다. 

new Promise를 통해 생성된 Promise객체는 resolve(...)를 통해 값을 내보내주고

.then((...) => {})구문을 이용하여 그 값을 핸들링 할수 있게된다.

또한 reject(...)를 통해 내보낸 값은 .catch구문에서 받아 핸들링할 수 있게되며, 주로 오류핸들링을 한다.

.then구문은 앞의 코드의 실행이 끝날때까지 기다린 후 실행되기 때문에 동기적으로 코드들을 실행시킬 수 있다.

 

또한 위의 Promise구문은 같은 원리이지만  async / await이라는 것을 사용해 아래와같이 좀더 직관적으로 나타낼 수 있다.

	
const printString = (string) => {
    return new Promise((resolve, reject) => {
      setTimeout(
        () => {
         resolve(string.toLowerCase())
        }, 
       Math.floor(Math.random() * 100) + 1
      )
    })
  }
  
  const printAll = async () => {
    const a = await printString("A")
    console.log(a)
    
    const b = await printString("B")
    console.log(b)
    
    const c = await printString("C")
    console.log(c)
  }

 

좀더 알아볼 것 : util.promisify