CODE:H

JavaScript - async/await

 
  • Feb 22, 2021

Promise를 이용하여 비동기처리 시 문제점이 있다.

  • then()을 이어서 사용할 때 몇 번째 then()에서 에러가 발생했는지 헷갈리게 되어 디버깅이 불편하다.
  • try/catch 대신에 cath()를 사용하여 예외처리를 해야 하여 예외처리가 난해하거나 누락이 된다.
  • 여러 개의 promise를 사용하게 되면 코드가 복잡하며 가독성이 떨어진다.

async/await

Promise의 문제점을 해결하기 위해 async/await 를 사용한다.
비동기 코드를 사용하지만, 코드상으로는 동기적으로 보이는 장점이 있다.
모든 async 함수는 promise를 리턴하고, 모든 await 함수는 일반적으로 promise가 된다.

async

async는 function 앞에 위치한다. 선언방식은 아래 두 가지의 방식이 있다.

async function 함수이름(){};
const 함수이름 = async() => {};

async 함수는 promise를 반환한다. promise가 아닌 것은 promise로 감싸서 반환한다.

await

<font color=red>await는 async 함수 내부에서만 사용해야 한다.</font>
async 함수는 await를 만나면 promise가 처리될 때까지 기다렸다가 결과를 반환한다.

promise 객체를 리턴하는 함수 p

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

promise객체를 리턴하는 함수를 await로 호출하는 방법

(async function main(){
    const ms = await p(1000);
    console.log(ms);
})();

await는 resolve의 인자를 넘겨서 밑으로 진행한다.

promise객체가 rejected 된 경우에는 try-catch를 이용

(async function main(){
    try{
        const ms = await p(1000);
    }catch (e) {
        console.log(e);
    }
})();

에러가 나게 되면 catch에 걸리게 된다.

promise 가 아닌 값 반환 시 promise.reslove 함수로 감싸서 리턴

async function asyncP(){
    return `HM`;
}

(async function main(){
    try{
        const name = await asyncP();
        console.log(name);
    }catch (e) {
         console.log(e);
    }
})();

promise가 아닌 값을 반환하더라도 promise.reslove 함수를 감싸서 반환한다.(new Promise 안 써도 됨!)

async 함수 finally

(async function main(){
    try{
        const name = await asyncP();
    }catch (e) {
        console.log(e);
    }finally {
        console.log(`끝`);
    }
})();

async 함수 finally는 resolve, reject 둘 다 마지막에 실행된다.

Promise 와 async/await 체이닝 비교

Promise

p(1000)
    .then(() => p(1000))
    .then(() => p(1000))
    .then(() => {
        console.log(`Promise 체이닝`);
    });

async/await

(async function main(){
    await p(1000);
    await p(1000);
    await p(1000);
    console.log(`async/await 체이닝`);
})();

둘 중 사용하기 편한 쪽으로 쓰면 된다.

async/await를 이용하여 Promise all 사용

(async function main(){
    const rs = await Promise.all([p(1000),p(2000),p(3000)]);
    console.log(rs);
})();

Promise all은 Promise를 참조

async/await를 이용하여 Promise race 사용

(async function main(){
    const rs = await Promise.race([p(1000),p(2000),p(3000)]);
    console.log(rs);
})();

Promise race는 Promise를 참조

참고자료 : https://www.daleseo.com/js-async-async-await/
참고자료 : https://ko.javascript.info/async-await


Search