- 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>
- リクエストの送信: 次に、以下の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リクエストを送信する方法の例です。