[JavaScript] Promise대신 사용할 수 있는 async / await

 

2017년에 나왔고 ES6라고 할 수는 없고 ES8부터 Promise를 대신하여 사용할 수 있는 문법이 있습니다.

async / await이라는 키워드입니다. 이 키워드는 Promise와 then을 더 쉽게 만들어주는 문법입니다.

async / await

async 키워드를 사용하면 Promise 오브젝트가 자동으로 생성됩니다.

이 키워드는 function 선언 앞에서만 붙일 수 있습니다.

async function fc(){
    1+1;
}

 

function앞에 async를 붙임으로써 fc()는 Promise가 되었습니다. 이제 fc()는 then을 사용할 수 있습니다.

 

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

fc().then(function(result){
    console.log(result);
});


결과 -> 2

 

이처럼 then을 사용할 수 있으며 return을 통해 값을 넘겨주면 then에서 넘겨받아 사용할 수 있습니다.

 

그리고 then()이라는 키워드를사용하지 않고 await이라는 키워드를 이용할수도 있습니다.

 

async  function fc(){
    var sum = new Promise((res, rej)=>{
        var result = 1+1;
        res(result);
    });
    
    var result = await sum;
    console.log(result);
}

fc();

 

위 코드의 정확한 뜻은 sum Promise를 기다린 다음에 완료되면 결과를 result 변수에 담아 실행해달라는 뜻이 됩니다.

 

 

 

728x90

 

---

try / catch

 

awiat은 실패하면 에러가 나타나고 코드가 그 자리에서 멈추게 됩니다.

async function fc(){
    var sum = new Promise((res, rej)=>{
        rej();
    });
    
    var result = await sum;
    console.log(result);
    
    console.log(123123);
}

fc();

 

위의 코드는 일부러 실패(rejected)를 유도한 코드 입니다. 실행하면 결과를 받아오는 await 이후의 코드들이 더이상 실행되지 않고 끝이 나게 됩니다.

 

그래서 실패할 경우 코드실행을 멈추지 않고 진행시키기 위한 방법을 사용할 수 있습니다.

바로 try / catch 를 사용하는것입니다.

try{} 안의 코드가 에러가 나서 멈출 경우, 대신 catch{} 내부의 코드를 실행해 줍니다.

 

async function fc(){
    var sum = new Promise(function(res, rej){
      var result = 1+1;
        res(result);
    });
    try{
        // sum()이 성공할 경우 실행할 코드
        var result = await sum;
        console.log(result);
    }
    catch{
        // sum()이 실패할 경우 실행할 코드
        console.log('실패입니다');
    }
}

fc();

 

이렇게 하면 에러처리를 할 수 있습니다.