ブラウザをリフレッシュせずに5秒ごとにAxiosのPOSTリクエストを送信する方法


  1. JavaScriptとAxiosの準備: まず、JavaScriptとAxiosをHTMLファイルにインクルードします。以下のコードを<head>セクション内に追加します。
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  1. リクエストの送信: 次に、以下のJavaScriptコードスニペットを使用して、5秒ごとにAxios POSTリクエストを送信します。
function sendPostRequest() {
  axios.post('/your-api-endpoint', { data: 'Your data goes here' })
    .then(response => {
      // リクエストが成功した場合の処理
      console.log(response.data);
    })
    .catch(error => {
      // リクエストが失敗した場合の処理
      console.error(error);
    });
}
// 5秒ごとにリクエストを送信するタイマーを設定
setInterval(sendPostRequest, 5000);

上記のコードでは、sendPostRequest関数内でAxiosのpostメソッドを使用して、指定のAPIエンドポイントにデータを送信しています。成功時と失敗時の処理も含まれています。

JavaScriptのsetInterval関数を使用して、sendPostRequest関数を5秒ごとに実行するタイマーを設定しています。

この方法により、ブラウザをリフレッシュせずに定期的にAxiosのPOSTリクエストが送信されます。

  • 上記のコード内の'/your-api-endpoint'は、実際のAPIエンドポイントに置き換える必要があります。
  • ブラウザの同一オリジンポリシーにより、異なるドメインへのリクエストは制限される場合があります。適切なアクセス制御ヘッダーを設定するか、CORS(Cross-Origin Resource Sharing)を使用して制約を解除する必要がある場合があります。

以上が、ブラウザをリフレッシュせずに5秒ごとにAxiosのPOSTリクエストを送信する方法の例です。