JavaScriptのfetch関数を使ってRailsと非同期通信する方法

JavaScriptのfetch関数でRailsのAPIを叩く方法

JavaScriptのfetch関数を使用して、Railsアプリケーションとの非同期通信を行うには、以下の手順を踏むことができます。

Railsアプリケーションに対して、Ajaxエンドポイントを作成します。これは、JavaScriptから呼び出すための特別なアクションで、特定のデータを取得したり、データを更新したりするために使用されます。
JavaScriptで、fetch関数を使用して、Ajaxエンドポイントに対して非同期リクエストを送信します。以下のように書くことができます。

fetch('/ajax_endpoint', {
  method: 'POST', 
  body: JSON.stringify({key1: 'value1', key2: 'value2'}),
  headers: {
    'Content-Type': 'application/json'
  }
}).then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Railsアプリケーションで、受信したリクエストを処理し、応答データを生成します。これは、コントローラーのアクション内で行われます。

def ajax_endpoint
  # リクエスト処理
  response_data = {key1: 'value1', key2: 'value2'}
  render json: response_data
end

JavaScriptで、受信したレスポンスデータを処理します。これは、fetch関数のthenブロック内で行われます。

上記の例では非常に基本的な例で、実際の開発ではより多くの複雑な処理が求められることがあります。特に、サーバー側との認証やセキュリティに関連する問題、フォームを送信するなども、実装することが求められます。