๐Ÿค™๐ŸปPromise Part(3) ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์•Œ์•„๋ณด๋Š” Error Handling

๐Ÿค™๐Ÿป๋น„ํ”„ ๋ถ€๋ฅด๊ธฐ๋‡ฝ ๋งŒ๋“ค๊ธฐ

์ง€๊ธˆ๋ถ€ํ„ฐ ์•„์•„์ฃผ ์žฌ๋ฐŒ๋Š” ์ง“์„ ํ•ด๋ณผ๊ฑฐ๋‹ค.

๋ญ˜ ํ• ๊ฑฐ๋ƒ๋ฉด

  1. ์†Œ๋ฅผ ํ•œ๋งˆ๋ฆฌ ์–ด๋””์„œ ๋ฐ๋ ค์˜จ ๋’ค
  2. ๋„์ถ•์„ ํ•ด์„œ ๊ณ ๊ธฐ๋ฅผ ์–ป์–ด๋‚ผ ๊ฑฐ๋‹ค. ํ…๋” ๋กœ์˜ค์ธ~
  3. ๊ณ ๊ธฐ๋ฅผ ๊ฐ–๋‹ค๊ฐ€ ๋น„ํ”„ ๋ถ€๋ฅด๊ธฐ๋‡ฝ์„ ๋งŒ๋“ค๊ฑฐ๋‹ค.

๐Ÿค™๐Ÿป์„ธ ๊ฐ€์ง€์˜ Promise ๋ฅผ ๋ฆฌํ„ดํ•˜๋Š” ํ•จ์ˆ˜

๊ฐ ์„œ๋ฒ„๋งˆ๋‹ค ์†Œ๋ฅผ ๋ฐ›๊ณ  ์†Œ๋ฅผ ์žก์•„์„œ ํ…๋”๋กœ์ธ์„ ๋ฐ›๊ณ  ๊ทธ ๊ณ ๊ธฐ๋ฅผ ๋ฐ›์•„๋‹ค๊ฐ€ ๋น„ํ”„ ๋ถ€๋ฅด๊ธฐ๋‡ฝ์„ ๋งŒ๋“œ๋Š” ๊ฑฐ๋‹ค.

const getCow = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('๐Ÿ‚'), 1000)
  })

const getBeef = cow =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${cow} => ๐Ÿฅฉ`), 1000)
  })

const cook = beef =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${beef} => ๐Ÿฅ˜`), 1000)
  })

Producer ๋ฅผ ํ•ด๋†จ์œผ๋‹ˆ ์ด์ œ Consume ํ•ด๋ณด์ž.

getCow()
.then(cow => getBeef(cow)) // ์†Œ๋ฅผ ์žก์•„์™€์„œ ๊ณ ๊ธฐ๋ฅผ ์–ป์–ด๋‚ด๋Š”..
.then(beef => cook(beef))  // ๊ณ ๊ธฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์š”๋ฆฌ๋ฅผ ๋งŒ๋“œ๋Š”..
.then(meal => console.log(meal)) // ์™„์„ฑ๋œ ์š”๋ฆฌ๋ฅผ ๋ณด์—ฌ์ค˜!

Promise {<pending>}
๐Ÿ‚ => ๐Ÿฅฉ => ๐Ÿฅ˜

promisefunc

๐Ÿ‚ => ๐Ÿฅฉ => ๐Ÿฅ˜

์šฐ์™€ ๋น„ํ”„ ๋ถ€๋ฅด๊ธฐ๋‡ฝ์ด๋‹ค!!

๐Ÿฅ˜Consumer ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋งํ•˜๊ธฐ

then ๋‚ด์—์„œ ๋ฆฌํ„ด๋˜๋Š” ํ•จ์ˆ˜๊ฐ€ ๋ฐ›๋Š” ์ธ์ž๊ฐ€ ํ•˜๋‚˜๋งŒ ์ผ๋•Œ ์ฝ”๋“œ๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.

๋ฆฌํ„ด๋˜๋Š” ํ•จ์ˆ˜์— ์œ„์—์„œ ๋ฐ›์€ ๋ฐธ๋ฅ˜๋ฅผ ๋„ฃ์–ด ๋ฆฌํ„ดํ•ด ๋‹ฌ๋ผ ๋ผ๋Š” ์•”๋ฌต์ ์ธ ๋™์˜์ด๋‹ค.

