Promise 콜백지옥을 벗어나자!!

• unnsettled (미확정) 상태: pending. thenable하지 않다.
• settled (확정) 상태: resolved. thenable한 상태.
  • fulfilled (성공)
  • rejected (실패)

// const a =new Promise(function(성공시호출함수, 실패시호출함수) {
	//성공,실패 동작을 구현 
//}
const promiseTest = param => new Promise((resolve, reject) => {
	setTimeout(() => {
		if (param) {
			resolve("해결 완료")
		} else {
			reject(Error("실패!!"))
		}
	}, 1000)
})

const testRun = param => promiseTest(param) //Promise 인스턴스 
  .then(text => { console.log(text) }) //성공(resolve)일때 .then을 실행한다. 파라미터(text)에는 성공했을때 값이 들어온다.
  .catch(error => { console.error(error) })// 실패(reject)했을때 실행 

const a = testRun(true) // Promise {<resolved>: undefined}
a.then(res => {return 1}) // Promise {<resolved>: 1}
a.then(res => {return 1}).then(res => {console.log(res+1)}) // Promise {<resolved>: 2} 계속 이어감
const b = testRun(false)

문법

• new Promise(function)
• .then(), .catch()는 언제나 promise를 반환한다.

.then .catch 표현 방법 두가지

const executer = (resolve, reject) => { ... }
const prom = new Promise(executer)

const onResolve = res => { ... }
const onReject = err => { ... }

// (1)
prom.then(onResolve, onReject)

// (2)
prom.then(onResolve).catch(onReject)

두번째 방법 catch 따로 명시 하는 방법을 추천한다.

Simple Promise Builder

const simplePromiseBuilder = value => {
  return new Promise((resolve, reject) => {
    if(value) { resolve(value) }
    else { reject(value) }
  })
}

//아니.. promise 인스턴스를 쓸때마다 .then .catch 를 써줘야 하나..? 
simplePromiseBuilder(1)
  .then(res => { console.log(res) })
  .catch(err => { console.error(err) })

simplePromiseBuilder(0)
  .then(res => { console.log(res) })
  .catch(err => { console.error(err) })

const simplePromiseBuilder2 = value => {
  return new Promise((resolve, reject) => {
    if(value) { resolve(value) }
    else { reject(value) }
  })
  //짜잔 빌더 안쪽에서 명시해준다. 
  .then(res => { console.log(res) })
  .catch(err => { console.error(err) })
}

simplePromiseBuilder2(1) //훨씬 깔끔 
simplePromiseBuilder2(0)

Promise 실행큐

const prom = new Promise((resolve, reject) => {
  resolve()
  reject()
  console.log('Promise')
})
prom.then(() => {
  console.log('then')
})

prom.catch(() => {
  console.log('catch')
})

console.log('Hi!')

// Promise -> Hi  -> then 

전체 소스 실행하는 과정(Promise -> HI) 에서 Promise인스턴스의 함수(resolve())도 같이 실행 fulfilled가 되면서 .then 함수 실행('then') 이후 fulfilled 상태이기 때문에 reject 무시

const prom = new Promise((resolve, reject) => {
  //순서 바꾸기 
  reject() 
  resolve()
  console.log('Promise')
})
prom.then(() => {
  console.log('then')
})

prom.catch(() => {
  console.log('catch')
})

console.log('Hi!')

//Promis -> HI -> catch

1.then 이나 catch 구문은 실행 큐에 후순위로 실행

2. promise 인스턴스에 넘긴 함수 내부에서 resolve나 reject 중 먼저 호출한것만 반영한다.

두개다 실행은 되는데 pending 상태일 때만 의미가 있기 때문에 fulfilled가 된이후 변화가 없다.

Promise.resove, Promise.reject

바로 fulfilled 상태에서 값이나 식을 넘겨줘서 표현할수도 있다.

Promise.resolve(42)  
.then(res => { console.log(res) }) //42
.catch(err => { console.error(err) })

Promise.reject(12)
.then(res => { console.log(res) })
.catch(err => { console.error(err) }) //에러 12

thenable !!!아직 이해가 안감

const thenable = {
  then (resolve, reject) {
    resolve(33)
  }
}
const prom = Promise.resolve(thenable)
prom.then(res => { console.log(res) })

const thenable = {
  then (resolve, reject) {
    reject(33)
  }
}
const prom = Promise.resolve(thenable)
prom.catch(err => { console.log(err) })