async、awaitをなんとなく理解したが、なぜawaitを書かないとコールバックされないのかわからない

Question

タイトルの通りなのですが、例えば以下のコードを実行するとコンソールに2秒後に15が出力されます。

function sampleResolve(value) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(value * 2);
        }, 2000);
    })
}

async function sample() {
    const result = await sampleResolve(5);
    return result + 5;
}

sample().then(result => {
    console.log(result); // => 15
});

これは、sampleResolveをawaitで待っているので、sampleResolveの結果が返ってきたらresultに+5をして、と次に進んでいきます。

ここでresultのawaitを消してみると、

function sampleResolve(value) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(value * 2);
        }, 2000);
    })
}

async function sample() {
    const result = sampleResolve(5);
    return result + 5;
}

sample().then(result => {
    console.log(result); 
});

"[object Promise]5"

このように出力されました。

resultは先にpromiseを返して、後から結果を返しますよ、ということだったと思います。

しかしながら、ここで疑問に思ったのは、15が返ってきていないことです。

本来なら、promiseの後に15が返ってくるという感覚を持っていたのですが、返って来なかったので疑問に思い質問させていただきました。

Answer 1

本来なら、promiseの後に15が返ってくるという感覚を持っていたのですが

返そうとしてはいます。それを誰も受け取っていないだけです。

const result = sampleResolve(5);とすると、resultにはPromiseそのものが入ります。次の行のreturn result + 5;では、Promise自体を演算しようとして想定されない結果が返ります。

Answer 2

こんばんは。

function sampleResolve(value) {
    return new Promise(resolve => {//...

とありますので、sampleResolve(5) が Promise オブジェクトを返します。
つまり、result変数の中身は、Promise オブジェクトです。

---

ここで、

return result + 5;

とあるので、Promise（の結果ではなく）オブジェクトに5を加算しています。
つまり、sample 関数が返すのは、 「Promise オブジェクトではなく文字列」（をラップした Promise.resolve() ）です。

sampleResolve(5) が返してきた Promise は、返されません。関数の中に置いてきてしまいます。

---

なので、

sample().then(//...

は、解決された Promise ですので、「sample 関数のなかに置いてきた Promise 」の結果を待つことなく、「Promise オブジェクトではなく文字列」が then に渡されることになります。

Comments

[kobaryo04ysh]

ありがとうございます。

そもそも、awaitとthenを混在させていたから、混乱していたのかもしれないと思い、

```JavaScript
sample().then
```

の部分を消し、

```JavaScript
const result = await sampleResolve(5);
// return result + 5;
console.log(result + 5)
```

このようにすることで、自分の中で納得しました。

説明いただいたように、質問文のコードにあるawaitを消した状態で実行してもresultに格納されているのはとりあえずpromiseオブジェクトであって、thenでresultを出力しても、そもそもsample()で返してるのがpromiseなので、それを表示して終わる、と言ったところでしょうか。なので、sampleResolve(5)がコールバックすることなく(つまり同期的に)promiseが出力されなかった。という認識で大丈夫ですかね？

[Lhankor_Mhy]

>そもそもsample()で返してるのがpromiseなので

async 関数が返すのは、なんであれ解決済みPromiseです。
ですので、sample()で返してるのは「文字列を値とする解決済みPromise」です。
sample()で、「Promiseを値とする解決済みPromiseを」を返せば、想定の動作になるかと思います。

---

ですので、await をつけた時と同等のことをしたいなら、こうですね。

// return result + 5;
return result.then( x => x + 5 );

[kobaryo04ysh]

ありがとうございます！！