透過 UI 更新理解 HTTP 動詞

多重HTTP動詞的重要性

在1:17時，Tim解釋為什麼一個功能齊全的Postman克隆必須支持多於僅GET的請求。 雖然GET方法用於從伺服器檢索數據或獲取資訊而不影響伺服器狀態，其他HTTP方法如POST、PUT和PATCH則是用來修改資源或創建新資源。

例如：

• POST方法將請求數據發送到伺服器以在指定位置創建新資源。

• PUT方法替換指定位置的整個資源，使其成為冪等請求。

• PATCH方法允許對現有資源進行局部修改。

• DELETE方法移除指定的資源。

Tim指出，正確支持這些HTTP請求方法可以確保Postman克隆能夠處理具有真實請求數據和響應主體行為的REST API、RESTful API和其他Web服務。

在UI中加入HTTP動詞下拉選單

Tim開始通過調整API輸入框大小來增強UI，為選擇HTTP動詞的下拉選單（組合框）騰出空間。 他將其命名為HTTP動詞選擇，並暫時將GET和POST硬編碼（2:42）。

Tim解釋為什麼這已經足夠：HTTP動詞在HTTP規範中被標準化，並且它們很少會改變。 使用靜態列表可以避免不必要的複雜性並確保快速的性能，特別是像TRACE、CONNECT和OPTIONS這樣的動詞在基本的Postman克隆中很少需要。

配置下拉選單行為

Tim解釋了一個關鍵的UI細節，即將下拉樣式切換為下拉列表，這樣用戶只能選擇有效的HTTP請求方法（4:47）。 這可以防止錯誤，並確保應用程式正確解釋選擇的動詞，不論是GET、POST請求，還是稍後的PUT、PATCH或DELETE請求。

他還調整了下拉選單的寬度，以容納較長的動詞，如DELETE或PATCH，確保不會打破佈局（5:51–7:27）。 這種注重細節的設計確保了一個專業的Web應用程式UI，既自解释又有功能。

介紹Body和Results標籤

在7:57時，Tim添加了一個標籤控制，以處理請求體輸入和API響應。 這將Body和Results分隔成不同的標籤：

• Body標籤：允許用戶鍵入JSON數據以通過POST方法或PUT請求向伺服器發送數據。

• Results標籤：顯示伺服器返回的響應主體，包括HTTP狀態碼和返回的任何數據。

這種設計確保請求體中的敏感數據與檢索到的信息清晰分開，並支援對RESTful API的多種HTTP方法進行乾淨的處理（8:00）。

區分輸入和輸出文本框

Tim強調Body文本框與Results文本框之間的區別（12:16）。 Body文本是可編輯的，因此用戶可以鍵入請求數據，而Results文本是唯讀的，以防止意外修改伺服器的響應。

他還將Results標籤從"Output"重命名為Results以提高清晰度。 這種簡單的命名使HTTP動詞列表更加直覺，特別是在處理多個相同請求或冪等方法如GET、PUT和DELETE時（12:44）。

測試GET請求

Tim展示了UI與GET請求一起正常運作。 通過粘貼URL並選擇GET，用戶可以從伺服器檢索數據，數據將顯示在Results標籤中。 此過程反映出Web應用程式如何與Web頁面或Web服務互動以檢索信息或驗證資源是否存在（13:22）。

他指出多次進行GET請求或重複同一GET請求，將在資源狀態未改變的情況下獲得相同的信息，這突顯了GET的安全方法屬性（14:00）。

清理和設定預設值

在14:34時，Tim清理了下拉選單並將預設選擇設置為GET（16:05）。 這確保用戶立即看到有效的HTTP請求方法，避免混淆。

此外，當用戶點擊"Go"時，應用程式會自動切換到Results標籤，提供流暢的體驗。 這顯示了如何處理多次請求場景，並確保多個相同請求產生一致的響應主體（17:02）。

準備POST請求

Tim解釋，雖然UI現在支持GET和POST，但通過POST方法發送數據的實際功能仍需要實現。 Body標籤允許用戶輸入請求數據，模擬POST請求、PUT請求或PATCH請求，以便在指定位置修改現有資源或創建新資源。

他鼓勵學習者將此作為練習挑戰，嘗試JSON請求體並在像JSONPlaceholder這樣支援GET和POST請求的服務上進行測試（20:11）。

關鍵要點

Tim Corey的視頻強調理解HTTP動詞和HTTP請求方法在Web應用程式中的重要性：

• GET方法：從伺服器檢索數據而不改變資源狀態。

• POST方法：向伺服器發送數據以創建新資源。

• PUT方法：替換整個資源（冪等請求）。

• PATCH方法：對現有資源進行部分修改。

• DELETE方法：移除指定的資源。

• HEAD、OPTIONS、TRACE、CONNECT方法：提供元數據、通信選項或消息迴路測試功能。

Tim的方法顯示了一個精心設計的UI如何使HTTP動詞列表直觀，支持安全方法和冪等方法，並準備應用去可靠地處理REST API和RESTful API。 通過將請求體、Results和動詞選擇分開，Postman克隆成為一種實踐工具，用於測試Web服務並理解真實應用中的超文本傳輸協議。