非同期処理とは？

非同期処理は実行待ちの間に別の処理を実行することができる。

//www.rworks.jp/system/system-column/sys-entry/21730/#:~:text=%E9%9D%9E%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86%E3%81%A8%E3%81%AF%E3%80%81%E4%B8%80,%E3%81%AA%E8%A6%81%E7%B4%A0%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

非同期処理とは、一つのタスクを実行中であっても他のタスクを実行できる実行方式をいいます。

javascriptは非同期処理である

javascriptは非同期処理であるため、プログラムの順番通りには処理は完了しない。

//book.impress.co.jp/books/1120101055

Javascriptでは、時間のかかる処理は常に「非同期」(asynchronous)である。

非同期処理と同期処理を比較する

まずは非同期処理の例

async function sleep(t) {
    return await new Promise(r => {
        setTimeout(() => {
            r();
        }, t);
    });
}

async function myAsync() {
    await sleep(1000)
    console.log("2nd")
}
function test() {
    console.log("1st");
    const second = myAsync()
    console.log("3rd")
}
test()

出力

1st
3rd
2nd

このようにsleepで処理を待機させるため、"2nd"が出力される前に"3rd"を出力しています。

次に同期処理の例

async function sleep(t) {
    return await new Promise(r => {
        setTimeout(() => {
            r();
        }, t);
    });
}

async function myAsync() {
    await sleep(1000)
    console.log("2nd")
}
async function test() {
    console.log("1st");
    const second = await myAsync()
    console.log("3rd")
}
test()

出力

1st
2nd
3rd

awaitで"2nd"の処理が実行されるまで待機してくれる。そのため、"1st","2nd","3rd"という順に出力されるようになる。

参考サイト