자바스크립트에서 제공하는 비동기를 간편하게 처리 할 수 있도록 도와주는 객체
정해진 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행이 되어지면
성공의 메세지와 함께 처리된 결과 값을 전달 합니다.
만약, 기능을 수행하다가 예상치 못한 문제가 발생하면 error
를 전달 합니다.
promise
를 통해 비동기적으로 사용하는 것이 좋습니다.promise는 state와 result 2가지 숨김 프로퍼티를 갖고 있습니다.
result는 resolve(value)가 호출되면 value가 되며, reject(error)가 호출되면 error를 갖는다.
- `pending` : 프로미스가 만들어져서 우리가 지정한 오퍼레이션이 수행 중일 때
- `fulfilled` : 오퍼레이션을 성공적으로 끝내게 되면
- `rejected` : 파일을 찾을 수 없거나 네트워크의 문제가 생기면
class 이기 때문에 new
라는 키워드를 이용해서 오브젝트를 생성
promise
는 executor 라는 콜백함수를 받고 그 안에는 resolve
, reject
라는 콜백 함수가 있습니다.
resolve
: 기능을 정상적으로 수행해서 마지막에 최종적으로 데이터를 전달하는 것
reject
: 기능을 수행하다가 중간에 문제가 생기면 호출하게 되는 것
주의점
const promise = new Promise((resolve, reject)=>{
// heavy work (network, read files)
console.log('doing someting...')
setTimeout(() => {
resolve('hyunho')
}, 2000)
})
// promise 는 어떠한 일을 2초 정도 수행 하다가 결국 잘 마무리 되면 resolve 라는 콜백함수를 호출하면서 'hyunho'라는 값을 전달
then
: 값이 정상적으로 잘 수행이 되면[then] 어떤 value
를 받습니다. 그리고 우리가 원하는 기능을 수행하는 콜백 함수를 전달해 주면 됩니다.promise.then((value)=>{
console.log(value) // 2초 뒤에 hyunho 출력
})
// value 는 promise 가 정상적으로 잘 수행이 되어서 마지막으로 resolve 콜백함수에서 전달된 'hyunho'라는 값이 들어갑니다.
reject
를 위에서 사용하면 ?const promise = new Promise((resolve, reject)=>{
// heavy work (network, read files)
console.log('doing someting...')
setTimeout(() => {
//resolve('hyunho')
reject(new Error('no network')) // Error 는 JS에서 제공하는 오브젝트
}, 2000)
})
promise.then((value)=>{
console.log(value) // 2초 뒤에 no network 출력
})
catch
: 에러가 발생 했을 때 어떻게 처리 할 것 인지 콜백 함수 등록promise
.then((value)=>{ // value 는 promise 가 정상적으로 잘 수행이 되어서 마지막으로 resolve 콜백함수에서 전달된 'hyunho'라는 값이 들어간다.
console.log(value)
})
.catch(error =>{
console.log(error)
})
finally
: 성공하든 실패하든 상관 없이 무조건 마지막에 호출promise
.then((value)=>{ // value 는 promise 가 정상적으로 잘 수행이 되어서 마지막으로 resolve 콜백함수에서 전달된 'hyunho'라는 값이 들어간다.
console.log(value)
})
.catch(error =>{
console.log(error)
})
.finally(()=>{
console.log('finally')
})
const fetchNumber = new Promise((resolve, reject)=>{
setTimeout(()=> resolve(1), 1000)
})
fetchNumber
.then(num => num * 2) // 1이 num에 저장
.then(num => num * 3) // 2가 num에 저장
.then(num =>{ // 6이 num에 저장
return new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve(num - 1)
}, 1000)
})
})
.then(num => console.log(num)) // 5 출력
then
은 값을 바로 전달 할 수도 있고, promise 를 전달 할 수 있습니다.const getHen = ()=>
new Promise((resolve, reject)=>{
setTimeout(()=>
resolve('🐔')
,1000)
})
const getEgg = hen =>
new Promise((resolve, reject)=>{
setTimeout(()=>
reject(new Error(`${hen}=>🥚`))
,1000)
})
const cook = egg =>
new Promise((resolve, reject)=>{
setTimeout(()=>
resolve(`${egg}=>🍳`)
,1000)
})
getHen()
.then(getEgg)
.catch(error =>{ // getEgg를 받아올 때 문제가 생긴다면
return '🍕'
})
.then(cook)
.then(console.log)
.catch(console.log
egg 부분에 문제가 있지만 다른 음식으로 대체 하고 싶을 경우
egg를 받을 수 없지만 피자로 대신하여 promise 가 잘 실행 됩니다.
문제가 있는 곳 앞에 바로 catch
를 사용하면 됩니다.
전통적인 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용 합니다. 그런데 이런 콜백 패턴은 콜백 헬로
인해 가독성이 나쁘고, 비동기 처리 중 발생한 에러의 처리가 곤란하여 ES6부터 비동기 처리를 위한 Promise가 도입 되었습니다.
promise는 비동기 처리에 성공하면 resolve 메소드
를 호출해서 비동기 처리 결과를 후속처리 메서드(then)
로 전달
promise는 비동기 처리에 실패하면 reject 메소드
를 호출해서 에러메시지를 후속처리 메서드(catch)
로 전달