Node.js - async/await

- async/await

---

async/await 의 문법을 알기전에 그전에 정리했던 내용들을 복습해보자.

Node.js는 비동기방식으로 처리를 하게 되며 처리가 끝나면 자동적으로 callback 함수가 호출되게된다.

callback 함수는 특정함수에 매개변수로서 전달되는 함수로 비동기 코드를 동기식으로 처리 가능하게 해준다.

하지만 여러개의 callback 을 연달아 사용하게 되면 에러가 발생할 가능성이 높고, 코드의 가독성이 크게 떨어진다.

아래의 그림은 '콜백 지옥' 이라고 불리는 좋지않은 현상이다.

이러한 callback의 지옥을 벗어나기위해 Promise 개념이 ES6에서 도입되었고 좀더 효율적으로 동기적 처리가 가능하게 되었다.(resolve,reject). 하지만 C,Java 와 같은 절차 언어처럼 좀더 직관적인 문법이 필요하다고 생각이 들어 ES7에서 새로운 문법이 등장하게 되었는데 그것이 async/await 이다.

 

예를 들어 URL을 가져와서 응답을 텍스트로 로그하려는 경우를 생각해보자. 

먼저 Promise를 사용했을때의 예이다.

function logFetch(url){
    return fetch(url)
        .then(response => response.text())
        .then(text => {
            console.log(text);
        }).catch(err => {
            console.error('fetch failed', err);
        })
}

다음은 똑같은 결과를 내지만 async await를 사용했을때의 예이다.

async function logFetch(url){

   try {
       const response = await fetch(url);
       console.log(await response.text());
   } catch (err){
       console.log('fetch failed',err);
   }
   
}

promise 을 사용했을때 보다 코드가 훨씬 더 간결하고 직관적이다. 사용법또한 간단하다.

function 앞에 async 를 비동기도 처리되는 부분 앞에 await 를 붙여주면 된다.

주의해야할 점은 await 는 반드시 async 함수 안에 쓰여야한다는 점과 await 뒤에 오는 비동기 처리코드는 반드시 promise를 반환해야된다는 점이다.

이러한 점들만 주의하면 좀더 나은 코딩이 가능하다. promise의 단점으로 에러 핸들링부분 또한 보완이 가능하다.

아래의 코드를 보게되면 getJSON() 라는  promise 값을 반환하는 함수에 대한 예외처리 구문이다.

하지만 try/catch 는 JSON.parse 에서 에러가 나더라고 catch 구문으로 넘어가지 못한다.

왜냐하면 promise 안에서 발생한 에러이기에 promise 상에서 .catch 를 호출해야한다. 

이렇게 되면 예외처리하는 catch 구문이 중복되는 현상이 발생하게 되면서 코드가 좀더 복잡해진다.

const makeRequest = () => {
    try {
        getJSON()
            .then(result => {
                const data = JSON.parse(result)
                console.log(data)
            })
//            .catch((err) =>{
//                console.log(err)
//        })
    } catch (err){
        console.log(err)
    }
}

반면 async/await 상에서는 에러 처리가 한번에 가능하다.

const makeRequest = async () => {
    try {
        const data = JSON.parse(await getJSON())
        console.log(data)
    } catch (err){
        console.log(err)
    }

}

https://www.zerocho.com/category/ECMAScript/post/58d142d8e6cda10018195f5a

https://developers.google.com/web/fundamentals/primers/async-functions?hl=ko

https://blueshw.github.io/2018/02/27/async-await/

https://proinlab.com/archives/2138