Skip to content

Latest commit

ย 

History

History
109 lines (84 loc) ยท 3.16 KB

File metadata and controls

109 lines (84 loc) ยท 3.16 KB

JavaScript

Promise

Promise object

  • ๋น„๋™๊ธฐ ์ž‘์—…์˜ ์ตœ์ข… ์™„๋ฃŒ ๋˜๋Š” ์‹คํŒจ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฐ์ฒด

    • ๋ฏธ๋ž˜์˜ ์™„๋ฃŒ ๋˜๋Š” ์‹คํŒจ์™€ ๊ทธ ๊ฒฐ๊ณผ ๊ฐ’์„ ๋‚˜ํƒ€๋ƒ„
    • ๋ฏธ๋ž˜์˜ ์–ด๋–ค ์ƒํ™ฉ์— ๋Œ€ํ•œ ์•ฝ์†
  • ์„ฑ๊ณต(์ดํ–‰)์— ๋Œ€ํ•œ ์•ฝ์†

    • .then()
  • ์‹คํŒจ(๊ฑฐ์ ˆ)์— ๋Œ€ํ•œ ์•ฝ์†

    • .catch()
const myPromise = axios.get(URL)
//console.log(myPromise) // PromiseObject

myPromise
	.then(response =>{
    return response.data
})

//charging
//axios.get(URL)์ด ์„ฑ๊ณตํ•˜๋ฉด Promise ๊ฐ์ฒด๊ฐ€ ๋ฆฌํ„ด๋จ 
axios.get(URL)
	//get์ด ์„ฑ๊ณต๋˜๋ฉด then ํ•จ์ˆ˜๋ฅผ ์ง„ํ–‰ํ•œ๋‹ค. 
  .then(response => {
    return response.data
})
	//์œ„์˜ thenํ•จ์ˆ˜๋„ ์„ฑ๊ณตํ•˜๋ฉด ์ด์–ด์„œ then ํ•จ์ˆ˜๋ฅผ ์ง„ํ–‰ํ•œ๋‹ค. 
    .then(response =>{
    return response.title
})
	//์ค‘๊ฐ„์—์‹คํŒจ๊ฐ€ ์žˆ์—ˆ๋‹ค๋ฉด ์ด ํ–‰๋™์„ ํ•˜๊ฒ ๋‹ค.
    .catch(error => {
    console.log(error)
})
	//์„ฑ๊ณตํ–ˆ๋˜ ๋งํ–ˆ๊ฑด ์ตœ์ข…์ ์œผ๋กœ ์ด๋ ‡๊ฒŒ ํ–‰๋™ํ• ๊ฑฐ์•ผ 
    .finally(function(){
    console.log('๋งˆ์ง€๋ง‰์— ๋ฌด์กฐ๊ฑด  ๋ฆฌํ„ด ')
})

Promise methods

.then(callback)

  • ์ด์ „ ์ž‘์—…(promise)์ด ์„ฑ๊ณตํ–ˆ์„ ๋•Œ ์ˆ˜ํ–‰ํ•  ์ž‘์—…ใ…‡๋ฅด ๋‚˜ํƒ€๋‚ด๋Š” callback ํ•จ์ˆ˜
  • ๊ทธ๋ฆฌ๊ณ  ๊ฐ callback ํ•จ์ˆ˜๋Š” ์ด์ „ ์ž‘์—…์˜ ์„ฑ๊ณต ๊ฒฐ๊ณผ๋ฅผ ์ธ์ž๋กœ ์ „๋‹ฌ๋ฐ›์Œ
  • ๋”ฐ๋ผ์„œ ์„ฑ๊ณตํ–ˆ์„ ๋•Œ์˜ ์ฝ”๋“œ๋ฅผ callback ํ•จ์ˆ˜ ์•ˆ์— ์ž‘์„ฑ

.catch(callback)

  • .then์ด ํ•˜๋‚˜๋ผ๋„ ์‹คํŒจํ•˜๋ฉด(๊ฑฐ๋ถ€ ๋˜๋ฉด)๋™์ž‘ (๋™๊ธฐ์‹์˜ 'try - except' ๊ตฌ๋ฌธ๊ณผ ์œ ์‚ฌ)
  • ์ด์ „ ์ž‘์—…์˜ ์‹คํŒจ๋กœ ์ธํ•ด ์ƒ์„ฑ๋œ error ๊ฐ์ฒด๋Š” catch ๋ธ”๋ก ์•ˆ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ

