學(xué)習(xí) JavaScript 中的 REST API

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

---

1.什么是 REST API？

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

核心概念

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

---

2.工具和設(shè)置

• 對于客戶端：

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

• 對于服務(wù)器端：

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

---

3.在客戶端使用 REST API

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

---

使用 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()：將響應(yīng)轉(zhuǎn)換為 JSON 格式。
3. 錯(cuò)誤處理是使用 try...catch 來捕獲網(wǎng)絡(luò)錯(cuò)誤或無效響應(yīng)來實(shí)現(xiàn)的。

---

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

要?jiǎng)?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();

要點(diǎn)：

• method 選項(xiàng)指定 HTTP 方法。
• 標(biāo)題選項(xiàng)用于指示內(nèi)容類型。
• 正文包含 JSON 有效負(fù)載。

---

4.在服務(wù)器端構(gòu)建 REST API

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

設(shè)置您的環(huán)境

1. 安裝 Node.js：下載 Node.js。
2. 初始化一個(gè)新項(xiàng)目：

// 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 服務(wù)器的示例。

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：更新用戶詳細(xì)信息。
  • DELETE /users/:id：刪除用戶。

---

5.測試您的 REST API

您可以使用Postman等工具或curl等命令行實(shí)用程序來測試您的API。

使用郵遞員

1. 從這里安裝 Postman。
2. 創(chuàng)建一個(gè)新請求：
   • 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ā)最佳實(shí)踐

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

---

我的工作代碼倉庫

結(jié)論

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

---

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

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