javascriptでPromiseをasync/awaitに書き換えるには？

Question

javascriptでPromiseをasync/awaitに書き換えるには？

javascriptの非同期処理の制御を勉強しております。

下記コードを実行すると、

const timeoutFunc = () => {
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("hello")
            resolve()
        },1000)
    })
}

const asyncFunc = async () => {
    await timeoutFunc()
    console.log("world")
}

asyncFunc()

1秒後に

hello
world

と表示されます。
awaitによって、非同期処理の完了をきちんと待っています。

このコードのtimeoutFunc関数を、asyncに書き換えようと思い、

const timeoutFunc = async () => {
    setTimeout(()=>{
        console.log("hello")
        return
    },1000)
}

や、

const timeoutFunc = () => {
    return setTimeout(async ()=>{
        console.log("hello")
        return
    },1000)
}

としてみたのですが、結果は、

world
hello

と、awaitが効かず、console.log("world")の方が先に実行されてしまいます。

async関数内でreturnすると、Promise.resolve()が返る、という認識なので、asyncに書き換えても結果は変わらないと思っていたのですが、なぜこの様な動作になるのでしょうか？

また、どの様に書けば、きちんとawaitが効く様になるのでしょうか？

ご教授、宜しくお願い致します。

Answer 1

以前どうやったら setTimeout を async, await で書き直せるか、
という趣旨で別の質問に回答させていただきました。

• JavaScriptのPromiseとAsyncについての質問 - teratail

おそらくこちらが意図に比較的に近いのかなと思い
提示させていただきます。

Comments

[gomigorou]

おお！同じ疑問を持たれたのですね！
意図した通りに動作しない理由が分かるとスッキリしますね！

[nico25]

そう言っていただけると嬉しいです笑

Answer 2

async関数内でreturnすると、Promise.resolve()が返る、という認識なので、asyncに書き換えても結果は変わらないと思っていたのですが、なぜこの様な動作になるのでしょうか？

setTimeoutは**Promiseと関わりを持たず**非同期処理を実行する関数です（返り値はnumberであって、Promiseではありません）。

そのため、「自分でPromiseを立ててそれをsetTimeoutのコールバックでresolveさせる」というような手段を講じない限り、setTimeoutのコールバックはPromiseをベースとしたasync-awaitの処理とは全く無関係に進行してしまいます。

Comments

[gomigorou]

簡潔で分かりやすい解説、ありがとうございます！
そういえば以前に、「setTimeoutの戻り値を、crearTimeoutに渡して、タイマーをクリアする」という事を試した事がありました。
それを基に今回の事を考えれば、この様な動作になるのも理解できますね！