[JavaScript] 자바스크립트 비동기적 프로그래밍

개발 언어에 익숙하지만 JavaScript의 동기/비동기가 헷갈린 사람들에게

---

JavaScript는 한 번에 한 가지 일만 한다.

자바스크립트는 단일 스레드에서 동작한다. 따라서, 한 번에 한 가지 일만 할 수 있다.

 

그러나 자바스크립트는 비동기적 프로그래밍을 할 수 있다. 아래 세 가지에서 크게 사용한다.

- 네트워크 요청

- 파일 읽기/쓰기

- 의도적인 시간 지연

 

콜백(callback) ➡️ 프라미스(promise) ➡️ async/await 순으로 발전하면서 자바스크립트에서 비동기를 쉽게 사용할 수 있다.

 

콜백과 콜백 지옥

콜백

test.function1(v1, function(){
    	//function1이 끝난 후, 익명함수가 시작된다.
    });

나중에 동작할 함수, 보통 실행할 함수 뒤에 익명 함수를 쓴다.

 

 

콜백 지옥

test.function1(v1, function(){
    function2(v2, function(){
        function3(v3, function(){
            function4(v4, function(){

            });
        });
    });

기다려야 할 것이 많다면, 콜백이 중첩되어 쌓이게 된다. 이것이 콜백 지옥이다.

 

 

프라미스

프라미스 기반 비동기 함수를 호출하면, 함수는 Promise 인스턴스를 반환한다.

프라미스는 오직 resovle(성공), reject(실패)만 반환한다.

why? 프라미스는 왜 생겨난 것인가
- 콜백 지옥을 간단하게 하기 위해
- 프라미스 객체로 어디서든 전달할 수 있기 때문
 > 다른 함수에서 프라미스 객체를 가지고 처리할 수 있다.

 

프라미스 만들기

function promiseExample(){
    return new Promise(function(resolve, reject){
        //해당 함수가 끝나면 성공or실패를 반환한다.
    });
}


//실행
promiseExample()
.then(function(){
	//resolve시, 함수 실행
})
.catch(function(err){
    //reject시, 함수 실행
})

 

하지만, 프라미스도 콜백 지옥 처럼 함수가 중첩될 위험이 있다.

 

 

Async/Await

Async 함수는 내부에서 프라미스를 사용해 비동기 요청 결과를 반환한다.

> 프라미스보다 가독성이 좋아 ES8에서 새롭게 나오게 되었다.

 

Await 은 프라미스의 결과를 기다린다. async와 짝을 이뤄, 반드시 async 함수 안에서 선언된다.

 

 

async/await 예시

function asyncWork(v){
    return new Promise( (resolve, reject) => {
        setTimeout(()=>{
            console.log(v);  
        }, 1000);
    })
}

var asyncFunc = async function(){
    let res = await asyncWork(1);
    res = await asyncWork(2);
    res = await asyncWork(3);
}

결과
1
2
3

 

async/await 코드 설명

1. async 함수를 실행하게 되면, async 함수 안의 promise를 실행한다.

2. await이 있는 promise는 이행 완료가 될 때 까지, 다음 행의 코드를 실행하지 않고 대기한다.

3. promise가 resolve되면, 다음 코드를 실행한다.

-> 비동기를 순차적으로 실행

 

 

Async 함수에는 반드시 Promise를 선언해야 하는가?

아니다. Async 함수는 명시적으로 Promise를 선언하지 않아도 항상 Promise 객체를 반환한다.