學習 JavaScript 中的 REST API

學習 JavaScript 中的 REST API

REST API（表述性狀態傳輸應用程式介面）廣泛用於建立網路應用程式。本文將協助您了解如何在 JavaScript 中使用 REST API，涵蓋客戶端和伺服器端實作。

---

1.什麼是 REST API？

REST API 允許客戶端（例如瀏覽器或行動應用程式）與伺服器通訊以取得或操作資料。它遵循使用標準 HTTP 方法的無狀態架構。

核心概念

1. 資源：由端點表示（例如，/users 表示使用者資料）。
2. HTTP 方法：
   • GET：檢索資料。
   • POST：建立一個新資源。
   • PUT：更新現有資源。
   • 刪除：刪除資源。
3. 資料格式：JSON通常用於交換資料。
4. HTTP 狀態碼：
   • 200 OK：成功。
   • 201 已建立：資源已建立。
   • 400 Bad Request：客戶端錯誤。
   • 404 Not Found：找不到資源。
   • 500 內部伺服器錯誤：伺服器問題。

---

2.工具與設定

• 對於客戶端：

  • 瀏覽器（有 fetch 或 axios 函式庫的 JavaScript）。
  • 使用 https://jsonplaceholder.typicode.com 等 API 進行練習。

• 對於伺服器端：

  • 安裝 Node.js 並使用 Express 框架。

---

3.在客戶端使用 REST API

JavaScript 提供了 fetch() API 和 axios 等第三方函式庫來與 REST API 進行互動。

---

使用 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();

說明：

1. fetch(url): 發出 HTTP 請求。
2. response.json()：將回應轉換為 JSON 格式。
3. 錯誤的處理是使用 try...catch 來擷取網路錯誤或無效回應來實現。

---

使用 POST 傳送資料

要建立新資源，請使用 POST 方法和 fetch() 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();

重點：

• method 選項指定 HTTP 方法。
• 標題選項用於指示內容類型。
• 內文包含 JSON 有效負荷。

---

4.在伺服器端建置 REST API

在後端，Node.js 和 Express 框架通常用於建立 REST API。

設定您的環境

1. 安裝 Node.js：下載 Node.js。
2. 初始化一個新項目：

// 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。

使用郵差

1. 從這裡安裝 Postman。
2. 建立一個新請求：
   • 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 開發最佳實務

1. 使用有意義的端點名稱（例如，/users 而不是 /data）。
2. 驗證使用者輸入以防止無效或有害資料。
3. 遵循一致的 HTTP 狀態碼。
4. 使用 Swagger 或 Postman 等工具記錄您的 API。

---

我的工作代碼倉庫

結論

REST API 是現代 Web 開發的基石。透過學習在客戶端和伺服器端與 JavaScript 中的 REST API 進行交互，您將獲得建置和整合應用程式的強大技能。實踐是關鍵——從使用公共 API 開始，然後使用 Node.js 和 Express 建立自己的 API。

---

歡迎就本指南的任何部分提出問題或尋求澄清！

以上是學習 JavaScript 中的 REST API的詳細內容。更多資訊請關注PHP中文網其他相關文章！