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

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

まず以下のようなAPIからデータを取得するシンプルな非同期関数があるとします。

JS
1const getData = async () => {
2  try {
3    const { data } = await Api(); // APIからデータ取得
4    return data;
5} catch (e) {
6  // error handling
7}

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

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

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

行動規範の内容に同意します

回答3件

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

まず最初に、質問のコードの 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

投稿2022/12/27 02:17

編集2022/12/27 03:34

退会済みユーザー

総合スコア0

takabee

2022/12/27 03:52 編集

ご回答いただきありがとうございます。 > 実際の getData メソッドは質問に書いてあったものと違って、return data; の前に data を使って必要な処置を行いコードがあるのではないのですか？はい、実際はもっと長い処理が続いています。またご回答いただいた通り、自分もその認識で落ち着くことができました。さらに理解するために、時間があるときに参考記事を拝見させていただきます。

行動規範の内容に同意します

ベストアンサー

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

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

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

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

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

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

js
1const getData = async id => {
2  try {
3    const { data } = await Api(id); // APIからデータ取得
4    return data;
5  } catch (e) {
6    // error handling
7  }
8}
9
10const main1 = async () => {
11  const ids = [1, 2, 3, 4, 5];
12  const results = [];
13  for (const id of ids) {
14    // この時点でawaitを使うとループの途中で待ちぼうけになる
15    const data = await Api(id);
16    results.push(data);
17  }
18}
19
20const main2 = async () => {
21  const ids = [1, 2, 3, 4, 5];
22  // これでAPIを同時に5回叩いてPromiseの配列を作る
23  const promises = ids.map(Api);
24  // Promise.allで5個のAPI接続が全て完了するのを待ち、dataの配列を抽出する
25  const results = await Promise.all(promises);
26}
27
28(async () => {
29  await main1();
30  await main2();
31})();