동기/비동기

동기

동기 처리란 특정 코드의 연산이 끝나고 응답이 오면 다음 동작을 처리하는 방식

비동기

비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 방식

Callback

• 다른 함수의 인자로써 이용되는 함수, 또는 어떤 이벤트에 의해 호출되는 함수
• 콜백함수로 비동기 처리 할 수 있음
• 콜백지옥 가능

console.log("Hello");
setTimeout(function () {
  console.log("Bye");
}, 3000);
console.log("Hello Again");

Promise

new 키워드와 생성자를 사용해서 만든다. 생성자는 매개변수로 executor라는 콜백 함수를 받는데 이 콜백 함수는 인자로 resolve, reject함수를 인자로 받는다.

new Promise(executor);

• 콜밸지옥을 해결하는 방법 중 하나

• ES6에서 지원

• 자바스크립트 비동기 처리에 사용되는 객체

• then() 메소드는 두 개의 콜백 함수를 인자로 받는다.

• catch() 메소드는 예외(비동기 처리 또는 then 메소드에서 발생한 에러)가 발생하면 호출된다.

• finally() 메소드는 Promise가 처리되면 상태에 상관없이 지정된 콜백 함수가 실행된다.

Async / Await

• 비동기 처리 패턴 중 가장 최근에 나온 문법
• 간결하게 표현 가능

코드 예시

// promise 연속 호출
function getData() {
    return promise1()
        .then(response => {
            return response;
        })
        .then(response2 => {
            return response2;
        })
        .catch(err => {
            //TODO: error handling
            // 에러가 어디서 발생했는지 알기 어렵다.
        });
}

// async / await 연속 호출
async function getData() {
    const response = await promise1();
    const response2 = await promise2(response);
    return response2;
}

참고: 출처