๊ฐ๊ฐ์˜ .then()๋ธ”๋ก์€ ์„œ๋กœ ๋‹ค๋ฅธ Promise๋ฅผ ๋ฐ˜ํ™˜

  • ์ฆ‰, .then()์„ ์—ฌ๋Ÿฌ๊ฐœ ์‚ฌ์šฉํ•˜์—ฌ ์—ฐ์‡„์ ์ธ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Œ
  • ๊ฒฐ๊ตญ ์—ฌ๋Ÿฌ ๋น„๋™๊ธฐ ์ž‘์—…์„ ์ฐจ๋ก€๋Œ€๋กœ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Œ
.then()๊ณผ .catch() ๋ฉ”์„œ๋“œ๋Š” ๋ชจ๋‘ promise๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— chainig ๊ฐ€๋Šฅ

์ฃผ์˜

  • ๋ฐ˜ํ™˜๊ฐ’์ด ๋ฐ˜๋“œ์‹œ ์žˆ์–ด์•ผ ํ•จ
  • ์—†๋‹ค๋ฉด callback ํ•จ์ˆ˜๊ฐ€ ์ด์ „์˜ promise ๊ฒฐ๊ณผ๋ฅผ ๋ฐ›์„ ์ˆ˜ ์—†์Œ

์˜ˆ์‹œ

ํ”ผ๋ผ๋ฏธ๋“œ ๊ตฌ์กฐ
work1(function(result){
    work2(result1, function(result2){
        work3(result2,function(result3){
            console.log('์ตœ์ข…๊ฒฐ๊ณผ : ' + result3)
        })
    })
})
Promise ๊ตฌ์กฐ
work1().then(function(result){
    return work2(result1)
})
.then(function(result2){
    return work3(result2)
})
.then(function(result3){
    console.log('์ตœ์ข…๊ฒฐ๊ณผ:' + result3)
})
.catch(failuerCallback)

Promise๊ฐ€ ๋ณด์žฅํ•˜๋Š” ๊ฒƒ

  • Async callback ์ž‘์„ฑ ์Šคํƒ€์ผ๊ณผ ๋”œ๋ฆฌ Promise๊ฐ€ ๋ณด์žฅํ•˜๋Š” ํŠน์ง•
  1. callback ํ•จ์ˆ˜๋Š” JavaScript์˜ Event Loop๊ฐ€ ํ˜„์žฌ ์‹คํ–‰์ค‘์ธ Call Stack์„ ์™„๋ฃŒํ•˜๊ธฐ ์ด์ „์—๋Š” ์ ˆ๋Œ€ ํ˜ธ์ถœ๋˜์ง€ ์•Š์Œ
    • Promise callback ํ•จ์ˆ˜๋Š” Event Queue์— ๋ฐฐ์น˜๋˜๋Š” ์—„๊ฒฉํ•œ ์ˆœ์„œ๋กœ ํ˜ธ์ถœ๋จ
  2. ๋น„๋™๊ธฐ ์ž‘์—…์ด ์„ฑ๊ณตํ•˜๊ฑฐ๋‚˜ ์‹คํŒจํ•œ ๋’ค์— .then() ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ถ”๊ฐ€ํ•œ ๊ฒฝ์šฐ์—๋„ 1๋ฒˆ๊ณผ ๋˜‘๊ฐ™์ด ๋™์ž‘
  3. .then()์„ ์—ฌ๋Ÿฌ ๋ฒˆ ์‚ฌ์šฉํ•˜์—ฌ ์—ฌ๋Ÿฌ ๊ฐœ์˜ callback ํ•จ์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Œ (Chaining)
    • ๊ฐ๊ฐ์˜ callback์€ ์ฃผ์–ด์ง„ ์ˆœ์„œ๋Œ€๋กœ ํ•˜๋‚˜ํ•˜๋‚˜ ์‹คํ–‰ํ•˜๊ฒŒ ๋จ
    • Chaining์€ Promise์˜ ๊ฐ€์žฅ ๋›ฐ์–ด๋‚œ ์žฅ์ 