React Native の POST リクエストに対して Axios でクエリ パラメータを渡す方法

Axios を使用したクエリ パラメータの送信

API と対話する場合、リクエストをフィルタリングまたは変更するためにクエリ パラメータを渡す必要がある場合があります。 Axios ライブラリを使用してこれを実現する方法を見てみましょう。

React Native アプリケーションで、クエリ パラメーターを API エンドポイントに渡そうとすると 400 エラーが発生します。エラー メッセージは、クエリ パラメーターが無効であることを示しています。

問題は、Axios の post メソッドのシグネチャにあります。 PostMan や Insomnia とは異なり、クエリ パラメーターを指定するには追加の 3 番目の引数を指定する必要があります。この引数は、クエリ パラメータを表すキーと値のペアを持つオブジェクトです。

このエラーを解決するには、次のようにコードを変更します。

.post(`/mails/users/sendVerificationMail`, null, { params: {
  mail,
  firstname
}})
.then(response => response.status)
.catch(err => console.warn(err));

2 番目の引数として null を渡すことにより、 3 番目の引数にクエリ パラメータを指定すると、空の本文を送信し、指定されたクエリ パラメータをリクエスト URL に含めるよう Axios に指示します。

これにより、次の形式の POST リクエストが生成されます。

POST
http://localhost:8000/api/mails/users/sendVerificationMail?mail=[email protected]&firstname=myFirstName

これが問題を解決し、React Native アプリケーションで Axios を使用してクエリ パラメータを効果的に渡すのに役立つことを願っています。

以上がReact Native の POST リクエストに対して Axios でクエリ パラメータを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。