1. Promise 정의

리턴 요청을 받을 동안 다른 작업을 할 수 있음

1) resolve, reject

classback
어떤일이 완료된 후 실행되는 함수

resolve : 성공 후 실행될 함수
reject : 실패 후 실행될 함수

(1) 성공(resolve)

const pr = new Promise((resolve, reject) => {
	setTimeout(() => {
    	resolve("OK")
    }, 3000)
})

초기
state : pending(대기)
result : undefined

3초 후

성공할 경우
state : fulfilled(이행됨)
result : "OK"

(2) 실패(reject)

const pr = new Promise((resolve, reject) => {
	setTimeout(() => {
   	reject(new Error('error..'))
   }, 3000)
})

초기
state : pending(대기)
result : undefined

3초 후

실패할 경우
state : rejected(거부됨)
result : error

2) then, catch, finally

(1) then

then을 사용하여 resolve와 reject를 처리할 수 있음

const pr = new Promise((resolve, reject) => {
	setTimeout(() => {
    	resolve("OK")
    }, 3000)
})

pr.then(
  	//이행 되었을때 실행
    function(result){
    	console.log(result + ' 가지러 가자.');
     	// OK 가지러 가자.
    },
  	//거부 되었을때 실행
    function(err){
    	console.log('다시 주문해주세요..');
    } 
)

(2) catch

catch 는 reject된 경우에만 사용

가독성이 더 좋고
첫번째 함수를 실행했을때 오류를 잡을 수 있음

pr.then(
  	//이행 되었을때 실행
    function(result){}
).catch(
  	//거부 되었을때 실행
    function(err){} 
)

(3) finally

finally 이행 또는 거부 되는 처리가 완료되면 실행

pr.then(
  	//이행 되었을때 실행
    function(result){}
).catch(
  	//거부 되었을때 실행
    function(err){} 
).finally(
	function(){
    	console.log('--주문 끝--')
    }  
)

로딩화면을 없앨때 유용하게 사용가능

3. Promise 사용

(1) 성공

const pr = new Promise((resolve, reject) => {
	setTimeout(() => {
    	resolve("OK")
        //reject(new Error("err...."))
    }, 3000)
})

console.log('시작')
pr.then(result => {
    console.log(result);
}).catch(err => {
    console.log(err)
}).finally(() => {
    console.log('끝')
})

//시작
//OK
//끝

(2) 응용

세개의 상품을 주문한 경우

promise를 사용하지 않은 경우

const f1 = (callback) => {
    setTimeout(function() {
        console.log("1번 주문 완료")
        callback();
    }, 1000);
}

const f2 = (callback) => {
    setTimeout(function() {
        console.log("2번 주문 완료")
        callback();
    }, 3000);
}

const f3 = (callback) => {
    setTimeout(function() {
        console.log("3번 주문 완료")
        callback();
    }, 2000);
}

console.log('시작')
f1(function(){
    f2(function(){
        f3(function(){
            console.log("끝")
        })
    })
})

//시작
//1번 주문 완료
//2번 주문 완료
//3번 주문 완료
//끝

callback hell(콜백지옥)
depth가 깊어지면서 계속 callback을 호출

---

promise를 사용하는 경우

const f1 = () => {
    return new Promise((res, rej) => {
        setTimeout(function() {
            res("1번 주문 완료")
        }, 1000);
    })
    
}

const f2 = (message) => {
    console.log(message);
    return new Promise((res, rej) => {
        setTimeout(function() {
            res("2번 주문 완료")
        }, 3000);
    })
    
}

const f3 = (message) => {
    console.log(message);
    return new Promise((res, rej) => {
        setTimeout(function() {
            res("3번 주문 완료")
        }, 2000);
    })
    
}

console.log('시작')
f1()
.then((res) => f2(res))
.then((res) => f3(res))
.then((res) => console.log(res))
.catch(console.log)
.finally(() => {
    console.log("끝")
})

시작
1번 주문 완료
2번 주문 완료
3번 주문 완료
끝

프로미스 체이닝(Promiss chaining)
프로미스가 연결이 반복되는 경우

---

4. Promise.all

요소를 배열로 받음
한꺼번에 실행하고 모두 이행하면 값을 받을 수 있음

console.time('x')
Promise.all([f1(), f2(), f3()])
.then(res => {
    console.log(res)
    console.timeEnd("x")
})

//[ '1번 주문 완료', '2번 주문 완료', '3번 주문 완료' ]
//x: 3.009s

reject될 경우 실행되지 않음
다 보여주거나 하나라도 어긋날 경우 안보여주는 경우 상용

5. Promise.race

프로미스 중에 가장 먼저 완료된 결과값으로 이행/거부

console.time('x')
Promise.race([f1(), f2(), f3()])
.then(res => {
    console.log(res)
    console.timeEnd("x")
})

//1번 주문 완료
//x: 1.019s

6. Promise.any

프로미스 중에 가장 먼저 이행된 객체 반환
모두 거부 될경우 모두 거부됐다는 내용 반환