[JavaScript] 16. 자바스크립트 비동기

자바스크립트는 단일 스레드 언어입니다.

✓  스레드는 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스입니다. 각 스레드는 한 번에 하나의 작업만 수행할 수 있습니다. 

 

# 동기와 비동기

동기적 방식(Synchronous)은 하나의 이벤트가 모두 끝난 후에 다음 이벤트를 수행하는 방법입니다. 실행 순서가 확실히 존재해요!

반대로 비동기적 방식(Asynchronous)은 여러 개의 이벤트를 담은 후에 완료되는 이벤트 순으로 일을 처리하는 방법입니다.

 

자바스크립트에서는 아래와 같이 3가지 방법을 사용하여 비동기 처리를 할 수 있습니다.

• 콜백 함수
• Promise
• async 와 await

# 콜백 함수

먼저 함수의 반환 값을 받습니다. 그리고 다음 비동기 처리를 해야 하는 다음 함수를 콜백으로 받아 비동기 처리를 할 수 있습니다.

하지만 콜백 함수를 사용하여 비동기 처리를 콜백 지옥문제가 발생하고, 코드의 가독성이 떨어지는 문제가 있습니다.

callbackFunc01(function(result01) {
    callbackFunc02(result01, function(result02) {
        callbackFunc03(result02, function(result03) {
            callbackFunc04(result03, function(result04) {
                callbackFunc05(result04, function(result05) {
                    console.log('result: ' + result05);
                }, failureCallback);
            }, failureCallback);
        }, failureCallback);
    }, failureCallback);
}, failureCallback);

 

위와 같은 문제는 Promise와 async await을 사용하면 해결할 수 있습니다.

 

# Promise

Promise는 자바스크립트에서 비동기 처리할 때 사용되는 객체로, 비동기 연산이 종료된 후 성공 또는 실패에 대한 결과값을 받을 수 있습니다. Promise 객체는 아래와 같이 new 키워드를 사용하여 생성할 수 있어요!

 

Promise는 콜백 함수를 인자로 받는데, 인자로 들어온 함수는 resolve 와 reject 두가지를 다시 인자로 받습니다.

resolve에 대한 결과값은 then()을 사용하여 받을 수 있고, reject는 catch()를 통해 에러를 핸들링할 수 있습니다.

const dataset = {
    type : "String",
    text : "Hello world!",
    status : "SUCCESS!"
};

const getData = (data) => {
    return new Promise((resolve, reject) => {
        if(data){
            resolve(data);
        }

        reject(new Error("ERROR!"));
    });
};

getData(dataset)
    .then(data => console.log(data.status)) // SUCCESS!
    .catch(error => console.log(error)); // ERROR!

 

Promise에는 아래와 같이 3가지의 상태를 있습니다.

• 대기(pending): 비동기 처리 로직이 완료되지 않은 상태
• 이행(fulfilled): 연산이 성공적으로 완료된 상태 => resolve()를 실행할 때 
• 거부(rejected): 연산이 실패하거나 오류가 발생한 상태 => reject()를 호출할 때

또한, Promise를 여러개 연결하여 사용할 수 있는데, 이를 Promise Chainning이라고 합니다.

new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("송우든");
    }, 3000);
})
    .then(function(result) {
        const age = result === "송우든"? 24 :  -999;
        return age;
    })
    .then(function(result) {
        const isManager = result === 24? true : false;
        return isManager;
    })
    .then(function(result) {
        console.log(`manger : ${result}`); // true
    });

 

# async 와 await

async 와 await은 자바스크립트에서 가장 최근에 나온 비동기 처리 방식입니다.

앞에서 소개한 두가지 방법을 보완해서 나온 방법으로 여러 개의 비동기 처리 시 유용합니다. 기본 형식은 아래와 같습니다.

async function func() {
  await getData();
}

const func = async () => {
  await getData();
};

await식은 async함수의 실행을 일시 중지하고 전달된Promise의 처리가 완료되기를 기다린 후 async함수의 실행을 다시 시작합니다.

이후, 완료된 값을 반환해줍니다. async함수는 항상 Promise 객체를 반환한다는 점을 주의해야 합니다.!

만약 async 함수의 반환값이 명시적으로 Promise가 아니라면 암묵적으로 Promise로 감싸 집니다. 

 

async 와 await은 try-catch문을 사용하여 예외처리를 할 수 있습니다.