バックエンドと疎通する際に使用する関数全てにasync/awaitをつけないといけないのか

聞きたいこと

フロントエンドエンジニアとしてReactを用いてUIの実装をしています。
オニオンアーキテクチャを参考にして、フロントエンドの中でも

プレゼンテーション層 -> アプリケーション層(ユースケース層) -> インフラ層

のようにソースコードを分割しています。
それぞれのレイヤーで実施していることとしては、

プレゼンテーション層では、tsxファイルを用いたReactのViewやイベントハンドラの実装(アプリケーション層の呼び出し)
アプリケーション層では、Reactフック(カスタムフック)を用いたユースケースの実装(インフラ層の呼出し)
インフラ層では、バックエンド(API)との疎通をfetchメソッドを用いて実装

といった感じです。具体的には下のようなソースコードになっているのですが、どのレイヤーでもasync/awaitを関数につけないと機能しない状態となっています。

GitHubのリポジトリを見ても、イベントハンドラであるhandleClickまでasync/awaitをつけないといけないような実装を他で見たことがなく、自分の実装方法が間違っているのではないかと疑ってしまっているので、どなたかもっと効率のいい実装方法がありましたら教えていただきたいです。

インフラ層


export const createUsaer = async (name: string) => { // ここでもasync/await
  const API_URL = 'http://localhost/api/users/';
  const body = { name: name };
  const response = await fetch(API_URL, {
    method: 'POST',
    body: JSON.stringfy(body),
    headers: {
      'Content-Type': 'application/json',
    }
  })
  // responseに含まれるuser.idをidにしてアプリケーション層へ
  return await reponse.json();
};

アプリケーション層


:

export const useUser = () => {
  const addUser = async (name: string) => { // ここでもasync/await
    const response = await createOrder(name);
    return { id: response.id };
  };

  return { addUser };
};

:

プレゼンテーション層

import { useUser } from '@/usecase/useUser';


:
  const { addUser } = useUser();
  const handleClick = async () => { // ここでもasync/await
    const id = await addUser("John");
  }
:

  return (
    <button onClick={handleClick}>Click</button>
  )

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

回答1件

ベストアンサー

イベントハンドラであるhandleClickまでasync/awaitをつけないといけないような実装を他で見たことがなく、自分の実装方法が間違っているのではないかと疑ってしまっているので

handleClickは、それ自体が返り値を返すわけではありませんので、特にasync-awaitにする必要はありません。

asyncな関数を、awaitせずに呼ぶことも可能で、「Promiseを返す関数」として振る舞います。

投稿2021/01/25 14:13

maisumakun

総合スコア145184

sabx

2021/01/25 14:28

回答ありがとうございます。 handleClickをasync/awaitにしない場合、addUserからの戻り値がPromiseオブジェクトとなってしまうと思います。 Promiseがresolveした際の値を取り出して、画面で使用したいためにhandleClickにたいしてasync/awaitをつけていたのですが、Promiseから提供されているthen()メソッドを使用することによって、handleClickまでasync/awaiteにする必要はないという理解であってますでしょうか。