APIを叩く関数をうまく切り分けたい

Question

表題の通りAPIを叩く関数を切り分けたいのですが、自身の知識不足と、調べ方がわからずうまくできません。
axiosを使用しています。

const getTests = async() => {
  const res = await axios.get(`${baseURL}/hogehoge`})
  const data = res.data
  return data;
}

const Fuga = () => {
  const data = getTests();
  console.log(data)
}

現状上記の様にしています。
しかし、コンソールを見るとreturnしているdataが帰ってきて欲しいのですが、Promiseオブジェクトが帰ってきてしまいます。
この様な場合どのように記述するのが適当でしょうか？

Answer 1

しかし、コンソールを見るとreturnしているdataが帰ってきて欲しいのですが、Promiseオブジェクトが帰ってきてしまいます。

非同期処理なので、同期的な返り値として結果を返すことはできません。Promiseが返るのを前提に受け取り側の処理を書くしかありません。

Comments

[maisumakun]

async-awaitも、値を直接受け取れるように「見える」だけで、中身はPromiseの処理です。

[odennkunn]

ご回答ありがとうございます。
やはり受け取り側でどうにかするしかないのですね。
勉強になりました。

Answer 2

async が付いた関数を await を付けずに呼び出すと Promise が返ります。getTests() 呼び出し時に await を付けてください。必然的に、呼び出すコードも async 関数の中に入れることになります。

Answer 3

axiosはよくわかりませんがfugaをasync/awaitで処理すればよいのでは？

const getTests = async() => {
  const data = await fetch('sample.php?a=1&b=2').then(res=>res.json());
  return data;
}

const fuga = async () => {
  const data = await getTests();
  console.log(data)
}
fuga();