JavaScriptのPromiseとasync/awaitの記述方法に関して

Question

内容

JavaScriptのPromiseとasync/awaitでの非同期処理について勉強していて、

• async functionはPromiseを返す
• returnするとresolveしたものとする
• awaitをつけて実行すると処理を待ってresolveした値を返してくれる

といった基礎的なことはわかったのですが、以下のコードが想定通りに動かない理由がはっきりとわかりません。
まだ初学者なので根本的な勘違いもあるかもしれませんが、動かない理由を言語化していただけると助かります。

動かないコード

(async () => {
  // 1秒ごとにa,b,cを表示させたい
  await log('a');
  await log('b');
  await log('c');
})();

async function log(text) {
    setTimeout(() => {
      console.log(text);
      return;
    }, 1000);
}

// 1秒後にa,b,cが同時に表示される

動くコード

(async () => {
  await log('a');
  await log('b');
  await log('c');
})();

async function log(text) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(text);
      resolve();
    }, 1000);
  });
}

// 1秒ごとにa,b,cが順番に表示される

Answer 1

関数の前の用語 “async” は1つの単純なことを意味します: 関数は常に promise を返します。コード中に return <非 promise> がある場合、JavaScript は自動的にその値を持つ 解決された promise にラップします。

Async/await

　

このAsync Functionは次のように書いた場合と同じ意味になります。 Async Functionではreturnした値の代わりに、Promise.resolve(返り値)のように返り値をラップしたPromiseインスタンスを返します。

非同期処理:コールバック/Promise/Async Function · JavaScript Primer #jsprimer

ということですので、前者のlog関数はundefinedを返しますから、最後にreturn Promise.resolve(undefined)として即座に解決しているのと同じ結果になります。

Comments

[Maple0922]

ありがとうございます！
> return Promise.resolve(undefined)として即座に解決しているのと同じ結果になります。
このあたりはなんとなくわかっているのですが、前者のコードがsetTimeoutで1秒ごとに1つずつresolveせず、1秒後に同時にresolveしてしまうのはなぜでしょうか…？

[Lhankor_Mhy]

1秒後ではなくて即座に解決しているからです、ということなのですがわかりにくいですか？

[Lhankor_Mhy]

前者

await log('a'); // 即座に解決されるので即座に次の行へ
await log('b'); // 即座に解決されるので即座に次の行へ
await log('c'); // 即座に解決されるので即座に次の行へ

---

後者

await log('a'); // 1秒後に解決されるので1秒後に次の行へ
await log('b'); // 1秒後に解決されるので1秒後に次の行へ
await log('c'); // 1秒後に解決されるので1秒後に次の行へ

ということなのですが、これでわかりますか？

[Lhankor_Mhy]

それとももしかして、setTimeout は処理を止める効果があると勘違いしているとかですか？

[Maple0922]

setTimeoutはconsole.logに作用しているだけで、returnした時点でresolveされており、全て1秒後ではなくほぼ0秒後にresolveしている、ということですね
そしてresolveを遅らせるには明示的にPromiseを返して内部でsetTimeoutしないといけないということですね
理解の仕方としては正確ではないかもしれませんが、自分の中の疑問は解決しました！ご丁寧にありがとうございましたm(_ _)m

[Maple0922]

> それとももしかして、setTimeout は処理を止める効果があると勘違いしているとかですか？
中に書いた処理を遅らせる、という認識で、その内部でreturn(resolve)すれば遅れてくれるという考えでした

[Lhankor_Mhy]

ご解決されて何よりです。

もしかして誤解されているかな、と思った箇所があったので、念のため補足いたします。

---

> returnした時点でresolveされており、

log 関数には return文がないので、暗黙の return undefined が実行されているということです。
setTimeout のコールバックにある return は log 関数の実行後に実行されます。log 関数の return ではないです。ご存知とは思いますが、一応念のため。
https://ja.javascript.info/function-basics#ymuej8455q

Answer 2

こうする必要があります

const log=async(text)=>{
  await new Promise(resolve=>setTimeout(resolve,1000));
  console.log(text);
}

(async () => {
  await log('a');
  await log('b');
  await log('c');
})();

Comments

[Maple0922]

ありがとうございます！
このコードで動くことはわかったのですが、明示的にPromiseを返すことと前者の動かないコードの違いはどこにあるのでしょうか…？

[yambejp]

const log=(text)=>new Promise(resolve=>{
setTimeout(()=>{
console.log(text);
resolve();
},1000);
});
するとlogはpromiseを返すのでasyncと同等ですね

const log=async(text)=>{
await new Promise(resolve=>setTimeout(resolve,1000));
console.log(text);
}
にすると関数自体の戻り値がないので、処理自体にasyncが必要になります
質問者さんが「動く処理」と書いたものもasnyc宣言は不要です

(async () => {
await log('a');
await log('b');
await log('c');
})();

function log(text) {
return new Promise(resolve => {
setTimeout(() => {
console.log(text);
resolve();
}, 1000);
});
}

[Maple0922]

asyncをつけているからresolveするだけで良い、Promiseを返しているからasyncをつけなくても良い、のような認識でしょうか…？

以下の書き方は自分の理想？イメージ？に近い書き方でした！ありがとうございましたm(_ _)m

const log=async(text)=>{
await new Promise(resolve=>setTimeout(resolve,1000));
console.log(text);
}

Answer 3

動かないコード

setTimeoutは、元来Promiseと無関係に非同期処理を行う関数ですので、自分でPromiseを作るコードを書かない限り、asyncはsetTimeoutと無関係にresolveしてしまいます。

Comments

[Maple0922]

ありがとうございます！
前者と後者のコードの処理の流れの違い、前者の動かないコードがなぜ1秒後に同時にresolveされてしまうのかを教えていただきたいです…！
また、例えばsetTimeoutではなくaxiosで return axios.get();のように書いた場合、処理を待って順番に実行してくれるのでしょうか？

[maisumakun]

> 前者の動かないコードがなぜ1秒後に同時にresolveされてしまうのかを教えていただきたいです…！

awaitは即時に終了しますので（resolveは1秒を待つこともありません）、ただ単にsetTimeoutを3つ並べて書いたのとほぼ同じことになります。

> 例えばsetTimeoutではなくaxiosで return axios.get();のように書いた場合、処理を待って順番に実行してくれるのでしょうか？

はい、axiosはもとからPromiseを返しますので、async-awaitにそのまま乗せられます。

[Maple0922]

setTimeoutとは関係なく、1秒後ですらなく即座にすべてresolveされているということですね！

本来axiosと一緒に使おうと思っており、そのイメージとしてsetTimeoutを使っていたのですが、結構別物でした…
axiosで特に難しくもなく理想通りの使い方が出来そうなので問題なさそうでした！ありがとうございましたm(_ _)m