Javascript/비동기 처리

async/ await 사용방법 (feat. then과 함께 쓰기)

appmaster 2021. 2. 2. 16:14

async와 await은 세트로 다니는데,

await은 Promise가 적용되는 함수 앞에 쓰입니다.

 

 

1. async/await 사용방법

function sleep(ms){
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function process(){
    console.log('안녕하세요');
    await sleep(1000);
    console.log('반갑습니다!');
}

process();

이렇게 보면 굳이 Promise 뒤에 .then을 사용하지 않아도 되고 setTime을 하지않아도 await으로 설정할수있게 됩니다.

이것을 보면 다른 함수를 만들어서 선언하는것이 아니기 때문에 분기점 만드는것도 쉽습니다.

변수를 공유하는것도 쉬워져서 작성하기가 쉽습니다.

 

또한 async function process함수는 sleep이라는 함수도 반환하게 됩니다.

 

 

 

2. async/ await 함수에 return된 값으로 then을 사용하는 방법

function sleep(ms){
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function process(){
    console.log('안녕하세요');
    await sleep(1000);
    console.log('반갑습니다!');
    return true;
}

process().then(value=>{
    console.log(value);
})
//출력값
안녕하세요
반갑습니다!
true

 다음과 같이 return true값을 value로 받아서 출력할 수 있습니다.

 

 

 

3. async/await 함수에서 try catch문을 사용하는 방법

function sleep(ms){
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function makeError(){
    await sleep(2000);
    const error = new Error();
    throw error;
}

async function process(){
    try{
        await makeError();
    }catch(e){
        console.error(e);
    }
}

process();