async/awaitを用いたデータ取得ができない

Question

await関数でPromiseがresolveされてreturnの内容がtodoに入るはずですが、Promiseが渡ってきます
どこでエラーが起きているのでしょうか？

実現したいこと

consoe.log(todo)にthen内のreturn内容を設定する

発生している問題・エラーメッセージ

consoe.log(todo)の結果がPromise

該当のソースコード

import axios from "axios";

const getTodo = async () => {
await axios
.get("https://jsonplaceholder.typicode.com/todos/1")
.then((res) => {
return res.data.title;
})
.catch((err) => {
console.log("error");
});
};

const todo = getTodo();
console.log(todo);

Answer 1

理由は他の方が書かれているので、普通の関数っぽい書き方にしてみました。

import axios from "axios";

async function getTodo() {  // async関数は必ずPromiseを返す
    try {
        const res = await axios.get("https://jsonplaceholder.typicode.com/todos/1");
        return res.data.title;  // Promise.thenに代わってawaitで戻り値を受け取れる
    } catch (err) {
        return "error";
    }
}

async function main() {
    const todo = await getTodo();  // getTodo()はPromise、awaitでPromiseから戻り値を受け取る
    console.log(todo);
}

main();

Comments

[yuki96]

ありがとうございますm(_ _)m
とても悩んでいたのですが、コメントで捕捉説明いただいたおかげで理解できました！！

Answer 2

こうするとよいでしょう。

const getTodo = () => 
  axios.get("https://jsonplaceholder.typicode.com/todos/1")
    .then((res) => {
      return res.data
    })
    .catch((err) => {
      console.log("error");
    });
  

(async () => {  
  const todo = await getTodo();
  console.log(todo);
})();

👉 https://codepen.io/su507/pen/QWrxwxL?editors=0012

追記

質問にあるコードの中に

import axios from "axios";

とあるのでこのコードはESモジュールの環境下にあるものと思います。だとすると上記の回答で

(async () => {  
  const todo = await getTodo();
  console.log(todo);
})();

と書いている4行は、 (async () => { ・・・ })();(即時実行async関数式)　にする必要はなく、関数式の中で行っている二行だけを書いて

const todo = await getTodo();
console.log(todo);

としても実行できると思われます。
※先に挙げた codepen のサンプルは （ESモジュールではないので）即時実行async関数式にしておかないとエラーになります。

Comments

[yuki96]

ご回答ありがとうございます！行き詰まっていたので皆さんの回答が大変参考になりましたm(_ _)m
ESモジュールに関しては勉強不足で知らなかったので（お恥ずかしながら・・）調べてみます！

Answer 3

await関数でPromiseがresolveされてreturnの内容がtodoに入るはずですが

そうはなっていません。async関数は、外から見ればPromiseを返す関数として振る舞います。

どこでエラーが起きているのでしょうか？

エラーではありません。書いたとおりにコードが動いているだけです。

Comments

[maisumakun]

> consoe.log(todo)にthen内のreturn内容を設定する

トップレベルにawaitを書ける環境でない場合、thenでコールバックを取ってそこからconsole.logを行うことになります。

[yuki96]

基礎的な観点を逃していました。。ご指摘ありがとうございます！
すぐに回答いただき、とても助かりました