JavaSript Promise Object

✔ Promise

❗❗❗ Promise ❗❗❗
        https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise - 세부설명

        - 프로미스 자바스크립트 비동기 처리에 사용되는 객체
        - 주로 서버에서 받아온 데이터를 화면애 표시할 때 사용

프로미스를 리턴받은 객체
.then(정상적으로 프로미스 객체가 리턴되었다면 필요한 일을 수행)
.catch(에러객체가 리턴되었다면 에러를 처리)
.finally(최종적으로 처리할 일을 수행)

✔ 기본예제 1

function runInDelay(seconds){
        // 성공했을 때 실패했을 때
        return new Promise((resolve, reject) =>{
        if(!seconds || seconds < 0){
        reject(new Error('seconds가 0보다 작음'));
        //실패의 경우 error와 유사 -> 실패로 catch부분으로 이동
        }
        setTimeout(resolve, seconds*2000);
        } )
        }

✔ CASE1

runInDelay(2)// 함수를 실행 -> 프로미스 -> 성공|실패
.then(()=> console.log('타이머가 완료되었습니다.')) // 정상적으로 수행되면 then으로 이동
.catch(console.error)// promise가 실패를 하게되면 catch로 이동
.finally(()=> console.log('모든 작업이 끝났습니다')) // 마지막으로 finally로 이동한다.

✔ CASE2

runInDelay()// 함수를 실행 -> 프로미스 -> 성공|실패
.then(()=> console.log('타이머가 완료되었습니다.')) // 정상적으로 수행되면 then으로 이동
.catch(console.error)// promise가 실패를 하게되면 catch로 이동
.finally(()=> console.log('모든 작업이 끝났습니다')) // 마지막으로 finall

✔ 기본예제 2

function fetchEgg(chicken) {
        // reject를 염두하지 않고 resolve만 리턴하는 내용
        return Promise.resolve(`${chicken} => 🥚`);
        }

        function fryEgg(egg){
        return Promise.resolve(`${egg} => 🍳`)
        }

        function getChicken(){
        // return Promise.resolve(`🐔 => 🐓`)
        return Promise.reject(new Error('치킨이 다 떨어졌음!!'))
        }

✔ CASE1

getChicken()
.then((chicken) => {
return fetchEgg(chicken);
})// 위 아래 동일하다
.then(egg => fryEgg(egg))
.then((friedEgg) => console.log(friedEgg))
.catch((error) => console.log(error.name))
// 출력결과 : 🐔 => 🐓 => 🥚 => 🍳

✔ CASE2

getChicken() // - 오류 발생시점
.catch(() => `🐥`) // catch 후 바로 나가는게 아니라 오류를 대체해 줌
.then((chicken) => {
return fetchEgg(chicken);
})// 위 아래 동일하다
.then(egg => fryEgg(egg))
.then((friedEgg) => console.log(friedEgg))
// 출력결과 : 🐥 => 🥚 => 🍳

✔ CASE3 (2와 동일  -> 축약형) 

// 축약형
        getChicken()
        .catch(() => `🐥`)
        .then( fetchEgg)
        .then(fryEgg)
        .then(console.log)
        // 출력결과 : 🐥 => 🥚 => 🍳

✔ 기본예제 3

unction getBanana(){
        return new Promise((resolve) => {
        setTimeout(() => {
        resolve('🍌')
        }, 1000)
        })
        }

        function getApple(){
        return new Promise((resolve) => {
        setTimeout(() => {
        resolve('🍎')
        }, 3000)
        })
        }

        function getOrange(){
        return Promise.reject(new Error('오렌지는 없음'))
        }

✔ CASE1

// 바나나와 사과를 동시에 가지고 오기
// 바나나와 사과를 배열에 저장해서 콘솔에 출력
// 순차적으로 처리 -> 총 4초가 걸림

        getBanana()
        .then((banana)=> //바나나를 넣어주고
        getApple() // 사과에서  사과 이모지를 넣어준 후
        .then((apple)=> [banana, apple])) // 이 바나나와 사과를 배열에 넣어준다
        .then(console.log)

        // 결과 : [ '🍌', '🍎' ]

✔ CASE1 - all

// Promise.all 병렬적으로 한번에 모든 Promise들을 실행

        Promise.all([getBanana(),getApple()])
        .then((fruits) => console.log('✔ Promise.all', fruits));
        // 3초 병렬로 처리하기 때문이다, 위에 예가 4초는 순차적이기 때문이다.

✔ CASE2 - race

// Promise.race : 주어진 Promise중에 가장 빨리 수행된 것이 출력 하나만 -> 🍌
        Promise.race([getBanana(),getApple()])
        .then((fruit) => console.log('✔Promise.race',fruit))

✔ CASE3 - all - error

Promise.all([getBanana(),getApple(),getOrange()])
.then((fruits) => console.log('✔ Error',fruits))
.catch(console.log)

✔ CASE4 - allSettled

// Promise.allSettled(iterable)
// 주어진 모든 프로미스가 처리(이행 또는 거부)될 때까지 대기하는 새로운 프로미스를 반환합니다. 상태를 확인(정상적으로 또는 비정상적으로 수행하는것 확인)


Promise.allSettled([getBanana(),getApple(),getOrange()])
.then((fruits) => console.log('✔Promise.allSettle:',fruits))
.catch(console.log)

✔ async/awit

async/await
- callback, Promise 비동기처리를 좀더 쉽게 처리할 수 있도록 사용됨
- ES7(2017)에 추가된 문법

1. 비동기 처리될 전체 함수앞에 async를 붙여줌
async function 함수명(){
...

}

2. 결과를 리턴받는 함수핲에 await를 붙여줌
async function 함수명(){
변수명 = await 함수명();
...
}

✔ 기본예제 1

function getBanana(){
        return new Promise((resolve) => {
        setTimeout(() => {
        resolve('🍌')
        }, 1000)
        })
        }

        function getApple(){
        return new Promise((resolve) => {
        setTimeout(() => {
        resolve('🍎')
        }, 3000)
        })
        }

        function getOrange(){
        return Promise.reject(new Error('오렌지는 없음'))
        }

✔ 활용

// 바나나와 사과를 같이 가지고 오기

        async function fetchFruits(){
        const banana = await getBanana(); // 정상적으로 가저왔을 떄가지 기달리기
        const apple = await getApple();
        return [banana,apple]
        }

        fetchFruits()
        .then((fruits)=> console.log(fruits))

✔ 기본예제 2

function fetchEgg(chicken) {
        // reject를 염두하지 않고 resolve만 리턴하는 내용
        return Promise.resolve(`${chicken} => 🥚`);
        }

        function fryEgg(egg){
        return Promise.resolve(`${egg} => 🍳`)
        }

        function getChicken(){
        // return Promise.resolve(`🐔 => 🐓`)
        return Promise.reject(new Error('치킨이 다 떨어졌음!!'))
        }

✔ 활용

async function makeFriedEgg(){
let chicken
try{
chicken = await getChicken();
}catch{
chicken ='🐥';
}
const egg = await fetchEgg(chicken)
return fryEgg(egg);
}
makeFriedEgg()
.then(console.log)

// 결과 : 🐥 => 🥚 => 🍳