javascriptのasync/awaitがうまくいかない

Question

javascriptでasync/awaitを使って逐次処理をしたいのですが、
下記のソースだと逐次処理になりません。
どこが間違っていますでしょうか？
またどうすれば逐次処理になりますでしょうか？
よろしくお願いします。

  async function processAll() {
    await process1()
    await process2()
    await process3()
  }

  const process1 = async function() {
    await setTimeout(function() {
        console.log("process1")
    }, Math.random() * 1000);
  }

  const process2 = async function() {
    await setTimeout(function() {
        console.log("process2")
    }, Math.random() * 1000);
  }

  const process3 = async function() {
    await setTimeout(function() {
        console.log("process3")
    }, Math.random() * 1000);
  }
  
  processAll();

Comments

[m.ts10806]

ブラウザは何でしょうか。
あと、いきなりMath.random()で0にもなり得る値を突っ込むのは悪手かと思います。「絶対にかぶらないくらい大げさに大きい数値」から確かめてみてください。

[Zuishin]

https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

await できるのは Promise です。

[takao99]

いきなりMath.random()で0にもなり得る値を突っ込むのは悪手かと思います。「絶対にかぶらないくらい大げさに大きい数値」から確かめてみてください。
>そこは今本質ではありませんので。

[m.ts10806]

Math.randomで機能を殺す可能性がある実装をしておいて本質も何もないと思います。

[Zuishin]

本質は何でしょうか？
どこに問題があるかわからないなら本質がどこにあるかもわからないと思いますが。
逆に本質がわかるなら容易く解決できると思います。

await できない setTimeout を await しようとしているというのが問題の本質のように思いますが、ここを無視するということは、本質は他にあるということですね？
本質がわかるコードに書き直してください。
Math.random が本質に無関係なのであれば、定数に書き直す方がノイズが少なくなります。

[takao99]

本文にも書いてある通り逐次処理をしたいが本質です。
Math.randomは擬似的に実行のタイミングをずらすために用いています。
実行のタイミングが違うものを順番に実行するにはどうすればいいか？
これが本質になります。

https://qiita.com/_takeshi_24/items/1403727efb3fd86f0bcd
こちらを参考にしたのですが、HTTPリクエストでうまくいっているので、上記のソースでもうまくいくと思ったのですがなぜダメなのでしょうか？

[coco_bauer]

asyncは、非同期(asynchronous)ということです。非同期（同期しない）ので、実行順序が定まりませんから、逐次実行されるかどうかは判りません。
ピザ屋と寿司屋と蕎麦屋に、それぞれ電話で注文した場合を思い浮かべてください。ピザ、寿司、蕎麦、の順で届くとは限りませんよね。

[takao99]

awaitで結果が返ってるまで待機するみたいですよ。

[yambejp]

setTimeoutは終了を感知できないタイプの非同期処理ということです

[takao99]

なんでもawaitを付けたらいいわけではないのですね。勉強になりました。

[Zuishin]

await できる条件はここの二番目のコメントにあります。setTimeout が await できないことは更にもう一度書きました。

Answer 1

setTimeoutはasync処理で制御できないですからpromiseを利用します

const process1 = async ()=>{
  await new Promise(resolve=>setTimeout(()=>{
    console.log("process1");
    resolve();
  }, Math.random() * 1000));
}

Comments

[takao99]

ありがとうございます。こちらで逐次処理がうまくできました。

Answer 2

  async function processAll() {
    await process1()
    await process2()
    await process3()
  }

  const process1 = async ()=>{
    await new Promise(resolve=>setTimeout(()=>{
      console.log("process1");
      resolve();
    }, Math.random() * 1000));
  }

  const process2 = async ()=>{
    await new Promise(resolve=>setTimeout(()=>{
      console.log("process2");
      resolve();
    }, Math.random() * 1000));
  }

  const process3 = async ()=>{
    await new Promise(resolve=>setTimeout(()=>{
      console.log("process3");
      resolve();
    }, Math.random() * 1000));
  }

  processAll();