Node.js での AJAX 呼び出し

Representational State TransferをRESTと呼びます。 RESTアーキテクチャ スタイルの制限と制約に準拠し、RESTful Web サービスとの対話を可能にする API または Web API (アプリケーション プログラミング インターフェース) は、RESTAPI またはRESTfulAPI として知られています。

本日の投稿では、Node.js を使用してサードパーティ パッケージを使用してリクエストを行う方法を学びます。

Node.js での AJAX 呼び出し

node-fetch は、Node.js で fetch() 関数を使用できるようにする軽量のパッケージ/モジュールです。 その機能は、Vanilla JavaScript の window.fetch() に非常に似ています。

node-fetch は無料のサードパーティ パッケージであり、ブラウザおよび Node.js 用の Promise ベースの HTTP クライアントです。 NPMで入手できます。

node-fetch を使用して、非同期 HTTP リクエストを REST エンドポイントに送信できます。 node-fetch を使用すると、CRUD 操作を簡単に実行できます。

これは Vanilla JavaScript で、または Node.js や React などのライブラリで使用できます。 node-fetch の詳細については こちら を参照してください。

HTTP GET メソッドは、サーバーからリソースを取得します。 たとえば、ブラウザは、サーバーから TODO データ リストをフェッチするとき、または特定の TODO リクエストの情報をフェッチするときに、HTTP GET リクエスト メソッドを使用します。

GET および HEAD リクエストは、サーバーの状態を変更しません。

GETAPI はべき等です。つまり、POSTやPUTなどの別の API がサーバーに対して行われ、サーバー上のリソースの状態が変更されるまで、複数の同一のリクエストを行うと、毎回同じ結果が生成されます。

次のコマンド $ npm i node-fetch を使用して node-fetch ライブラリをインストールします。

GET リクエストは get メソッドで作成されます。

const fetch = require('node-fetch');
async function getTodoData() {
  const payload = {title: 'Hello World', body: 'Welcome to Node tutorial'};
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'post',
    body: JSON.stringify(payload),
    headers: {'Content-Type': 'application/json'}
  });
  const data = await response.json();
  console.log(data);
}
getTodoData();

上記の例では、ユーザーがファイルを実行すると、fetch モジュールを使用して、指定された URL (この投稿ではダミー) を使用して、GET 呼び出しがノード サーバーに送信されます。 サーバーがこのデータを中断することなく処理すると、成功メッセージが返されます。

サーバー応答の出力に基づいて、コンソールにメッセージを出力するか、適切なメッセージでユーザーに通知できます。

Node.js をサポートする replit で上記のコード スニペットを実行してみてください。 下に結果が表示されます。

{ title: 'Hello World', body: 'Welcome to Node tutorial', id: 101 }

デモ