getCow()
  .then(getBeef) // ์†Œ๋ฅผ ์žก์•„์™€์„œ ๊ณ ๊ธฐ๋ฅผ ์–ป์–ด๋‚ด๋Š”..
  .then(cook) // ๊ณ ๊ธฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์š”๋ฆฌ๋ฅผ ๋งŒ๋“œ๋Š”..
  .then(console.log) // ์™„์„ฑ๋œ ์š”๋ฆฌ๋ฅผ ๋ณด์—ฌ์ค˜!

  Promise {<pending>}
  ๐Ÿ‚ => ๐Ÿฅฉ => ๐Ÿฅ˜

์ด์ œ ๋ณธ๊ฒฉ์ ์œผ๋กœ ์—๋Ÿฌ ํ•ธ๋“ค๋ง์„ ํ•ด๋ณผ ์˜ˆ์‹œ๋กœ ๋ฐ”๊ฟ”๋ณด์ž.

๐Ÿ˜ฑ์ „๊ตญ ๋„์ถ• ๊ณต์žฅ์ด ํŒŒ์—…ํ•  ๋•Œ (Error)

๋งŒ์•ฝ ๋„์ถ•๊ณต์žฅ๋“ค์ด ๋‹จ์ฒด ํŒŒ์—…์„ ํ•ด์„œ ์†Œ๊ณ ๊ธฐ๋กœ ๊ฐ€๊ณตํ•˜๋Š” ๋ถ€๋ถ„์—์„œ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒจ ์‹คํŒจ๋˜๋ฉด ์–ด๋–ป๊ฒŒ ํ• ๊นŒ?

const getCow = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('๐Ÿ‚'), 1000)
  })

const getBeef = cow =>
  new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error(`Error! BEEF union going ahead with strike ${cow} => ๐Ÿฅฉ`)), 1000)
  })

const cook = beef =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${beef} => ๐Ÿฅ˜`), 1000)
  })

getCow()
  .then(getBeef) // ์†Œ๋ฅผ ์žก์•„์™€์„œ ๊ณ ๊ธฐ๋ฅผ ์–ป์–ด๋‚ด๋Š”..
  .then(cook) // ๊ณ ๊ธฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์š”๋ฆฌ๋ฅผ ๋งŒ๋“œ๋Š”..
  .then(console.log) // ์™„์„ฑ๋œ ์š”๋ฆฌ๋ฅผ ๋ณด์—ฌ์ค˜!

Promise {<pending>}
Uncaught (in promise) Error: Error! BEEF union going ahead with strike ๐Ÿ‚ => ๐Ÿฅฉ
  at <anonymous>:8:29

uncaughterror

์•„ ์š”๋ฆฌ๊ฐ€ ์•ˆ๋งŒ๋“ค์–ด ์ง€๋Š”๋ฐ..

์•„ ์ด๋Ÿฌ๋ฉด ๋‚˜๊ฐ€๋ฆฐ๋ฐ..

๐Ÿ˜˜์—๋Ÿฌ ํ•ธ๋“ค๋ง 1

ํ˜น์‹œ ๊ณผ์ • ์ค‘์— ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค๋ฉด .catch ๋กœ ์—๋Ÿฌ๋ฅผ ๋งจ ๋ฐ‘์œผ๋กœ ์ „๋‹ฌํ•ด์„œ

catch ๊ฐ€ ์žกํ˜€์ง€๊ฒŒ ํ•˜์ž.

getCow()
  .then(getBeef) // ์†Œ๋ฅผ ์žก์•„์™€์„œ ๊ณ ๊ธฐ๋ฅผ ์–ป์–ด๋‚ด๋Š”..
  .then(cook) // ๊ณ ๊ธฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์š”๋ฆฌ๋ฅผ ๋งŒ๋“œ๋Š”..
  .then(console.log) // ์™„์„ฑ๋œ ์š”๋ฆฌ๋ฅผ ๋ณด์—ฌ์ค˜!
  .catch(console.log)

Promise {<pending>}
Error: Error! BEEF union going ahead with strike ๐Ÿ‚ => ๐Ÿฅฉ
  at <anonymous>:8:29

๋นจ๊ฐ„์ƒ‰ Uncaught Error ๊ฐ€ ์•„๋‹Œ ๋‹จ์ˆœ ์—๋Ÿฌ ๋ฉ”์‹œ์ง€๋ฅผ ์ถœ๋ ฅํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์ด๋ฅผ ํ†ตํ•ด ์—๋Ÿฌ๋ฅผ ์ปจํŠธ๋กคํ•˜์—ฌ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Œ์„ ์˜๋ฏธํ•œ๋‹ค.

handlingerror

๐Ÿ˜˜์—๋Ÿฌ ํ•ธ๋“ค๋ง 2

์†Œ ๋„์ถ•๊ณต์žฅ ํŒŒ์—…์œผ๋กœ ์ธํ•ด ์†Œ๊ณ ๊ธฐ๋ฅผ ๋ชป๊ฐ€์ ธ์™€์„œ ๋ฐœ์„ ๋™๋™ ๊ตฌ๋ฅผ ๋•Œ,

์•ผ๋งค ๊ผผ์ˆ˜๋กœ ๋ผ์ง€๊ณ ๊ธฐ๋กœ ๋Œ€์ฒดํ•ด ๋ฒ„๋ฆฌ๊ณ  ์‹ถ์–ด์กŒ๋‹ค!

const getCow = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('๐Ÿ‚'), 1000)
  })

const getBeef = cow =>
  new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error(`Error! BEEF union going ahead with strike ${cow} => ๐Ÿฅฉ`)), 1000)
  })

const cook = beef =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${beef} => ๐Ÿฅ˜`), 1000)
  })

