Axios put リクエストの深い理解: 使用上のヒントとベスト プラクティス

フロントエンド開発では、多くの場合、バックエンド サーバーと対話する必要があります。このうち、PUT リクエストは、データを更新または変更するリクエストをサーバーに送信するためによく使用されるメソッドです。PUT リクエストを送信することで、サーバー上のリソースのステータスを更新できます。

Axios は、ブラウザーおよびNode.jsでHTTP リクエスト を作成する ための人気のある JavaScript ライブラリです。 シンプルで使いやすい API が提供されているため、PUT リクエストの送信が非常に便利です。この記事では、Axios の PUT リクエストの使用方法を検討し、パラメーターを記述するさまざまな方法を紹介します。

Axios PUTリクエストの使い方

Axios を使用するための前提条件は、Axios がプロジェクトにインストールされていることです。まだインストールしていない場合は、次のコマンドを使用してインストールできます。

npm install axios 或 yarn add axios

次に、コードに Axios を導入して使用し、PUT リクエストを行うことができます。

まず、  JavaScript ファイルに、以下を使用して Axios を含めます。

import axios from 'axios';

次に、Axios メソッドを通じて PUT リクエストを送信できます put 。基本的な使い方は次のとおりです。

axios.put(url, data, config) .then(response => { // 请求成功后的处理 }) .catch(error => { // 请求失败后的处理 });

• url: PUT リクエストの送信先となるサーバー側のアドレス。
• data: 送信されるデータ (通常は JavaScript オブジェクト) は、  JSON 形式に変換されてサーバーに送信されます。
• config: リクエストヘッダーなどのリクエスト構成を設定するために使用されるオプションのパラメータ。

パラメータを渡すために一般的に使用される記述方法

次に、パラメーターを渡す一般的な方法をいくつか紹介します。

1. URL でパラメータを渡します

パラメータは URL に直接接続できます。これはパラメータを渡す最も一般的な方法です。

const userId = 123; const newData = { name: 'John Doe', age: 30 }; axios.put(`/api/users/${userId}`, newData) .then(response => { // 请求成功后的处理 }) .catch(error => { // 请求失败后的处理 });

上記の例では、  userId URL の末尾で直接結合し、 newData リクエスト本文としてサーバーに送信します。

2. URLパラメータを使用する

params URL パラメータは、Axios によって提供されるパラメータを使用して 渡すことができます。

const userId = 123; const newName = 'John Doe'; axios.put('/api/users', null, { params: { id: userId, name: newName } }) .then(response => { // 请求成功后的处理 }) .catch(error => { // 请求失败后的处理 });

上の例では、パラメータを object として渡し params、Axios はそれを URL の後ろに連結します。

3. リクエストボディを使用してパラメータを渡します

上記の 2 つのメソッドに加えて、データをリクエスト本文として渡すこともできます。

const userData = { id: 123, name: 'John Doe', age: 30 }; axios.put('/api/users', userData) .then(response => { // 请求成功后的处理 }) .catch(error => { // 请求失败后的处理 });

このようにして、パラメーター オブジェクトを userData 2 番目のパラメーターとして put メソッドに直接渡します。

実践事例

ここで、実際のケースを通して Axios の PUT リクエストの使用方法を詳しく学びましょう。

1.jsonサーバーをインストールする

まず、npm または Yarn を使用してプロジェクト ディレクトリに json-server をインストールする必要があります。

npm install -g json-server

次に、プロジェクト ディレクトリに JSON ファイルを作成して、データをシミュレートします。シミュレートするデータがユーザー データであると仮定すると、 users.json という名前のファイルを作成し、その中にユーザー データを定義できます。users.json ファイルの内容の例:

{ "users": [ { "id": 1, "name": "Alice", "age": 25 }, { "id": 2, "name": "Bob", "age": 30 } ] }

最後に、ターミナルで次のコマンドを実行して json サーバーを起動し、シミュレーション データ ファイルを指定します。

json-server --watch users.json --port 3000

users.json これにより、図に示すように、シミュレーション サーバーが起動され、ファイル内のデータをシミュレートされたリソースとして使用して、ポート 3000 でリッスンされます 。

2.Putリクエストを送信する

上記の json-server によって提供されるルートは次のとおりです。

• PUT  http://localhost:3000/users/:userId まず、IDE エディターで新しい JavaScript ファイル (例: putUser.js) を作成し、次のコードを貼り付け、 node putUser.jsコマンドを使用してコンソールで実行します。

const axios = require('axios'); const userId = 2; // 要修改的用户 id const updatedData = { name: 'Updated Name', age: 35 }; axios.put(`http://localhost:3000/users/${userId}`, updatedData) .then(response => { console.log('User updated:', response.data); }) .catch(error => { console.error('Error updating user:', error); });

注: エラーが報告された場合は、それがインストールされていることを確認してください axios。インストール コマンドは次のとおりです。npm install axios

http://localhost:3000/users/:id このスクリプトは、Axios を使用して、ID 2 から のユーザー情報を更新するアドレス に PUT リクエストを送信します { name: 'Updated Name', age: 35 }。

Apifoxを使用した  バックエンド インターフェイスのデバッグ

Apifox = Postman + Swagger + Mock + JMeter、Apifox は http(s)、WebSocket、Socket、gRPC、 Dubboおよびその他のプロトコルのデバッグ インターフェイスをサポートし、 IDEA プラグインを統合します。バックエンド担当者がサービス インターフェイスの作成を完了すると、Apifox を使用してテスト段階でインターフェイスの正確性を検証でき、グラフィカル インターフェイスによりプロジェクトの立ち上げが大幅に効率化されます。

この記事の例では、Apifox を通じてインターフェイスをテストできます。新しいプロジェクトを作成した後、プロジェクトで 「デバッグ モード」を選択 し、リクエスト アドレスを入力し、すぐにリクエストを送信してレスポンス結果を取得します。上記の実際的なケースを図に示します。

ヒント、コツ、および考慮事項 (続き)

• 適切なパラメータ渡しメソッドを使用して PUT リクエストを送信します。ニーズに応じて適切なメソッドを選択し、URL に追加するか、 params パラメータを使用するか、データをリクエスト本文として渡します。
• より複雑なリクエストの場合は、Axios config パラメータを使用してリクエスト ヘッダーや認証情報などを設定できます。
• 実際には、 バックエンドAPI の詳細に応じて、正しいパラメータとデータ形式が渡されるようにしてください。
• Promise .then() と .catch() メソッドを使用して、リクエストの成功と失敗、および対応するデータ処理を処理します。
• .catch() 未処理の例外を防ぐために、リクエストにエラー処理を追加することをお勧めします 。
• リクエストを処理するとき、さまざまなエラー条件や成功した応答の処理など、サーバーから返されたステータス コードに基づいてさまざまな処理を実行できます。
• Chrome の開発者ツールなどの開発者ツールを使用してネットワークのリクエストと応答を監視し、問題のデバッグやトラブルシューティングに役立てます。

要約する

Axios は、PUT リクエストによるサーバー上のリソース ステータスの更新を容易にする強力な JavaScript HTTP クライアント ライブラリです。URL を結合したり、パラメーターを使用したり 、データをリクエスト本文として渡したりすることでparams 、さまざまなパラメーター受け渡しメソッドを実装できます。実際には、バックエンド API の要件に応じて適切なパラメータ送信方法を選択し、返されたステータス コードに従って対応する処理を実行する必要があります。

知識の拡大:

• Axiosポストリクエストの使い方は？パラメータの記述方法にはどのようなものがありますか?
• Axios インターセプターの使用方法は?

参考リンク:

1. Axios 公式ドキュメント: Request Config | Axios Docs
2. Express 公式 Web サイト: Express - Node.js Web アプリケーション フレームワーク
3. Chrome デベロッパー ツール: https://developers.google.com/web/tools/chrome-devtools