비동기 처리란?

동기 처리 및 비동기 처리

동기 처리 : 정해진 순서대로 실행된다
비동기 처리 : 실행 순서는 런타임에 따라 다릅니다.
문자로 보는 것보다 실제로 보는 편이 빠르다고 생각합니다.

ex.
동기화 처리

console.log("1");
console.log("2");
console.log("3");
console.log("4");
console.log("5");

이 코드는 순서대로 실행됩니다.


비동기 처리

// それぞれランダム時間待ってからログ出力する
setTimeout(function(){console.log(1)}, Math.random()*1000);
setTimeout(function(){console.log(2)}, Math.random()*1000);
setTimeout(function(){console.log(3)}, Math.random()*1000);
setTimeout(function(){console.log(4)}, Math.random()*1000);
setTimeout(function(){console.log(5)}, Math.random()*1000);

랜덤 시간 기다렸다가 로그 출력하지만 반드시 숫자의 순서대로 출력되는 것은 아닙니다.
실제로 실행해 본 결과가 아래와 같습니다.



랜덤 초 기다려 1을 출력 → 랜덤 초 기다려 2를 출력…으로 진행되지 않는 것을 알 수 있습니까?
여기에서는 비동기라고 처리의 완결을 기다리지 않는다고만 기억해 주세요.

비동기 처리를 사용할 장소

비동기 처리의 이점은 순서에 묶이지 않는다는 것입니다.
주로 무거운 처리, 시간이 걸리는 처리에 사용됩니다.
예를 들어, http로 액세스하고 결과를 얻는 등. (액세스하고 결과를 얻을 때까지 다른 처리를 수행 할 수 있습니다)

비동기 처리를 작성하는 방법

먼저 단어를 나열합니다.

async : 비동기

promise : (처리를) 약속한다

resolve : (처리를) 해결

우선 동기 처리로 작성해 보겠습니다.

function resolveAfterHogehogeSeconds(x) {
    let i = 0;

    // 超絶重い処理
    do {
        i++;
        console.log("");
    } while (i < 10000);

    return x;
}

function waitGreet() {
    console.log(resolveAfterHogehogeSeconds("おはよう"));
    console.log(resolveAfterHogehogeSeconds("こんにちは"));
    console.log(resolveAfterHogehogeSeconds("おやすみ"));

}

waitGreet();

실행한 모습은 아래와 같습니다.

실행에 시간이 걸리는 모습을 볼 수 있다고 생각합니다.

비동기로 다시 작성해 봅시다.

function resolveAfterHogehogeSeconds(x) {
    return new Promise (resolve => {    
        let i = 0;

        // 超絶重い処理
            do {
                i++;
                console.log("");
            } while (i < 10000);

        resolve(x);
    });
}

function waitGreet() {
    resolveAfterHogehogeSeconds("おはよう").then(x => {
        console.log(x);
    });
    resolveAfterHogehogeSeconds("こんにちは").then(y => {
        console.log(y);
    });
    resolveAfterHogehogeSeconds("おやすみ").then(z => {
        console.log(z);
    });
}

waitGreet();

무거운 처리 부분이 비동기 적으로 실행되고 있음을 알 수 있습니다.
그건 그렇고, .then (다음 코드는 화살표 함수 (익명 함수의 구문 설탕)입니다.
세세하게 말하면 this에 대해서 등이 다릅니다만, 여기에서는 그렇게 생각해 두어도 괜찮습니다.

또한 async를 사용하면 더 쉽게 쓸 수 있습니다.

async function resolveAfterHogehogeSeconds(x) {
    let i = 0;

    // 超絶重い処理
    do {
        i++;
        console.log("");
    } while (i < 10000);

    return x;
}

function waitGreet() {
    resolveAfterHogehogeSeconds("おはよう").then(x => {
        console.log(x);
    });
    resolveAfterHogehogeSeconds("こんにちは").then(y => {
        console.log(y);
    });
    resolveAfterHogehogeSeconds("おやすみ").then(z => {
        console.log(z);
    });
}

waitGreet();

비동기 처리를 연속적으로 처리

비동기 처리를 연속적으로 처리하는 경우는 아래와 같이 씁니다. (거의 동기 처리)

async function resolveAfterHogehogeSeconds(x) {
    let i = 0;

    // 超絶重い処理
    do {
        i++;
        console.log("");
    } while (i < 10000);

    return x;
}

async function waitGreet() {
    console.log(await resolveAfterHogehogeSeconds("おはよう"));
    console.log(await resolveAfterHogehogeSeconds("こんにちは"));
    console.log(await resolveAfterHogehogeSeconds("おやすみ"));
}

waitGreet();

await : (처리를) 기다리십시오.
즉, resolveAfterHogehogeSeconds 실행 완료를 기다린 후 다음 처리로 진행합니다.
코드를 비교하면 알겠지만, then의 재기록입니다.
덧붙여 기다린다는 것에서 알 수 있지만, Promise에 대해서만 사용할 수 있으며,
그리고 async 함수 내부에서만 사용할 수 있습니다.

참고