async awaitについての初歩的な質問

Question

awaitとasyncの使い方についての質問です。
「awaitを使うと値がreturnされるまで処理が一時停止される」という理解で以下のコードを記述しましたが、正しく動きません。

dothis();

async function dothis(){
    console.log('1')
    console.log(await say2())
    console.log('3')
}

async function say2() {
    setTimeout(() => {
        return 2;
    }, 1000)
}

こちらを実行すると

1
undefined
3 // この後1秒待ってからプログラムが終了する。

となってしまいます。
実現したい結果は以下です。

1 // ここで1秒止まって
2
3

どうすればよいのでしょうか？

Answer 1

そやねえ。見たとこ3点ありよる。

(1) say2() を

  function say2() {
    return new Promise(resolve => {      
      setTimeout(() => {
        resolve(2)
      }, 1000)
    })
  }  

に修正

(2) dothis の呼び出しにも await を付ける。

await dothis();

(3) そして最後に、これらを含む関数も async にしとく。

➡ サンプル

Answer 2

1 . setTimeout内のreturnについて

async function say2() {
    setTimeout(() => {
        return 2;
    }, 1000)
}

この中の、() => {return 2;}は、say2とは別の関数であるため、returnで返る場所はawait say2()ではありません。(setTimeoutが戻り値を操作しないので、実質どこにも返していないです)

2 . say2の終了時点について
say2の中でsetTimeoutを使った第一引数に書かれている関数は、async/awaitを使っていない呼び出しと同じです。つまり内部の関数の終了を待ちません。
そのため、say2でawaitに該当する箇所がなく、即時に関数が終了します。
(何が言いたいかというと、仮にreturn 2が正しく返せても、出力は1,3,2になります)

1,2から、戻り値を正しい順に、適切に返す記述が必要になります。
今回はPromiseを使いますが、説明が長くなるので詳しくは一度調べてみてください。

async function say2() {
    const ret = await new Promise((resolve) =>{
    setTimeout(() => {
        resolve(2);
    }, 1000)}
    );
    return ret; // 変数に一度置いていますが、直でreturnしてもいいです
}

本来取得したい2をresolveで受け、またawaitで待機してから返すことで、期待した動きになっているのではないでしょうか。

Comments

[Avent]

回答ありがとうございます！
期待した通りの動作を行うことができました。
setTimeoutの中の関数でreturnした場合、これをどこかで受け取ることはできるのでしょうか？

[yuuyu]

Promiseを使用した場合、第一引数に渡す関数の引数である(resolve, reject)を経由することで、上記のretの箇所で受け取ることができます。
Promiseを使用しない場合は外部の変数を利用して受け取るか、コールバック関数を自作すれば受け取れます。

[Avent]

なるほど、もう少し調べてみます。
とにかく、回答していただいた方法で期待した通りの実装を行うことはできました！ありがとうございました！

[yuuyu]

余談にはなりますが、単にn秒後に実行して戻り値を受け取りたい場合、以下のサイトのようなsleep関数を作成し、それをawaitで待つコードにすると、何個も関数を呼ぶこともなくシンプルにタイムラグを作成することもできます。
https://hirooooo-lab.com/development/javascript-sleep/

[退会済みユーザー]

BA決定後に失礼します。
この回答にあるコードの say2() に出てくる async と await は無くても同じ効果が得られます。

すなわち回答にあるコードの say2() からasync と awaitを取ったものを say2x() とすると、say2x() は以下のようになります。

function say2x() {
const ret = new Promise((resolve) =>{
setTimeout(() => {
resolve(2);
}, 1000)}
);
return ret;
}

このsay2x()も期待された動作をするPromiseを返します。

回答に書かれているコードの say2() が返すのは、値2で即時resolveするPromiseですが、say2()のコードから async と awaitを無くして得られる上記のsay2x() のほうは、1秒後に値2でresolveするPromise を返します。

回答にあるsay2() のほうは、1秒後に2を返すPromiseがresolveされるまで待って、ret に値2を得てから、return ret; とすることで、2で即時解決されるPromiseを返すことになるので、冗長のように思えます。

あらためてご確認されたほうがよいと思われる点としては、関数dothis()の中で、

console.log(await say2())

という行がありますが、この中の

await say2()

は、say2() が返すPromiseが解決または拒否されるのを待つわけですが、await される関数（本質問の場合はsay2() ）の定義のほうでは、必ず async を先頭につけた
async function say2() {
…
}
というものにしなければならないというわけではない、という点です。お役に立てましたら幸いです。

[yuuyu]

簡潔に言えば、
console.log(await say2())
async function say2()
の両方でawaitしているため、後者のasync/awaitが冗長になっている、ということですね。
回答する際、dothisの方を注視していなかったために見落としていました。ご指摘ありがとうございます。

Answer 3

returnされてるのがsetTimeoutだからだと思います。

例えば下記のようにすると

async function say2() {
    console.log("call");
    setTimeout(() => {
        return 2;
    }, 1000)
}
/**
1
call
undefined
3
**/

ちゃんと通ってるのが分かります。
returnはあくまでsetTimeoutをreturnしただけで、say2()がreturnされたわけではないのでundefined（返却値がないという意味）となっています。

say2()の中でsetTimeoutを呼び出すのではなく、「１秒後に2をreturnするsay2()を呼び出す」ようにすれば良いのではないでしょうか？

Comments

[m.ts10806]

単にreturnすると厳しいかもしれないからグローバル変数とか使った方がいいかもしれない。

[Avent]

ああ、そういえばsetTimeout(() => {})の{} って関数でしたね。。。
質問し直します！回答ありがとうございました！