-
๋น๋๊ธฐ ์์ ์ ์ต์ข ์๋ฃ ๋๋ ์คํจ๋ฅผ ๋ํ๋ด๋ ๊ฐ์ฒด
- ๋ฏธ๋์ ์๋ฃ ๋๋ ์คํจ์ ๊ทธ ๊ฒฐ๊ณผ ๊ฐ์ ๋ํ๋
- ๋ฏธ๋์ ์ด๋ค ์ํฉ์ ๋ํ ์ฝ์
-
์ฑ๊ณต(์ดํ)์ ๋ํ ์ฝ์
- .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)์ด ์ฑ๊ณตํ์ ๋ ์ํํ ์์ ใ ๋ฅด ๋ํ๋ด๋ callback ํจ์
- ๊ทธ๋ฆฌ๊ณ ๊ฐ callback ํจ์๋ ์ด์ ์์ ์ ์ฑ๊ณต ๊ฒฐ๊ณผ๋ฅผ ์ธ์๋ก ์ ๋ฌ๋ฐ์
- ๋ฐ๋ผ์ ์ฑ๊ณตํ์ ๋์ ์ฝ๋๋ฅผ callback ํจ์ ์์ ์์ฑ
- .then์ด ํ๋๋ผ๋ ์คํจํ๋ฉด(๊ฑฐ๋ถ ๋๋ฉด)๋์ (๋๊ธฐ์์ 'try - except' ๊ตฌ๋ฌธ๊ณผ ์ ์ฌ)
- ์ด์ ์์ ์ ์คํจ๋ก ์ธํด ์์ฑ๋ error ๊ฐ์ฒด๋ catch ๋ธ๋ก ์์์ ์ฌ์ฉํ ์ ์์
- ์ฆ, .then()์ ์ฌ๋ฌ๊ฐ ์ฌ์ฉํ์ฌ ์ฐ์์ ์ธ ์์ ์ ์ํํ ์ ์์
- ๊ฒฐ๊ตญ ์ฌ๋ฌ ๋น๋๊ธฐ ์์ ์ ์ฐจ๋ก๋๋ก ์ํํ ์ ์์
- ๋ฐํ๊ฐ์ด ๋ฐ๋์ ์์ด์ผ ํจ
- ์๋ค๋ฉด callback ํจ์๊ฐ ์ด์ ์ promise ๊ฒฐ๊ณผ๋ฅผ ๋ฐ์ ์ ์์
work1(function(result){
work2(result1, function(result2){
work3(result2,function(result3){
console.log('์ต์ข
๊ฒฐ๊ณผ : ' + result3)
})
})
})work1().then(function(result){
return work2(result1)
})
.then(function(result2){
return work3(result2)
})
.then(function(result3){
console.log('์ต์ข
๊ฒฐ๊ณผ:' + result3)
})
.catch(failuerCallback)- Async callback ์์ฑ ์คํ์ผ๊ณผ ๋๋ฆฌ Promise๊ฐ ๋ณด์ฅํ๋ ํน์ง
- callback ํจ์๋ JavaScript์ Event Loop๊ฐ ํ์ฌ ์คํ์ค์ธ Call Stack์ ์๋ฃํ๊ธฐ ์ด์ ์๋ ์ ๋ ํธ์ถ๋์ง ์์
- Promise callback ํจ์๋ Event Queue์ ๋ฐฐ์น๋๋ ์๊ฒฉํ ์์๋ก ํธ์ถ๋จ
- ๋น๋๊ธฐ ์์ ์ด ์ฑ๊ณตํ๊ฑฐ๋ ์คํจํ ๋ค์ .then() ๋ฉ์๋๋ฅผ ์ด์ฉํ์ฌ ์ถ๊ฐํ ๊ฒฝ์ฐ์๋ 1๋ฒ๊ณผ ๋๊ฐ์ด ๋์
- .then()์ ์ฌ๋ฌ ๋ฒ ์ฌ์ฉํ์ฌ ์ฌ๋ฌ ๊ฐ์ callback ํจ์๋ฅผ ์ถ๊ฐํ ์ ์์ (Chaining)
- ๊ฐ๊ฐ์ callback์ ์ฃผ์ด์ง ์์๋๋ก ํ๋ํ๋ ์คํํ๊ฒ ๋จ
- Chaining์ Promise์ ๊ฐ์ฅ ๋ฐ์ด๋ ์ฅ์