質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.36%
Rust

Rustは、MoFoが支援するプログラミング言語。高速性を維持しつつも、メモリ管理を安全に行うことが可能な言語です。同じコンパイル言語であるC言語やC++では困難だったマルチスレッドを実装しやすく、並行性という点においても優れています。

axum

axumとは、Rust製のWebアプリケーション向けのフレームワーク。非同期リクエスト処理に特化しており、非常に高速です。高い保守性を持ち、エラーハンドリングを容易に行うことができます。

Q&A

1回答

223閲覧

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

donut4

総合スコア170

Rust

Rustは、MoFoが支援するプログラミング言語。高速性を維持しつつも、メモリ管理を安全に行うことが可能な言語です。同じコンパイル言語であるC言語やC++では困難だったマルチスレッドを実装しやすく、並行性という点においても優れています。

axum

axumとは、Rust製のWebアプリケーション向けのフレームワーク。非同期リクエスト処理に特化しており、非常に高速です。高い保守性を持ち、エラーハンドリングを容易に行うことができます。

0グッド

0クリップ

投稿2024/10/02 05:55

編集2024/10/03 07:31

実現したいこと

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

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

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

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

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

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

フロント側の挙動

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

そのあと例外が発生する。
イメージ説明

該当のソースコード

login.rs

fetchAuth.js

1//Rust側でログイン成功ルートに入っても200系以外としてみられる 2//メッセージを取得しようとして例外が発生する。 3 4export function fetchAuth(form) { 5 6 try { 7 const response = fetch(`http://localhost:3000/aaa`, { 8 cache: 'no-store', 9 method: 'POST', 10 headers: {'Content-Type': 'application/json'}, 11 body: JSON.stringify(form) 12 }) 13 14 // レスポンスが成功(200系)かどうかをチェック 15 if (!response.ok) { //なぜかRust側でログイン成功ルートに入ってもこちらに入る 16 const errorData = response.json(); //ここからメッセージを取得しようとして失敗してcatch に入る 17 console.error('Error:', errorData.message); 18 // エラーの場合の処理 19 return Promise.reject(new Error(errorData.message)); 20 } 21 22 const data = response.json(); 23 console.log('Success:', data.message); 24 // 成功の場合の処理 25 return Promise.resolve(data.message); 26 } catch (error) { //"error"の内容は「message = 'response.json is not a function'」 27 console.error('Network error:', error); 28 // ネットワークエラーなどのハンドリング 29 return Promise.reject(new Error('Network error occurred')); 30 } 31}

試したこと・調べたこと

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

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

補足

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

そのあと例外が発生しました。
イメージ説明

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

awaitの例:

js

1export async function fetchAuth(form) { // async functionに変更する必要があります 2 try { 3 const response = await fetch(`http://localhost:3000/aaa`, { 4 cache: 'no-store', 5 method: 'POST', 6 headers: {'Content-Type': 'application/json'}, 7 body: JSON.stringify(form) 8 }) 9 10 if (!response.ok) { 11 ... 12 } 13 14 const data = await response.json(); // ここもPromiseを返すためawaitする 15 console.log(data.message); 16 ...

thenの例:

js

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

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

js

1function fetchAuth(form) { 2 return fetch(`http://localhost:3000/login`, { 3 cache: "no-store", 4 method: "POST", 5 headers: { "Content-Type": "application/json" }, 6 body: JSON.stringify(form), 7 }) 8 .then((response) => response.json()) 9 .then((data) => { 10 console.log(data.message); 11 return data.message; 12 }) 13 .catch((e) => { 14 console.error('Network error:', error); 15 throw new Error('Network error occurred'); 16 }) 17} 18 19// 呼び出し側 --------------- 20fetchAuth(form) 21 .then((message) => { 22 console.log(message); 23 }) 24 .catch((e) => { 25 })

投稿2024/10/02 16:24

編集2024/10/03 08:23
n23

総合スコア22

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

donut4

2024/10/03 07:24

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

2024/10/03 08:28 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問