Javascript ES6 - async & await

async와 await 키워드는 promise가 너무 복잡해서 쓰기 싫을 때 사용할 수 있는 대체품 같은 것이라 할 수 있습니다. async는 함수 앞에만 사용할 수 있다는 특징이 있습니다.  await은 async 함수 안에서만 사용할 수 있습니다.

 

1️⃣  async 사용법

 

함수 앞에 async 키워드를 붙인 상태로 만들면 저절로 Promise 오브젝트가 만들어집니다. 

 

async function add() {
    1+1;
}

 

이렇게 함수를 만들면 함수 자체가 곧 Promise가 됩니다. 그래서 뒤에 then을 붙일 수 있습니다. 

 

async function add() {
    1+1;
}

add.then(()=>{
  console.log('성공');
}

 

이렇게 하면 콘솔에 '성공'이라는 글자가 출력됩니다. promise에 비해 확실히 쉽지만 promise와 다르게 성공했을 때만 사용할 수 있습니다. 따라서 then만 사용할 수 있습니다. 만약 함수 안에서 연산한 결과를 사용하고 싶다면 다음과 같이 하면 됩니다.

 

async function add() {
    return 1+1;
}

add().then((result)=>{
    console.log(result);
});

 

이러면 add의 return값이 result에 들어가게 돼서 사용할 수 있습니다.

 

 

2️⃣  await 사용법

 

await은 then 함수의 대체품이라고 생각할 수 있습니다. 훨씬 간단하게 then함수의 역할을 수행할 수 있습니다.

 

async function add() {
    const pr = new Promise((res, rej)=>{
        const result = 1+1;
        res(result);
    })
    const result = await pr;
    console.log(result);

}

add();

 

원래 하던대로 pr 이라는 프로미스를 만들었습니다. 그리고 result라는 변수에 연산을 담았습니다. 그리고 res라는 성공판정을 줬습니다. 성공판정의 결과에 result 변수를 주었습니다. 

 

const result = await pr 이 부분이 중요합니다. 이 부분을 해석하자면 pr을 기다린 다음에 완료된 후에 그 값을 result에 담겠다는 뜻입니다. 성공판정을 통해 pr이 완료되면 그 이후에 코드진행을 하겠다는 뜻입니다. 그런데 만약 실패판정이 나온다면 어떡할까요? 그러면 코드가 에러가 나면서 멈춰버립니다. 넘어가질 않는 것이죠. 그래서 이를 방지하기 위해 다음과 같은 문법을 사용할 수 있습니다.

 

async function add() {
    const pr = new Promise((res, rej)=>{
        const result = 1+1;
        res(result);
    });
    try {
        const result = await pr;
        console.log(result);
    } catch {
        console.log('안타깝군요');
    }


}

add();

 

try { } catch { } 부분이 핵심입니다. try 안에 있는 코드는 프로미스가 성공했을 때 실행되는 코드이고 catch 부분은 실패했을 때 실행되는 코드입니다.