promise

๋ ›์ธ ๊ณ 

๋น„๋™๊ธฐ

promise๋ฅผ ์•Œ์•„๋ณด๊ธฐ ์ „์— promise๊ฐ€ ํ•„์š”ํ•œ ์ด์œ ๋ฅผ ๋จผ์ € ์•Œ์•„๋ณด์ž. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ๋น„๋™๊ธฐ๋กœ ๋™์ž‘ํ•˜๋Š” ์ฝ”๋“œ๊ฐ€ ์žˆ๋‹ค. ๋น„๋™๊ธฐ๋ž€ ์ˆœ์„œ์™€ ์ƒ๊ด€์—†์ด ์‹คํ–‰ ๋˜๋Š” ์ฝ”๋“œ๋ฅผ ๋งํ•œ๋‹ค. ์˜ˆ์ œ๋กœ ์•Œ์•„๋ณด์ž.

    let number = 0;

    setTimeout(() => { number + 10 }, 0)

    // number: 0
    console.log("number:", number)

setTimeout ํ•จ์ˆ˜๋Š” ๋น„๋™๊ธฐ ํ•จ์ˆ˜์ด๋‹ค. ์‹œ๊ฐ„์„ 0์œผ๋กœ ์„ค์ •ํ–ˆ์ง€๋งŒ console์— ์ถœ๋ ฅ๋œ ๊ฐ’์€ 0์ด๋‹ค. setTimeout ํ•จ์ˆ˜์˜ ์ฝœ๋ฐฑํ•จ์ˆ˜๋Š” ๋น„๋™๊ธฐ๋กœ ์ž‘๋™ํ•œ๋‹ค. ๋‹จ์ˆœํžˆ 0์ดˆ๊ฐ€ ์ง€๋‚˜๊ณ  ์ฝœ๋ฐฑํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋œ ํ›„ console์ด ์ถœ๋ ฅ๋  ๊ฒƒ ๊ฐ™์ง€๋งŒ ์‚ฌ์‹ค์€ ๊ทธ๋ ‡์ง€ ์•Š๋‹ค. setTimeout ํ•จ์ˆ˜๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ์Šค์ผ€์ค„๋งํ•œ ๋‹ค์Œ, ํƒ€์ด๋จธ id๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ  ์ข…๋ฃŒ๋œ๋‹ค. setTimeout ํ•จ์ˆ˜๊ฐ€ ์ข…๋ฃŒ๋œ ํ›„ ์ฝœ๋ฐฑํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋Š” ๊ฒƒ์ด๋‹ค. ๋น„๋™๊ธฐ ์ฝ”๋“œ๋Š” ๊ธฐ๋Œ€์™€ ๋‹ค๋ฅด๊ฒŒ ๋™์ž‘ํ•  ๊ฐ€๋Šฅ์„ฑ์ด ํฌ๋‹ค.

promise๋ž€?

promise๋Š” ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋˜๋Š” ์ฝ”๋“œ์˜ ๋ฌธ์ œ์ ์„ ๊ทน๋ณตํ•˜๊ธฐ ์œ„ํ•ด ES6๋ถ€ํ„ฐ ๋„์ž…๋œ ๋นŒํŠธ์ธ ๊ฐ์ฒด์ด๋‹ค.

// promise ์ƒ์„ฑ
const promise = new Promise((resolve, reject) => {
    // promise ํ•จ์ˆ˜์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ์ˆ˜ํ–‰
    if (/* ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ์„ฑ๊ณต */) {
        resolve()
    } else {
        reject() /* ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ์‹คํŒจ */
    }
})
// javascript deep dive ์˜ˆ์ œ
const promiseGet = url => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url)
        xhr.send()

        // ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๊ฐ€ ๋˜๋Š” ๋ถ€๋ถ„
        xhr.onload = () => {
            if(xhr.status === 200) {
                resolve(JSON.parse(xhr.response))
            } else {
                reject(new Error(xhr.status))
            }
        }
    })
}

promiseGet('https://test.com/post/1')

Promise ๋‚ด๋ถ€์—์„œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๊ฐ€ ์„ฑ๊ณตํ•˜๋ฉด ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ resolve ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๊ณ , ์‹คํŒจํ•˜๋ฉด reject ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค. Promise๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ธ๊ฐ€์ง€ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ์ƒํƒœ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

  1. ๋Œ€๊ธฐ(pending) : ์ดˆ๊ธฐ ์ƒํƒœ

  2. ์ดํ–‰(fulfilled) : ์„ฑ๊ณต์ ์œผ๋กœ ์™„๋ฃŒ

  3. ๊ฑฐ๋ถ€(rejected) : ์‹คํŒจ

then, catch, finally

promise๋Š” then๊ณผ catch ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. then() ๋ฉ”์„œ๋“œ๋Š” ์—ฐ์‚ฐ์ด ์„ฑ๊ณตํ–ˆ์„ ์‹คํ–‰์ด๋œ๋‹ค. then์— ๋„ฃ์–ด๋‘” ์ฝœ๋ฐฑํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๊ณ , ์ฒซ๋ฒˆ์งธ ์ธ์ž๋กœ response ๊ฐ์ฒด๊ฐ€ ์ „๋‹ฌ๋œ๋‹ค. catch() ๋ฉ”์„œ๋“œ๋Š” ์—ฐ์‚ฐ์ด ์‹คํŒจํ–ˆ์„ ๋•Œ ์‹คํ–‰์ด๋œ๋‹ค. ์—ฐ์‚ฐ์ด ์‹คํŒจํ•œ ์ด์œ ๊ฐ€ ์ธ์ž๋กœ ์ „๋‹ฌ๋œ๋‹ค.

// promise ํ˜ธ์ถœ
new Promise(); 

new Promise(function(resolve, reject))

Last updated