Async Function #JavaScript

Async Functionとして定義した関数は必ずPromiseインスタンスを返します。
なのでAsync Functionは"Promiseインスタンスを返す関数"を定義する構文でなければなりません。

Async Functionの構文

関数の前にasyncを付けることで、Async Functionであることを宣言します。

async function asyncFunc() {
    return 10
}

Async Functionが返すPromiseインスタンスの状態

Promise以外の値をreturnした場合

async function asyncFunc() {
    return 10
}

asyncFunc().then((value) => {
    console.log(value) //10
})

上記ではただの値をreturnしてますが、この場合返り値に10を持つFulfilledなPromiseを返します。
これは、返した値がPromise.resolveでラップされているような感じです。

Promiseをreturnした場合

async function asyncFunc() {
    return Promise.resolve(10)
}

asyncFunc().then((value) => {
    console.log(value) //10
})

これはそのままPromiseを返します。

Async Function内で例外が発生した場合

async function asyncFunc() {
    throw new Error('ERROR')
}

asyncFunc().catch((err) => {
    console.log(err.message)
})

Async Function内で例外が発生した場合は、そのエラーをもつRejectedなPromiseを返します。

await

awaitは指定したPromiseインスタンスの状態が変わる（FulfilledまたはRejectedになる）まで、非同期処理の完了を待ちます。
Promiseインスタンスの状態が変わって初めて次の行の処理を進めることができます。
awaitはAsync Function内でのみ利用することができます。

たとえば、
処理に数秒かかる非同期処理の後にログを出したいとすれば、以下のようになります。

const sleep = (second) => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(console.log('sleep')
            )
        },second * 1000)
    })
}

(async () => {
    await sleep(3)
    console.log('sleep後に実行される');
})()

実行結果

sleep
sleep後に実行される

ちゃんと処理を待ってからメッセージが出力されたのが確認できます。

いろいろありましたがとりあえず覚えとくのは

Async FunctionはPromiseインスタンスを返す！！
awaitはAsync Function内でのみ使える！！