[JavaScript] 비동기처리 async/await

 

💡 비동기 처리 방식 - async/await

 

자바스크립트는 싱글 스레드 프로그래밍 언어이기 때문에 비동기처리가 필수적이다. 

<싱글 스레드 -> 하나의 프로세스에서 오직 하나의 스레드로만 실행. 그렇기 때문에, 하나의 레지스터와 스택으로 표현이 가능하다.>

비동기 처리는 그 결과가 언제 반환될지 알 수 없기 때문에 동기식으로 처리하는 기법들이 사용되어야 하는데, 대표적으로 setTimeout, callback, promise 등이 있다. 세가지 모두 비동기 코드를 작성할 수 있지만, 콜백 헬의 문제를 해결할 수 없었기에, ES8 부터는 보다 간단하고 가독성 좋게 비동기 처리를 동기처럼 구현하는 async/await이 도입되었다.

 

async/await 은 Promise를 기반으로 동작하며, then/catch/finally와 같은 후속 처리 메서드 없이 마치 동기 처리처럼 사용 가능하다.

 

Promise 문법

function p() {
    return new Promise((resolve, reject) => {
        resolve("hello");
    });
}
p().then((n) => console.log(n));

async 문법

function 앞에 aync 만 붙여주면 자동으로 promise 객체로 인식되고 return 값은 resovle 값과 같다. 

async function p2() {
    return "hello2";//리턴값은 {<resolved>: "hello2"}
}

p2().then((n) => console.log(n));

 

promise 문법을 사용했을 때는 직접 .then() 을 통해 동기처리를 했지만, await을 사용하면 바로 동기처리를 할 수 있다.

async function p2() {
    let result = await Promise.resolve("hello");
    return result;
}

p2();

 

<정말 많이 도움 되었던 블로그>

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC-async-await