async/await

자바스크립트 에서 promise 의 개념을 이해하면 문득 이런 생각이 든다.

조금 더 편하게 비동기 호출을 할 수 있는 방법 없을까??

만약에 비동기 호출이라 하더라도 순서대로 비동기를 호출 하고 싶을 때..굳이 promise 에서 .then.then.. 이럴 필요 없이, 콜백 지옥을 경험 할 일 없이 할 수 있는 방법이 있다. 바로 async/await 를 사용하면 된다.

async는 promise의 코드를 깔끔하게 줄여주기 때문에 가독성을 높혀 주는 효과가 있다. 사용법은 function 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여주면 된다. 그리고 한가지 알아둬야 할 점은 await 뒤에 오는 부분은 반드시 promise를 반환해주어야 하고, async가 붙은 function도 promise를 반환해야 한다는 점이다. 사용법의 예시는 아래와 같다.

async function test() {
    // logic
}

변수 = async() => {
	// logic
}

그러면 이번에는 promise와 async & await를 사용했을 때 어떤 차이가 있는지를 알아보자.

let asyncFunc1 = (msg) => {
new Promise((resolve) => {
        setTimeout(() => {
            resolve(`func1 : ${msg}`);
        }, 1000);
    })
};
asyncFunc1("hi").then((msg)=>{
console.log(msg);//hi 출력
})

let asyncFunc2 = (msg) => {
new Promise((resolve) => {
        setTimeout((resolve) => {
            resolve(`func2 : ${msg}`);
        }, 1000)
    })
}

위와 같이 promise를 반환하는 함수 2개가 있다고 가정하자. 아래는 promise를 썼을 때의 예시이다.

function promiseMain() {
    asyncFunc1('Hello').then((result) => {
        console.log(result);
return asyncFunc2('world')
    }).then((result) => {
        console.log(result);
    })
}

이번에는 async & await를 사용하였을 때의 코드이다.

async function asyncMain() {
let result =await asyncFunc1('Heello');
    console.log(result);
    result =await asyncFunc2('world');
    console.log(result);
}

이렇게 짧은 코드로만 비교하여도 확실히 async & await을 사용하는 것이 promise보다 가독성이 좋다는 것을 알 수 있다.

async & await 예제

function asyncItem() {
return new Promise((resolve, reject) => {
var item = [1, 2, 3];
        resolve(item);
    });
}

async function logItems() {
var resultItem =await asyncItem();
    console.log(resultItem);
}

asyncItem 함수는 Promise()를 객체를 반환하는 함수이다. resolve() 함수를 사용했기 때문에 item 배열을 반환해야 한다. 만약 await를 사용하지 않고 사용한다면 promise(), then()을 사용해야 하는데 이거를 비동기적 사고를 하면서 코드를 작성해야 하고 코드가 좀 길어진다면 가독성도 떨어지고 머리도 아플 것이다.