ReactJS - HTTP 客戶端編程

你好，初露頭角的程序設計師們！今天，我們將踏上一段令人興奮的旅程，進入ReactJS和HTTP客戶端編程的世界。作為你們親切友善的鄰居計算機老師，我將在這次冒險中一步步地引導你們。所以，拿起你們的虛擬背包，我們開始吧！

了解基礎知識

在我們深入ReactJS中HTTP客戶端編程的細節之前，讓我們花點時間了解一下我們將要處理的內容。

HTTP是什麼？

HTTP代表超文本傳輸協議。它就像計算機在互聯網上相互交談的語言。當你瀏覽網站時，你的計算機不斷地發送HTTP請求並接收HTTP回應。

客戶端是什麼？

在我們的情境中，客戶端通常是網頁瀏覽器或移動應用程序，它發送請求到服務器並接收回應。把它想像成你（客戶端）從餐廳（服務器）點餐（發送請求）。

ReactJS是什麼？

ReactJS是一個流行的JavaScript庫，用於構建用戶界面。它就像一個神奇的工具箱，幫助我們輕鬆地創建互動和動態的網頁應用程序。

開支REST API服務器

現在，讓我們假設我們正在構建一個開支追蹤應用程序。我們需要一種方式與我們的后端服務器通信以存儲和檢索開支數據。這就是我們的開支REST API服務器發揮作用的地方。

REST API是什麼？

REST（表現性狀態轉移）API是一套開發者在創建他們的API時遵循的規則。它就像一種標準化的語言，讓不同的軟件應用程序能夠相互通信。

以下是我們可能如何構建我們的開支API的一個簡單示例：

HTTP 方法	端點	描述
GET	/expenses	檢索所有開支
GET	/expenses/:id	檢索特定的開支
POST	/expenses	創建新的開支
PUT	/expenses/:id	更新現有的開支
DELETE	/expenses/:id	刪除開支

fetch() API

現在我們了解了API結構，讓我們學習如何使用JavaScript內置的fetch()函數與之交互。

fetch()是什麼？

fetch()函數是一種現代的方式，在JavaScript中發送HTTP請求。它就像一個我們派去 retrieve 或發送數據到服務器的信使。

讓我們看一些例子：

檢索所有開支

function getAllExpenses() {
fetch('https://api.example.com/expenses')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
}

在這個例子中：

1. 我們使用fetch()發送一個GET請求到我們的API端點。
2. 我們將回應轉換為JSON格式。
3. 我們將數據打印到控制台。
4. 如果有錯誤，我們捕獲它並打印出來。

創建新的開支

function createExpense(expense) {
fetch('https://api.example.com/expenses', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(expense),
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));
}

// 使用
const newExpense = { description: '午餐', amount: 15.99 };
createExpense(newExpense);

在這個例子中：

1. 我們指定HTTP方法為'POST'。
2. 我們在頭部設置內容類型為JSON。
3. 我們將開支對象轉換為JSON字符串作為正文。
4. 我們像GET請求一樣處理回應。

更新開支

function updateExpense(id, updatedExpense) {
fetch(`https://api.example.com/expenses/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(updatedExpense),
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));
}

// 使用
const updatedExpense = { description: '晚餐', amount: 25.99 };
updateExpense(1, updatedExpense);

這個例子與創建開支相似，但我們使用'PUT'方法並在URL中包含開支ID。

刪除開支

function deleteExpense(id) {
fetch(`https://api.example.com/expenses/${id}`, {
method: 'DELETE',
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));
}

// 使用
deleteExpense(1);

對於刪除，我們只需指定'DELETE'方法並在URL中包含開支ID。

整合到React組件中

現在我們了解了如何發送HTTP請求，讓我們看看如何將這些整合到React組件中。

import React, { useState, useEffect } from 'react';

function ExpenseList() {
const [expenses, setExpenses] = useState([]);

useEffect(() => {
fetch('https://api.example.com/expenses')
.then(response => response.json())
.then(data => setExpenses(data))
.catch(error => console.error('Error:', error));
}, []);

return (
<ul>
{expenses.map(expense => (
<li key={expense.id}>{expense.description}: ${expense.amount}</li>
))}
</ul>
);
}

在這個組件中：

1. 我們使用useState鈎子來管理我們的開支狀態。
2. 我們使用useEffect鈎子在組件挂载時獲取開支。
3. 我們將開支渲染為一個列表。

結論

恭喜你們！你們剛剛踏出了ReactJS中HTTP客戶端編程的第一步。記住，就像學習任何新語言一樣，熟能生巧。不要害怕嘗試並犯錯誤——這是我們作為開發者學習和成長的方式。

在我們的下一次課程中，我們將探討更先進的主題，如錯誤處理、加載狀態以及如何創建更健壯和用戶友好的開支追蹤應用程序。在那之前，快樂編程！

Credits: Image by storyset