8월 31일(화) Promise

new Promise()

resolve() // go to next Action
reject() // handke Error

callback

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

print callback함수를 Promise 형태로 변경

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

Promise

---

Promise Hell

function goTo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('1. go to there') }, 100)
  })
}
function sitAndCode() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('1. sit and code') }, 100)
  })
}
function eat() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('3. eat anything') }, 100)
  })
}
function goToBad() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('1. go to bad') }, 100)
  })
}
goTo()
  .then(data => {
    console.log(data)
    sitAndCode()
      .then(data => {
        console.log(data)
        eat()
          .then(data => {
            console.log(data)
            goToBad()
              .then(data => {
                console.log(data)
              })
          })
      })
  })

promise hell에 빠지지않게 하기위해서 return처리가 중요하다

---

promise Chaining

function goTo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('1. go to there') }, 100)
  })
}
function sitAndCode() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('1. sit and code') }, 100)
  })
}
function eat() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('3. eat anything') }, 100)
  })
}
function goToBad() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('1. go to bad') }, 100)
  })
}
goTo()
  .then(data => {
    console.log(data)
    return sitAndCode()
  })
sitAndCode()
  .then(data => {
    console.log(data)
    return eat()
  })
eat()
  .then(data => {
    console.log(data)
    return goToBad()
  })
goToBad()
  .then(data => {
    console.log(data)
  })

return을 통하여 해당 비동기를 다시 다음으로 넘기고,
다시 .then으로 받아옴으로서 promise hell을 방지한다

---

async await

function goTo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('1. go to there') }, 500)
  })
}
function sitAndCode() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('1. sit and code') }, 400)
  })
}
function eat() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('3. eat anything') }, 300)
  })
}
function goToBad() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('1. go to bad') }, 200)
  })
}
const result = async () => {
//
  const one = await goTo();
  console.log(one)
  //
  const two = await sitAndCode()
  console.log(two)
  //
  const three = await eat()
  console.log(three)
  //
  const four = await goToBad()
  console.log(four)
}
result()

await 비동기 함수들을 마치 동기적인 함수처럼 쓸 수가 있다
일반함수 처럼 순차적으로 실행한다

함수로 표현된 것 처럼 시간순으로 보면 goToBad함수가 먼저 실행 되어야 할꺼 같지만 순차적으로 실행되어 맨나중에 찍히게 된다

실행되는 건 promise와 같지만 표현자체를 동기적으로 쓸 수 있어서 코드 가독성이 좋다

---

마무리
1. 자바스크립트가 왜 비동기적으로 돌아가야 하는지
2. 비동기적으로 돌아가는 자바스크립트를 callback을 활용하여 제어
3. callback의 까다로운 부분을 promise를 사용하여 좀 더 쉽고 편하게 비동기함수를 처리할 수있다
4. promise 역시 promise hell에 빠질 수 있기 때문에 promise chaining을 적절히 사용하여 방지한다
5. async await 기능으로 promise를 일반 함수 처럼 사용할 수 있다

github TIL(Promise, async await 정리)