getCow()
  .then(getBeef) // ์—ฌ๊ธฐ์„œ ์†Œ๊ณ ๊ธฐ๋ฅผ ๋”์ด์ƒ ๋ชป๊ฐ–๊ณ  ์˜ค๋Š” ์˜ค๋ฅ˜๊ฐ€ ์ƒ๊ธด๋‹ค. ๊ทธ๋ž˜?
  .catch(error => {
    return '๐Ÿ–'; // ๋ผ์ง€ ์กฑ๋ฐœ์„ ๊ธด๊ธ‰ ๊ณต์ˆ˜ํ•ด์™”๋‹ค.
  })
  .then(cook) // ๋ผ์ง€ ์•ž์กฑ์„ ๊ฐ€์ง€๊ณ  ์š”๋ฆฌ๋ฅผ ๋งŒ๋“œ๋Š”..
  .then(console.log) // ์™„์„ฑ๋œ ์š”๋ฆฌ๋ฅผ ๋ณด์—ฌ์ค˜!
  .catch(console.log) // ์—๋Ÿฌ ๋ฉ”์‹œ์ง€๋„ ์ผ๋‹จ์€ ๋„์›Œ๋ฐ”!

  Promise {<pending>}
  ๐Ÿ– => ๐Ÿฅ˜

handlingerror2

์†Œ๊ณ ๊ธฐ๋ฅผ ์–ป์–ด ์š”๋ฆฌ๋ฅผ ํ•˜๋Š”๋ฐ ์‹คํŒจํ–ˆ์ง€๋งŒ ์ „์ฒด์ ์ธ Promise ์ฒด์ธ์— ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธฐ์ง€ ์•Š๋„๋ก ๋ผ์ง€ ์•ž์กฑ์œผ๋กœ ๋•œ๋นต์„ ํ•ด์ค€๊ฑฐ๋‹ค.

๊ทธ๋ฆฌํ•˜์—ฌ ๊ฒฐ๊ตญ ์š”๋ฆฌ๊นŒ์ง€ ์™„์„ฑํ–ˆ๋‹ค.

ํฌํฌ ๋ถ€๋ฅด๊ธฐ๋‡ฝ.. (์‹ค์ œ๋กœ ํ•ด๋ณธ ์  ์žˆ๋‹ค)

๐Ÿ–๊ฒฐ๋ก 

์ฆ‰! .then(getBeef) ์—์„œ ์˜ค๋ฅ˜, error ๊ฐ€ ์ƒ๊ฒผ์„ ๋•Œ ๋ฐ”๋กœ ๋‹ค์Œ ์ค„์— .catch ๋ฅผ ์ž‘์„ฑํ•ด์„œ ๋ฐ”๋กœ๋ฐ”๋กœ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.


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

GitHubMediumTwitterFacebook