๐Ÿ‘จ๐Ÿปโ€๐Ÿš’Asynchronous JavaScript(3) - Promise, async & await

๐ŸŽ๋“ค์–ด๊ฐ€๊ธฐ ์ „์—

๋น„๋™๊ธฐ์˜ ์ˆœ์„œ๋ฅผ ์ œ์–ดํ•˜๋Š” Callback + ์ฝœ๋ฐฑ ์ง€์˜ฅ ๋ฒ—์–ด๋‚˜๊ธฐ ๋ฅผ ์‹œ์ „ํ•˜๊ธฐ ์œ„ํ•œ ํ…Œํฌ๋‹‰์ด ์žˆ๋‹ค.

๋ฐ”๋กœ โ€˜์•ฝ์†โ€™ ์ด๋‹ค.

์‚ฌ์‹ค ์ด์ „์— ๋‚˜๋ฆ„ ๋ถ€๊พธ๋Ÿฝ์ง€๋งŒ ๋ธ”๋กœ๊น…ํ•œ ๋งํฌ๋ฅผ ๋‹ค์‹œ ์žฌํƒ•ํ•ด ๋ณด์ž.

https://dev-seolleung2.netlify.app/development/Promise-Part-1/

https://dev-seolleung2.netlify.app/development/Promise-Part-2/

5ํŽธ๊นŒ์ง€ ์ผ๋Š”๋ฐ.. ์œผ์žŒ..

โœ๐ŸปPromise

์•„๊นŒ์ฒ˜๋Ÿผ ์ฝœ๋ฐฑ์„ ์ธ์ž๋ฅผ ๋ฐ›์ง€ ์•Š๊ณ  new Promise๋ฅผ ๋ฆฌํ„ดํ•˜๋Š”๋ฐ ์–˜๋Š” ์–˜๋งŒ์˜ ์ฝœ๋ฐฑ์„ ๋ฐ›๋Š”๋ฐ,

resolve, reject ๋ผ๋Š” ์ธ์ž๋ฅผ ๋ฐ›์•„ ๋„ฃ๋Š”๋‹ค.

callback ์„ 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')
    })
}
printAll()

printAll ํ•จ์ˆ˜์—์„œ .then ์œผ๋กœ ์ด์–ด๊ฐˆ ์ˆ˜ ์žˆ๋‹ค.

์ฆ‰ a ๊ฐ€ ํ”„๋ฆฐํŠธ๋˜์–ด ๋‚˜์˜ค๋ฉด ๊ทธ๋‹ค์Œ .then ์œผ๋กœ ๋‹ค์Œ task ๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.

๐Ÿš€How to deal with callback chain

callback ์„ ํ†ตํ•œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ์—์„œ๋Š” ์ฝœ๋ฐฑ์„ ์‹คํ–‰ํ•  ๋•Œ๋งˆ๋‹ค ์—๋Ÿฌ ํ•ธ๋“ค๋ง์„ ํ•ด์ค˜์•ผ ํ•˜๋Š”๋ฐ,

Promise ๋ฅผ ํ†ตํ•œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ์—์„œ๋Š” consumer ํ•จ์ˆ˜ (๋น„๋™๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜) ์—์„œ ์ œ์ผ ๋งˆ์ง€๋ง‰ ๋ถ€๋ถ„์—๋‹ค .catch ๋ฅผ ํ†ตํ•ด ํ•œ ๋ฒˆ๋งŒ ์ฒ˜๋ฆฌ๋ฅผ ํ•ด ์ฃผ๋ฉด ์—๋Ÿฌ๋ฅผ ํ•ธ๋“ค๋ง ํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ‘บPromise HELL

return ์ฒ˜๋ฆฌ๋ฅผ ์ž˜ ํ•ด์ฃผ์ง€ ์•Š์•˜์„ ๋•Œ ์•„๋ž˜์™€ ๊ฐ™์€ ํ”„๋กœ๋ฏธ์Šค ํ—ฌ์„ ๋งŒ๋‚  ์ˆ˜ ์žˆ๋‹ค.

ํ—ฌ์€ ๋ญ๋‹ค? ์ฝ”๋“œ ๊ฐ€๋…์„ฑ ํ—ฌ์ด๋‹ค.

