async/awaitで作成された関数の使い方について

Question

お世話になっております。
現在Promiseについて学び直しているのですが、```async/await```で作成された非同期関数の使い方について疑問があり、ここに質問させていただきました。

まず以下のようなAPIからデータを取得するシンプルな非同期関数があるとします。
```JS
const getData = async () => {
  try {
    const { data } = await Api(); // APIからデータ取得
    return data;
} catch (e) {
  // error handling
}
```

仕事のコードを見ていると、この関数を```getData();```として実行している場合と、```await getData();```として実行している場合があります。

この非同期関数が返す値は```Promise<Data>```（```Data```は```data```の型）で、自分は```data```を取得する際は```await getData();```が正しいと考えています。
```Promise```が```resolve```した際の値を取り出すには、```await```もしくは```then(v => ~~)```などを使う必要があるという認識です。

コードを見てみると、返された値を```then```などでつないでいるわけでもなくそのまま完結しています。
```getData();```を使う意図は何でしょうか？
自分の認識が間違っているのでしょうか？

Accepted Answer

自己回答の文章読ませてもらいました。
よく理解出来ていると思います。

私もPromiseやasync/awaitの取り扱いまで理解するのに普通に数ヶ月費やしましたし
確かに複雑で面倒だなって思います。
一度覚えたら使わないのはありえないので頑張って学習していきたい所ではあります。

> `getData();`を使う意図は何でしょうか？

- async関数の直下でない場合、await構文が使えない
- もうこれ以上処理しないから自然に終了してもらっても良いと思っている
- 同時並行で2個以上の仕事をさせたいからawaitで処理をせき止めたくない

この中の一番最後、「同時並行で2個以上の仕事をさせたい」というケースに関して解説していきます。

質問文の関数の引数としてIDを受け取る関数に加工して、
それを同時平行で処理させたいものだとします。

```js
const getData = async id => {
  try {
    const { data } = await Api(id); // APIからデータ取得
    return data;
  } catch (e) {
    // error handling
  }
}

const main1 = async () => {
  const ids = [1, 2, 3, 4, 5];
  const results = [];
  for (const id of ids) {
    // この時点でawaitを使うとループの途中で待ちぼうけになる
    const data = await Api(id);
    results.push(data);
  }
}

const main2 = async () => {
  const ids = [1, 2, 3, 4, 5];
  // これでAPIを同時に5回叩いてPromiseの配列を作る
  const promises = ids.map(Api);
  // Promise.allで5個のAPI接続が全て完了するのを待ち、dataの配列を抽出する
  const results = await Promise.all(promises);
}

(async () => {
  await main1();
  await main2();
})();
```

APIを同時に5回叩く程度なら別にどうでも良いですが、
1000個の配列を展開して、一度に1000回のHTTPリクエストを発射するような事は利用規約違反になったり、
マナー違反でアクセス制限を食らう事に繋がる恐れがあります。

npmにpromise-queueというライブラリがあるので用途に応じて検討してみてくださいね。
使い方や紹介は過去に良いなと思って書いた記事があるので共有しておきます。
https://qiita.com/miyabisun/items/d1dc295867c81993bbb6

Answer

質問者さんの回答への私のコメントの件ですが、少し補足して回答欄に書いておきます。

まず最初に、質問のコードの getData メソッドですが、それは Web API にリクエストを投げてデータを取得し、それを Promise にラップして返す (async がついているのでそうなります）と理解しています。

そして、getData メソッドを使う側では、その戻り値（Web API から返ってきたデータ）を処理して表示するなどの操作を行うと想像しています。

その想像が当たっていれば、getData メソッドを使う側では、

var data = await getData();

というように await を使って待機しないと期待した結果は得られないと思います。

最初の質問にあった、

> getData();を使う意図は何でしょうか？

ですが、それで期待する結果が得られたとすると、実際の getData メソッドは質問に書いてあったものと違って、return data; の前に data を使って必要な処置を行いコードがあるのではないのですか？

async / await について自分的に分かりやすいと思った記事をご参考までに以下に紹介しておきます。まずは前者の記事を読んで、それより深く理解したい場合は後者の記事を読むのが分かりやすいと思いました。

Async/await
https://ja.javascript.info/async-await

[ES2017] Async Function
https://jsprimer.net/basic/async/#async-function

Answer

お世話になっております。
こちら混乱しており、勘違いしておりました。

```async/await```はあくまで同期的に実行するかどうかを指定するもので、実行する順番がこうでなければならない（```resolve```された際の値を後続で使用したい、後続のためにこの処理をまず終わらせないといけないなど）という希望がある場合のみ明確に指定するものかと思います。

つまり非同期的に実行しても問題ない場合には```getData();```として実行してしまっていいという認識で落ち着きました。

しかし認識の違いがある場合にはご指摘いただきたいため、こちら自己解決にせず保留しておきます。

関連した質問