JavaScript で axios delete をバックエンド ReactJS に送信する方法

Send Axios Delete とは何ですか?

ReactJS と Axios を使用してバックエンドからデータを削除するのは、困難な作業になる可能性があります。ただし、適切なアプローチと知識があれば、このタスクを簡単に実行できます。この記事では、JavaScript を使用して Axios 削除リクエストを ReactJS のバックエンドに送信する方法を説明します。コードと説明、および 2 つの実際の例を使用して、2 つの異なるアプローチを説明します。それでは、始めましょう!

＃＃＃アルゴリズム＃＃＃

議論を始める前に、ReactJS を使用するときに Axios 削除リクエストをバックエンドに送信するプロセスを理解することが重要です。手順は次のとおりです -

• Merge Axios

  - HTTP リクエストを偽造するための人気のあるライブラリである Axios を含める必要があります。

• クリア リクエストの構築

  - 次に、Axios を使用してクリア リクエストを開始します。これには、Uniform Resource Locator (URL)、ヘッダー (存在する場合)、およびサーバーに転送する必要があるデータを指定する必要があります。

• リクエストの送信

  - 要約すると、Axios を使用してクリアなリクエストをサーバーに送信します。

方法 1: axios 削除方法を使用する

最初の方法では、Axios の削除メソッドを使用します。これはコードです -

リーリー

上記のコードでは、id パラメーターを受け取る deleteData という関数を定義します。関数内では、axios の delete メソッドを使用して、サーバーに削除リクエストを送信します。ターゲットの URL には、削除するデータを表す id パラメーターが含まれています。リクエストが成功すると、応答データがコンソールに記録されます。エラーが発生した場合は、そのエラーがコンソールに記録されます。

＃＃＃例＃＃＃

この例では、クリックしてデータを削除できる削除ボタンを作成します。これはコードです -

リーリー

上記のコードは、id 属性を受け入れて削除リクエスト URL を構築できるようにする「DeleteButton」と呼ばれるコンポーネントを示しています。削除ボタンをクリックすると、handleDelete 関数が呼び出されます。この関数は、Axios の delete メソッドを使用して削除リクエストをサーバーに送信し、関連する ID を指定します。リクエストが成功すると、応答データがコンソールに記録されます。代わりに、エラーが発生した場合、そのエラーもコンソールに記録されます。

方法 2: axios リクエスト メソッドを使用する

代替方法では、Axios リクエスト プロシージャとメソッド属性の「delete」属性設定を使用する必要があります。以下は、対応するコード スニペット -

です。 リーリー

このコードでは、最初のメソッドと同じ deleteData 関数を定義します。ただし、Axios delete メソッドを使用する代わりに、Axios request メソッドを使用し、メソッド属性を「Delete」に設定します。リクエストが成功すると、応答データがコンソールに記録されます。エラーが発生した場合は、そのエラーがコンソールに記録されます。

コードと説明で両方のメソッドを説明したので、次に、Axios 削除リクエストを ReactJS のバックエンドに送信する方法の 2 つの実際の例を見てみましょう。

例: 削除確認モード

この例では、確認後にデータを削除する削除確認モードを作成します。コードは次のとおりです。

リーリー ＃＃＃出力＃＃＃＃＃＃＃＃＃＃＃＃

上記のコードには、id 属性を受け入れる DeleteconfirmationModal というコンポーネントが含まれています。削除ボタンをクリックすると、確認モードが表示されます。ユーザーが削除を確認すると、handleDelete 関数が実行されます。この関数は、axios delete メソッドを使用してサーバーに削除リクエストを送信し、ID を指定します。リクエストが成功すると、応答データがコンソールに記録されます。代わりに、エラーが発生した場合、そのエラーもコンソールに記録されます。つまり、isOpen 状態が false に設定され、確認モードがオフになります。

＃＃＃結論は＃＃＃

この記事では、JavaScript を使用して Axios 削除リクエストを ReactJS のバックエンドに送信する方法を検討しました。 2 つの異なるアプローチをコードと説明、および 2 つの実際の例とともに紹介します。この記事で説明されている手順に従うと、ReactJS と Axios を使用してバックエンドからデータを簡単に削除できるようになります。

以上がJavaScript で axios delete をバックエンド ReactJS に送信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。