通過 UI 更新理解 HTTP 動詞

在這堂課中，Tim Corey深入解析HTTP謂詞，並更新Postman複製工具以處理多個HTTP請求方法。 如Tim在0:00時所解釋，目標是擴展現有應用程式，以允許使用者不僅能發送標準的GET請求，還能發送POST請求，從而使得可以在請求體中將資料發送至目標資源。 此更新同樣讓應用程式能支持其它常見的HTTP請求方法，例如PUT、PATCH、DELETE、HEAD及OPTIONS。 透過觀看這段影片，我們能對超文字傳輸協議（HTTP）在實踐中的運作方式以及網頁應用程式如何與網頁服務交互有更清晰的了解。

Tim開始強調，雖然這堂課專注於UI，這些改變為使用不同的HTTP方法進行實際網路通信的實現奠定了基礎。 這對於測試REST API或RESTful API至關重要，在這些API中，每個HTTP謂詞都對應資源上的一個具體行動。

多種HTTP謂詞的重要性

在1:17，Tim解釋了為什麼一個功能齊全的Postman複製工具必須支持不僅僅是GET請求。 雖然GET方法用來從伺服器取得資料或資訊而不影響伺服器狀態，其他HTTP方法如POST、PUT及PATCH則用來修改資源或建立新資源。

例如：

• POST方法將請求資料發送至伺服器以在指定位置建立新資源。

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

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

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

Tim指出，正確支持這些HTTP請求方法確保Postman複製工具能用真實的請求資料及回應體行為處理REST API、RESTful API及其他網路服務。

將HTTP謂詞下拉選單新增到UI

Tim開始強化UI，通過調整API輸入框大小以便為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）。 這種注重細節確保了專業的網頁應用程式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標籤中。 這一過程反映了網頁應用程式如何與網頁或網路服務交互以檢索資訊或驗證資源是否存在（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請求方法在網頁應用程式中的重要性：

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

• POST方法：將資料傳送至伺服器以建立新資源。

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

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

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

• HEAD、OPTIONS、TRACE、CONNECT方法：提供元資料、通信選項或資訊環路回測功能。

Tim的方法展示了一個設計良好的UI，使HTTP謂詞列表直觀，支持安全方法和冪等方法，並準備應用程式可靠地處理REST API及RESTful API。 通過將請求體、結果和謂詞選擇分開，Postman複製工具成為測試網路服務及理解現實應用中超文字傳輸協議的實用工具。