JavaScript での REST API の学習-jsチュートリアル-php.cn

JavaScript での REST API の学習

Mary-Kate Olsen

リリース： 2025-01-08 07:09:40

オリジナル

584 人が閲覧しました

JavaScript で REST API を学ぶ

REST API (Representational State Transfer Application Programming Interface) は、ネットワーク化されたアプリケーションの構築に広く使用されています。この記事は、クライアント側とサーバー側の両方の実装をカバーし、JavaScript で REST API を操作する方法を理解するのに役立ちます。

1. REST API とは何ですか?

REST API を使用すると、クライアント (ブラウザーやモバイルアプリなど) がサーバーと通信してデータを取得または操作できるようになります。標準の HTTP メソッドを使用したステートレスアーキテクチャに従います。

コアコンセプト

リソース: エンドポイントによって表されます (例: ユーザーデータの場合は /users)。
HTTP メソッド:
- GET: データを取得します。
- POST: 新しいリソースを作成します。
- PUT: 既存のリソースを更新します。
- DELETE: リソースを削除します。
データ形式: データの交換には JSON が一般的に使用されます。
HTTP ステータスコード:
- 200 OK: 成功。
- 201 作成: リソースが作成されました。
- 400 不正なリクエスト: クライアント側のエラー。
- 404 見つかりません: リソースが見つかりません。
- 500 内部サーバーエラー: サーバーの問題。

2.ツールとセットアップ

クライアント側:
- ブラウザ (fetch または axios ライブラリを備えた JavaScript)。
- 練習には https://jsonplaceholder.typicode.com などの API を使用してください。
サーバー側:
- Node.js をインストールし、Express フレームワークを使用します。

3.クライアント側での REST API の操作

JavaScript は、REST API と対話するための fetch() API と axios などのサードパーティライブラリを提供します。

fetch() を使用したデータの取得

REST API からデータを取得する方法は次のとおりです。

// Fetch data from an API
const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const users = await response.json(); // Parse JSON data
    console.log(users);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

fetchUsers();

ログイン後にコピー

説明:

fetch(url): HTTP リクエストを作成します。
response.json(): レスポンスを JSON 形式に変換します。
ネットワークエラーや無効な応答を捕捉するために、try...catch を使用してエラー処理が実装されます。

POST によるデータの送信

新しいリソースを作成するには、fetch() API で POST メソッドを使用します。

const createUser = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify JSON format
      },
      body: JSON.stringify({ // Convert JavaScript object to JSON
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
      }),
    });

    const newUser = await response.json(); // Parse JSON response
    console.log(newUser);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

createUser();

ログイン後にコピー

キーポイント:

メソッドオプションは HTTP メソッドを指定します。
ヘッダーオプションは、コンテンツタイプを示すために使用されます。
本文には JSON ペイロードが含まれています。

4.サーバー側での REST API の構築

バックエンドでは、Express フレームワークを備えた Node.js が REST API の構築によく使用されます。

環境のセットアップ

Node.js のインストール: Node.js をダウンロードします。
新しいプロジェクトを初期化します。

// Fetch data from an API
const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const users = await response.json(); // Parse JSON data
    console.log(users);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

fetchUsers();

ログイン後にコピー

シンプルな REST API の作成

これは基本的な REST API サーバーの例です。

const createUser = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify JSON format
      },
      body: JSON.stringify({ // Convert JavaScript object to JSON
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
      }),
    });

    const newUser = await response.json(); // Parse JSON response
    console.log(newUser);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

createUser();

ログイン後にコピー

説明:

ミドルウェア: app.use(express.json()) は受信した JSON リクエストを解析します。
ルート:
- GET /users: すべてのユーザーを取得します。
- GET /users/:id: 特定のユーザーを取得します。
- POST /users: 新しいユーザーを追加します。
- PUT /users/:id: ユーザーの詳細を更新します。
- DELETE /users/:id: ユーザーを削除します。

5. REST API をテストする

Postman などのツールや、curl などのコマンドラインユーティリティを使用して API をテストできます。

ポストマンの使用

ここから Postman をインストールします。
新しいリクエストを作成します:
- GET http://localhost:3000/users: すべてのユーザーを取得します。
- POST http://localhost:3000/users: JSON 本文を持つユーザーを追加します。

カールの使用

   mkdir rest-api-demo
   cd rest-api-demo
   npm init -y
   npm install express

ログイン後にコピー

6. REST API 開発のベストプラクティス

意味のあるエンドポイント名を使用します (例: /data の代わりに /users)。
ユーザー入力を検証して、無効なデータや有害なデータを防ぎます。
一貫した HTTP ステータスコードに従います。
Swagger や Postman などのツールを使用して API を文書化します。

私の作業コードリポジトリ
Learning REST APIs in JavaScript

結論

REST API は、最新の Web 開発の基礎です。クライアント側とサーバー側の両方で JavaScript で REST API を操作する方法を学ぶことで、アプリケーションを構築および統合するための強力なスキルセットを獲得できます。実践が重要です。まずパブリック API を使用し、次に Node.js と Express を使用して独自の API を構築します。

このガイドのどの部分についても、お気軽に質問したり、説明を求めてください。

以上がJavaScript での REST API の学習の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。