asyn, await

Jaeseok Han·2023년 3월 11일

javascript 문법

목록 보기
10/11

1. asyn

함수 앞에 async를 선언해주면 항상 promise를 반환

async function getName(){
    return "Mike";
}

console.log(getName())
// Promise { 'Mike' }

getName().then((name) => {
    console.log(name)
})
// Mike

2. await

❗ await는 async 내부 함수에서만 사용가능

async function getName(name){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(name);
        }, 1000)
    });
}

async function showName(){
    const result = await getName('Mike')
    console.log(result);
}

console.log("시작");
showName();

//시작
//Mike (1초후)

3.Promise 와 비교

🎈프로미스(Promise) 정리

1) 순차적처리

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("시작")
async function order(){
    const result1 = await f1();
    const result2 = await f2(result1);
    const result3 = await f3(result2);
    console.log(result3);
    console.log("종료")
}

order();

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

💡promise then을 사용하는것보다 가독성이 좋음

2) 오류처리

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() {
            rej(new Error("err..."))
        }, 3000);
    })
    
}

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

console.log("시작")
async function order(){
    try {
        const result1 = await f1();
        const result2 = await f2(result1);
        const result3 = await f3(result2);
        console.log(result3);    
    } catch (e) {
        console.log(e)
    }
    console.log("종료")    
}

order();


시작
1번 주문 완료
Error: err...
종료

async await 함수 내부에서도 비동기 함수 실행 가능

console.log("시작")

async function order(){
    try {
        const result = await Promise.all([f1(), f2(), f3()])
        console.log(result)
    } catch (e) {
        console.log(e)
    }
    console.log("종료")    
}

order();

-------------------------------------------------
시작
[ '1번 주문 완료', '2번 주문 완료', '3번 주문 완료' ]
종료

0개의 댓글