[Rust] axumで処理したデータを、うまくフロント側に返せない

Question

実現したいこと

Rustで自作アプリを作っています。
サーバーサイド言語とフロント(JavaScript)を別々にして作っていて、フロント側でfetchを利用してPOST通信をしていますが、axumで処理したデータを、うまくフロント側に返せず、解決方法がわからない状態です。

簡単なログイン処理を作っていて、フロント側のfetch関数でバックエンド側に値を渡し、ログインチェック後にステータスコードとJSON形式のデータをフロントに返して、その先の処理を制御させるようなものを作ろうとしていますが、JSON形式のデータの取得がうまくいきません。
（別の個所で、「 axum::Json<serde_json::Value>」の返り値でベクタやHashMapを返す処理はうまくいっているので、自分が設定した返り値が誤っているような気がします。）

解消方法をご存じの方いたらよろしくお願いしまします。

発生している問題・分からないこと

先述した通り、axumで処理したデータを、うまくフロント側に返せず、解決方法がわからない状態です。
Rust側では処理が正常に終わっているようなのですが、フロント側でうまくバックエンド側のデータが取得できていないように見受けられます。

※補足に追記しました。
fetchにthenを使うとバックエンド側のデータが取得できているような挙動が見受けられました。

フロント側の挙動

バックエンド側でログイン成功ルートに入って処理完了後、なぜかフロント側で200系以外としてみられる

そのあと例外が発生する。

該当のソースコード

//レスポンスデータ生成箇所以外はイメージです
//返却時には、「(StatusCode::OK, Json(response)).into_response()」とステータスとメッセージのような形で返却しています。
//返却の型には「impl IntoResponse」も試したりもしました。
#[derive(Deserialize)]
struct LoginRequest {
    username: String,
    password: String,
}

  #[derive(Serialize)]
  pub struct LoginResponse {
    message: String,
}

// ログイン処理を行うハンドラ
async fn login_handler(Json(payload): Json<LoginRequest>) -> Response {
    let LoginRequest { username, password } = payload;

    // 簡単なログイン処理（ここではユーザー名とパスワードのチェック）
    if username == "admin" && password == "password123" {

        // ログイン成功時
        let response = LoginResponse {
            message: "ログイン成功".to_string(),
        };
        (StatusCode::OK, Json(response)).into_response()

    } else {

        // ログイン失敗時
        let response = LoginResponse {
            message: "ログイン失敗".to_string(),
        };
        (StatusCode::UNAUTHORIZED, Json(response)).into_response()
    }
}

//Rust側でログイン成功ルートに入っても200系以外としてみられる
//メッセージを取得しようとして例外が発生する。

export function fetchAuth(form) {

  try {
    const response   =  fetch(`http://localhost:3000/aaa`, {
      cache: 'no-store',
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(form)
    })

    // レスポンスが成功（200系）かどうかをチェック
    if (!response.ok) {                                  //なぜかRust側でログイン成功ルートに入ってもこちらに入る
      const errorData = response.json();                    //ここからメッセージを取得しようとして失敗してcatch に入る
      console.error('Error:', errorData.message);
      // エラーの場合の処理
      return Promise.reject(new Error(errorData.message));
    }

    const data = response.json();
    console.log('Success:', data.message);
    // 成功の場合の処理
    return Promise.resolve(data.message);
  } catch (error) {                                         //"error"の内容は「message = 'response.json is not a function'」
    console.error('Network error:', error);
    // ネットワークエラーなどのハンドリング
    return Promise.reject(new Error('Network error occurred'));
  }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

先述した通り、いろいろ試行錯誤しても、フロント側でうまくバックエンド側のデータが取得できていないように見受けられる事象が発生している。

補足

追記
fetch後の処理にthenを使ってみてバックエンド実行後の"data"を確認してみると、なぜかはわかりませんが、このやり方ではステータスの取得ができてました。

そのあと例外が発生しました。

10/3 16:25頃追記
ソースを修正して再度試しましたがうまくいかず。
（then、catchいずれの中にも入らず、ただバックエンドの処理が終わりそのあとは何もしていないように見見受けられました。※URLをloginに変えました。バックエンドのurlも修正済み）

Answer 1

fetch()はPromise<Response>を返すからですね。
awaitまたはthenを使用して、Promiseの中身を取り出してから成功/失敗の判定をすると良いかと思います。

awaitの例:

export async function fetchAuth(form) { // async functionに変更する必要があります
  try {
    const response  = await fetch(`http://localhost:3000/aaa`, {
      cache: 'no-store',
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(form)
    })

    if (!response.ok) {
      ...
    }

    const data = await response.json(); // ここもPromiseを返すためawaitする
    console.log(data.message);
  ...

thenの例:

export function fetchAuth(form) {
  fetch(`http://localhost:3000/aaa`, {
    cache: "no-store",
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(form),
  })
    .then((response) => response.json()) // 同様にPromiseを返すためthenする
    .then((data) => {
      console.log(data.message);
      ...
    })
  ...

---

10/3 16:25頃追記 への追加回答:

function fetchAuth(form) {
  return fetch(`http://localhost:3000/login`, {
    cache: "no-store",
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(form),
  })
    .then((response) => response.json())
    .then((data) => {
      console.log(data.message);
      return data.message;
    })
    .catch((e) => {
      console.error('Network error:', error);
      throw new Error('Network error occurred');
    })
}

// 呼び出し側 ---------------
fetchAuth(form)
  .then((message) => {
    console.log(message);
  })
  .catch((e) => {
  })

Comments

[shoco]

返信ありがとうございます。
ソースのサンプルもありがとうございます。
参考にして修正しました（捕捉に追記しました。）がうまくいきませんでした。
then、catchいずれの中にも入らず、ただバックエンドの処理が終わりそのあとは何もしていないように見見受けられました。
（フロント、バックエンドのブレークポイントを全削除して写真内のようにreturn時の値内を確認してもみましたが、初期化時と変わっていませんでした。）

[n23]

補足を拝見したところでは、非同期処理が終わるよりも前 (サーバから値が返ってくるよりも前) にreturn fetchResultに到達しています。なので値を確認した際に初期化時と同じなのは正しい挙動です。
全体のコードを回答に追記しておきました。
fetchを使用しているfetchAuth()は非同期処理にならざるを得ないので、(返却された値を使用するためには) 呼び出し側でもやはりawaitまたはthenする必要があります。