學習 JavaScript 中的 REST API

REST API（表述性狀態(tài)傳輸應用程序編程接口）廣泛用于構建網(wǎng)絡應用程序。本文將幫助您了解如何在 JavaScript 中使用 REST API，涵蓋客戶端和服務器端實現(xiàn)。

---

1.什么是 REST API？

REST API 允許客戶端（例如瀏覽器或移動應用程序）與服務器通信以獲取或操作數(shù)據(jù)。它遵循使用標準 HTTP 方法的無狀態(tài)架構。

核心概念

1. 資源：由端點表示（例如，/users 表示用戶數(shù)據(jù)）。
2. HTTP 方法：
   • GET：檢索數(shù)據(jù)。
   • POST：創(chuàng)建一個新資源。
   • PUT：更新現(xiàn)有資源。
   • 刪除：刪除資源。
3. 數(shù)據(jù)格式：JSON通常用于交換數(shù)據(jù)。
4. HTTP 狀態(tài)代碼：
   • 200 OK：成功。
   • 201 已創(chuàng)建：資源已創(chuàng)建。
   • 400 Bad Request：客戶端錯誤。
   • 404 Not Found：找不到資源。
   • 500 內(nèi)部服務器錯誤：服務器問題。

---

2.工具和設置

• 對于客戶端：

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

• 對于服務器端：

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

---

3.在客戶端使用 REST API

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

---

使用 fetch() 獲取數(shù)據(jù)

以下是如何從 REST API 檢索數(shù)據(jù)。

// 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): 發(fā)出 HTTP 請求。
2. response.json()：將響應轉(zhuǎn)換為 JSON 格式。
3. 錯誤處理是使用 try...catch 來捕獲網(wǎng)絡錯誤或無效響應來實現(xiàn)的。

---

使用 POST 發(fā)送數(shù)據(jù)

要創(chuàng)建新資源，請使用 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 方法。
• 標題選項用于指示內(nèi)容類型。
• 正文包含 JSON 有效負載。

---

4.在服務器端構建 REST API

在后端，Node.js 和 Express 框架通常用于構建 REST API。

設置您的環(huán)境

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

---

創(chuàng)建簡單的 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. 創(chuàng)建一個新請求：
   • 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 開發(fā)最佳實踐

1. 使用有意義的端點名稱（例如，/users 而不是 /data）。
2. 驗證用戶輸入以防止無效或有害數(shù)據(jù)。
3. 遵循一致的 HTTP 狀態(tài)代碼。
4. 使用 Swagger 或 Postman 等工具記錄您的 API。

---

我的工作代碼倉庫

結論

REST API 是現(xiàn)代 Web 開發(fā)的基石。通過學習在客戶端和服務器端與 JavaScript 中的 REST API 進行交互，您將獲得構建和集成應用程序的強大技能。實踐是關鍵——從使用公共 API 開始，然后使用 Node.js 和 Express 構建您自己的 API。

---

歡迎就本指南的任何部分提出問題或?qū)で蟪吻澹?/p>

以上是學習 JavaScript 中的 REST API的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！