react useEffect、axiosをつかったデータの取得方法

Question

useEffectの中でaxiosを使いデータを取得したいです。
以下のように書いたのですがコンソールで見てみると
aaaとbbbどちらも表示されていました。
データが取れたいたらaaa,取れていなかったらbbbが表示されると思うのですがなぜ両方表示されているのかがわかりません。
教えて欲しいです

  useEffect(() => {
    Axios.get(
    '/users/name',
  )
  .then(result => console.log(result.date))
  .then(console.log('aaa'))
  .catch(console.log('bbb'));
});

Answer 1

なぜ両方表示されているのかがわかりません。

.thenに渡すべき引数は関数です。

単にconsole.log('aaa')のように書いてしまうと、この処理は.thenに渡す前に実行され、その結果（undefined）がthenの引数となる結果となります。

Comments

[aaayyy]

thenを渡す前とはどういうことでしょう？
自分は処理が成功したらthenの処理が呼ばれて、失敗だとcatchが呼ばれるものだと思っていたのですが、
thenには処理が成功した時に呼び出したい関数を書かないいけないといけないということでしょうか？
thenを渡す前に実行されるとありますがthenはどこに渡されるのですか？

[maisumakun]

> thenには処理が成功した時に呼び出したい関数を書かないいけないといけないということでしょうか？

そのとおりです。ただし、値を渡しても（その値で解決するpromiseを作るという意味になりますが）エラーは出さずに動作はします。

> thenを渡す前に実行されるとありますが

ありません、then「に」渡す前です。

[aaayyy]

なるほどthenのなかでconsole.log()が呼ばれていないということだったのですね！！

[aaayyy]

thenで　データがちゃんと取得できているのか確認したい時はどうしたらいいのでしょうか？
console.logが使えないのでどうしたらいいのかがわからず、教えて欲しいです

[maisumakun]

.then(val => console.log(val))のように、「console.logを実行する関数」を渡してください。

[aaayyy]

できました。ありがとうございます！