JavaScript 기초 9 (Promise, async/await)

Promise

자바스크립트에서 비동기 작업의 결과를 미래의 값으로 표현하는 객체로, 시간이 걸리는 작업이 성공적으로 완료되었는지 또는 실패했는지를 나중에 알려주기 위해 사용한다.

 

콜백 지옥

콜백 지옥은 자바스크립트에서 비동기 작업을 콜백 함수로 계속 중첩해 처리하다 보니 코드가 오른쪽으로 깊게 들여 쓰기 되며 복잡해지고, 흐름을 한눈에 이해하기 어려워지는 문제를 말한다.

const promise = new Promise((resolve, reject) => {
    if(성공){
        resolve(결과값)  // 작업 성공 시 호출
    }else{
        reject(에러)     // 작업 실패 시 호출
    }
})

promise.then(result => {
    console.log("성공: ", result)
})
.catch(error => {
    console.log("실패: ", error)
})

promise 메서드

Promise.all()

Promise.all([p1, p2, p3])
    .then(results => {
    console.log(results)
})

• 모든 Promise가 성공해야 then을 실행
• 하나라도 실패하면 catch를 실행
• 병렬 처리용

Promise.race()

Promise.race([p1, p2])
    .then(result => console.log(result))

• 가장 먼저 완료된 Promise 하나의 결과를 사용
• 성공 / 실패 상관없이 먼저 끝난 것을 기준

Promise.allSettled()

Promise.allSettled([p1, p2])
    .then(results => console.log(results))

• 모든 Promise의 성공 / 실패 결과를 모두 반환
• 실패해도 중단되지 않음

Promise.any()

Promise.any([p1, p2])
    .then(result => console.log(result))
    .catch(err => console.error(err))

• 하나라도 성공하면 then 실행
• 모두 실패하면 catch 실행

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

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

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

// 순차 처리 (Promise 체이닝)
getBanana().then((banana) => getApple().then((apple) => [banana, apple]))
    .then(console.log)

// 병렬 처리 (하나라도 실패하면 전체 실패)
Promise.all([getBanana(), getApple()])
    .then((fruits) => console.log("all", fruits))

// Promise.all([getBanana(), getApple(), getOrange()])
// .then((fruits) => console.log("all", fruits))

// 가장 빨리 수행된 것이 실행
Promise.race([getBanana(), getApple()])
    .then((fruit) => console.log('race', fruit))

// 여러 프로미스를 병렬로 처리하되 하나의 프로미스가 실패해도 무조건 실행
Promise.allSettled([getBanana(), getApple(), getOrange()])
    .then((fruits) => console.log('allsettled', fruits))
    .catch(console.log)

async / await

• Promise를 기반으로 한 자바스크립트의 비동기 처리 문법으로, 비동기 코드를 동기 코드처럼 읽기 쉽고 직관적으로 작성할 수 있게 한다.
• async가 붙은 함수는 항상 Promise를 반환하며, await는 Promise가 처리될 때까지 실행을 일시적으로 기다린 뒤 결과 값을 반환받아 다음 코드로 넘어가게 한다.

function orderCoffee(menu) {
    console.log(`${menu} 주문을 접수했습니다. 잠시만 기다려주세요`)
    const availableMenu = ['아메리카노', '디카페인 아메리카노', '카페라떼', '바닐라라떼']
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (availableMenu.includes(menu)) {
                resolve(`${menu}가 준비되었습니다. 맛있게 드세요 :)`)
            } else {
                reject(`죄송합니다. ${menu}는 판매하지 않습니다 :(`)
            }
        }, 2000)
    })
}

async function startOrder() {
    try {
        const result = await orderCoffee("녹차")
        console.log(result)
    } catch (error) {
        console.log(error)
    } finally {
        console.log("주문이 완료되었습니다")
    }
}

startOrder()