[JavaScript] Chapter 18. 비동기

동기 (Synchronous)

• 자바스크립트 방식
• 한 번에 하나의 작업 수행
• 직렬

동기 동작 순서

1.  코드 실행
2.  스택에 실행할 코드 쌓임
3.  쌓인 코드 실행
4.  실행된 코드는 스택에서 제거

 

비동기 (ASynchronous)

• 요청 보내면 응답에 상관없이 다음 동작 실행
• 동기와 반대 의미
• 병렬젹
• Ajax, Fetch, setTimeout 등등

비동기 사용 방법

1.  Callback 함수
2.  Promise
3.  Async await

document.write("코드 1");

setTimeout(function(){document.write("코드 1");}, 3000); // 3초 뒤 실행

document.write("코드 3");

 

콜백함수 (callback function)

• 함수 실행 시킨 후, 이후 실행되는 함수
• 다른 함수에 파라미터로 넘겨지는 함수
• 익명 전달

function sum(num1, num2, callback) {
    var result = num1 + num2;
    callback(result);
}

sum(10, 20, function(result) {
    console.log(result);
});

콜백지옥 (callback hell)

• 콜백함수 반복

function sum(num1, num2, callback) {
    var result = num1 + num2;
    callback(result);
}

sum(10, 20, function(result) {
    sum(10, result, function(result) {
        sum(10, result, function(result) {
            console.log("end");
        }
    }
});

 

Promise

• 비동기 실행 결과를 반환하는 객체 => 성공과 실패
• ES6에서 도입
• callback hell 해결

Promise 사용 방법

• resolve, reject
  • 인수를 전달하는 실행 함수
• resolve
  • 비동기 작업 종료 시, resolve 호출하여 실행
• reject
  • 비동기 작업 중간 오류 발생 시, reject 호출하여 실행

// 일반 함수
let promise = new Promise(function(resolve, reject) {
    // 비동기 작업 로직
});

// 화살표 함수
let promise = new Promise((resolve, reject) => {
    // 비동기 작업 로직
});




// 더하기 함수 선언
function sum(num1, num2, callback) {
    return new Promise((resolve, reject) => {
        resolve(num1 + num2);
    });
}

sum(10, 20).then((result) => console.log(result));

• then()
  • 결과값과 로직 담은 것을 콜백함수로 받음
  • resolve 시 실행
• catch()
  • 예외 처리하는 로직을 콜백함수로 받음
  • 에러를 잡아줄 수 있음
  • reject 시 실행

// 더하기 함수 선언
function sum(num1, num2, callback) {
    return new Promise((resolve, reject) => {
        if (num1 == null || num2 == null)
            reject(new Error("num1 또는 num2 null 값"));
        else
            resolve(num1 + num2);
    });
}

sum(10, 20)
    .then((result) => console.log("성공 : " + result))
    .catch((error) => console.log("실패 : " + error));

Promise 상태

1.  Pedding (대기)
   • 초기 상태
2.  Fullfilled (이행)
   
   • 성공
3.  Rejected (거부)
   • 실패

 

async / await

• 비동기 처리 위해 사용
• Promise 단점 보완
• Callback hell 해결

// 일반적인 promise
function testPromise() {
    fnTest().then((data) => {
        console.log(data);
    });
}

// async await
async function testPromise() {
    const test = await fnTest();
    console.log(test);
}

async : 동기

await : 기다리다

try ~ catch : 에러 발생 시, 핸들링

function fnTest() {
    return "test~";
}

// async await
async function testPromise() {  // 1. 비동기 처리
    try {
        const test = await fnTest();  // 2. 처리 기다림
        console.log(test);            // 3. 처리 후 실행 코드
    } catch(e) {
        console.log(e);
    }
}

 

Promise와 async await 방식 비교

// 일반적인 promise
function sum(num1, num2, callback) {
    return new Promise((resolve, reject) => {
        resolve(num1 + num2);
    });
}
sum(10, 20).then((result) => console.log(result));


// async/await
const sum = async (num1, num2) {
    const promise = new Promise((resolve, reject) => {
        resolve(num1 + num2);
    });
    
    try {
        const result = await promise;
        console.log(result);
    } catch(error) {
        console.error(error);
    }
}
sum(10, 20);

	promise	awync await
구조	복잡	깔끔
에러 핸들링	catch	try ~ catch
에러 찾기	어려움	쉬움