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

Question

聞きたいこと

フロントエンドエンジニアとして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>
  )

Answer 1

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

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

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

Comments

[退会済みユーザー]

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

[maisumakun]

すみません、ハンドラ内に1行しか書かれていなかったので、「返ってきた値は使わない」と早合点しての回答でした。

もっとも、ハンドラ自体をasync-awaitにせずに、フックとなるstateを動かすだけにして、実際の通信はuseEffectで行う、というような実装とすることも多いです。

[maisumakun]

JavaScriptで非同期動作を呼び出す場合、同期的な世界に戻すことはできません。async-awaitを使い続けるか、thenなどのコールバックを使うかの2つに1つです。