function gotoCodestates() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('1. go to codestates')
    }, Math.floor(Math.random() * 100) + 1)
  })
}

function sitAndCode() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('2. sit and code')
    }, Math.floor(Math.random() * 100) + 1)
  })
}

function eatLunch() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('3. eat lunch')
    }, Math.floor(Math.random() * 100) + 1)
  })
}

function goToBed() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('4. goToBed')
    }, Math.floor(Math.random() * 100) + 1)
  })
}

gotoCodestates().then(data => {
  console.log(data)

  sitAndCode().then(data => {
    console.log(data)

    eatLunch().then(data => {
      console.log(data)

      goToBed().then(data => {
        console.log(data)
      })
    })
  })
})

return ์ฒ˜๋ฆฌ๋ฅผ ์ž˜ ํ•ด์ฃผ๋ฉด ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์•„์ง„๋‹ค.

function gotoCodestates() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('1. go to codestates')
    }, Math.floor(Math.random() * 100) + 1)
  })
}

function sitAndCode() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('2. sit and code')
    }, Math.floor(Math.random() * 100) + 1)
  })
}

function eatLunch() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('3. eat lunch')
    }, Math.floor(Math.random() * 100) + 1)
  })
}

function goToBed() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('4. goToBed')
    }, Math.floor(Math.random() * 100) + 1)
  })
}

gotoCodestates()
  .then(data => {
    console.log(data)
    return sitAndCode()
  })
  .then(data => {
    console.log(data)
    return eatLunch()
  })
  .then(data => {
    console.log(data)
    return goToBed()
  })
  .then(data => {
    console.log(data)
  })

๊ทธ๋‚˜๋งˆ ์ง€์˜ฅ์—์„œ ๋ฒ—์–ด ๋‚ฌ๋‹ค.

์ด๋Ÿฐ Promise ์˜ ํ•œ๊ณ„(?)๋ฅผ ๋ณด์™„ํ•œ syntactic sugar ๊ฐ€ ์žˆ๋Š”๋ฐ,

๊ทธ๊ฒŒ ๋ฐ”๋กœ async ์™€ await ์ด๋‹ค.

๐ŸŽasync ์™€ await

async ์™€ await ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ์ด์ง€๋งŒ ๋™๊ธฐ์ ์ธ ์ฒ˜๋ฆฌ์ฒ˜๋Ÿผ ๋ณด์ด๊ฒŒ ํ•œ๋‹ค.

ํ‘œํ˜„ ์ž์ฒด๋ฅผ ๋™๊ธฐ์ ์œผ๋กœ ์“ธ ์ˆ˜ ์žˆ์–ด์„œ ์ฝ”๋“œ ๊ฐ€๋…์„ฑ์ด ์ข‹์•„์ง„๋‹ค.

function gotoCodestates() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('1. go to codestates')
    }, Math.floor(Math.random() * 100) + 1)
  })
}

function sitAndCode() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('2. sit and code')
    }, Math.floor(Math.random() * 100) + 1)
  })
}

function eatLunch() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('3. eat lunch')
    }, Math.floor(Math.random() * 100) + 1)
  })
}

function goToBed() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('4. goToBed')
    }, Math.floor(Math.random() * 100) + 1)
  })
}

const result = async () => {
  const one = await gotoCodestates()
  console.log(one)

  const two = await sitAndCode()
  console.log(two)

  const three = await eatLunch()
  console.log(three)

  const four = await goToBed()
  console.log(four)
}

result()

https://dev-seolleung2.netlify.app/development/Promise-Part-5/

์•— ์–ธ์ œ ๋˜ ๋ธ”๋กœ๊ทธ๋ฅผ ์ž‘์„ฑํ–ˆ๋‹ด..(?!)

์ฐธ๊ต์œก ๋‹นํ•˜์ง€ ์•Š๊ฒŒ ์—ด์‹ฌํžˆ ์ž˜ ๊ณต๋ถ€ํ•˜์ž.


Written by@[DotoriMook]
ํ”„๋ก ํŠธ์—”๋“œ ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž ๋„ํ† ๋ฆฌ๋ฌต์˜ ๊ธฐ์ˆ ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ ์ž…๋‹ˆ๋‹ค.

GitHubMediumTwitterFacebook