Help us understand the problem. What is going on with this article?

ラーメンで理解するasync/await

JavaScript 2 Advent Calendar 2019 の19日目の記事です。

(19/12/23 10:41追記)
Promise.allについて最後に追記しました。

対象

  • async/awaitがなんだかはある程度知ってる人
  • async/awaitをなんとなくで使ってる人

そもそもasync/awaitって?

async/awaitは、Promiseによる非同期処理をより簡潔に効率よく記述できる手法。
普通にPromiseを使うとネストが深くて辛くなるのを救ってくれる。
「async/await Promise」で検索すれば比較についてはたくさん出るので今回は書かない。

便利だから全部async/awaitにしちゃおう!

って思うんですけど、実は罠があって。
ちゃんと気をつけないと非効率な感じになっちゃうよっていうのが今回のお話。
ただ、コードを並べて説明してもよくわからない気がしたので、みんな大好きラーメンで例えてみようと思います。

image.png

ラーメンを作ろう!

突然ですが、あなたはラーメン屋店主です。
あなたのラーメン屋には腕のいい三人の店員がいます。

それぞれ、

  • 麺担当
  • スープ担当
  • 具担当

とします。

(なんかどっかで見た)

ラーメンを作るためには、

  1. 麺担当に麺をゆでてもらう
  2. スープ担当にスープを作ってもらう
  3. 具担当にチャーシューを切ってもらう
  4. 1~3までが出来たらそれらを組み合わせてあなたがラーメンを完成させる

という工程が必要になります。

APIを準備しよう!

こんなAPIが用意されているとしましょう。

エンドポイント メソッド 概要
/noodle GET 麺を作成し取得する
/soup GET スープを作成し取得する
/pork GET 具を作成し取得する
/ramen POST ラーメンを作る

実装してみよう!

なんのこっちゃない、かんたんかんたん

async () => {

  // 麺担当に麺をゆでてもらう
  const noodles = await axios.get('/noodle');

  // スープ担当にスープを作ってもらう
  const soup = await axios.get('/soup');

  // 具担当にチャーシューを切ってもらう
  const pork = await axios.get('/pork');

  // ラーメンを完成させる。
  const ramen = await axios.post('/ramen', {
    noodles,
    soup,
    pork
  });

  // 提供
  return ramen;
}

ちょちょいのちょい!
すっきりしてて良さそうですが、これはNGです。

awaitの罠

awaitは、指定した関数のPromiseの結果が返されるまで、async function内の処理を一時停止します。
つまりどういうことかというと、

await axios.get('/noodle');

の結果が帰ってくるまで処理を待ってしまいます。
その間 /soup /pork へのリクエストはされません。

つまり、
麺を茹で上がるのを待って、スープを作り始め
スープが出来上がるのを待って、チャーシューを切り始める
などといったものすごく非効率なことになってしまうのです!

そんなことしてたら出来上がる頃には麺がのびのびになってしまう...

一人ずつ作業が終わるのを待つのではなく、三人店員がいるんだから同時に指示をしたいですよね?

どうすればいいの?

awaitをするタイミングをずらします。

async () => {

  // 麺担当に麺をゆでてもらう
  const noodlesPromise = axios.get('/noodle');

  // スープ担当にスープを作ってもらう
  const soupPromise = axios.get('/soup');

  // 具担当にチャーシューを切ってもらう
  const porkPromise = axios.get('/pork');

  // 全員が出来上がるのを待つ
  const noodles = await noodlesPromise;
  const soup = await soupPromise;
  const pork = await porkPromise;

  // ラーメンを完成させる。
  const ramen = await axios.post('/ramen', {
    noodles,
    soup,
    pork
  });

  // 提供
  return ramen;
}

awaitはPromiseを返す処理とセットにしがちですが、別にバラバラに書いても良いのです。

これを行うことで、
麺担当・スープ担当・具担当に同時に調理指示をする。
その後全員が調理終了し、完成したらそれらを使ってラーメンを完成させる。
ということが実現できるわけです。

image.png

完成!やったね!

まとめ

ラーメンでふわふわっとした感じになっちゃいましたが、伝えたかったことは
待つ必要がある場合は待つ、待つ必要がない場合は待たない
ということをちゃんと意識して書くと良さそうっていうあれです。

最後に

書いててラーメン食べたくなってしまったのでラーメン食べに行ってきます。

(追記)Promise.allについて

すごく記事の反響が大きくてびっくりしています。またありがとうございます。
ここのコメントでもTwitterでもPromise.allのほうが良いんじゃないの?という意見を頂いているので、そこについてです。

結論から言うとPromise.allで書くこともできます。また、状況によってはそちらのほうがベターだと思います。

たとえば今回の場合では、

async () => {
  const [noodles, soup, pork] = await Promise.all(['/noodles','/soup','/pork'].map(axios.get));

  const ramen = await axios.post('/ramen', {
    noodles,
    soup,
    pork
  });

  // 提供
  return ramen;
}

とか書けたりすると思います。

ただ、この記事の意図としては「Promiseの受け取りとawaitのタイミングをずらすことができる」だったのと、なるべくシンプルな記事にしたかったので書くか迷ったのですが、省かせてもらっていました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした