Zrozumienie Czasowników HTTP Przez Aktualizacje UI

Znaczenie wielu czasowników HTTP

O godzinie 1:17 Tim wyjaśnia, dlaczego funkcjonalny klon Postmana musi obsługiwać więcej niż tylko żądania GET. Podczas gdy metoda GET jest używana do pobierania danych lub informacji z serwera bez wpływu na stan serwera, inne metody HTTP, takie jak POST, PUT i PATCH, modyfikują zasób lub tworzą nowy zasób.

Na przykład:

• Metoda POST wysyła dane żądania do serwera w celu utworzenia nowego zasobu w określonej lokalizacji.

• Metoda PUT zastępuje cały zasób w określonej lokalizacji, czyniąc go żądaniem idempotentnym.

• Metoda PATCH pozwala na częściowe modyfikacje istniejącego zasobu.

• Metoda DELETE usuwa określony zasób.

Tim zauważa, że poprawna obsługa tych metod żądań HTTP zapewnia, że klon Postmana może obsługiwać REST API, RESTful API i inne usługi sieciowe z realistycznymi danymi żądań i zachowaniem ciała odpowiedzi.

Dodawanie pola wyboru czasownika HTTP do UI

Tim zaczyna ulepszać interfejs użytkownika, zmieniając rozmiar pola wprowadzania API, aby zrobić miejsce na pole rozwijane (combo box) do wyboru czasownika HTTP. Zmienia jego nazwę na wybór czasownika HTTP i hardcoduje GET i POST na teraz (2:42).

Tim wyjaśnia, dlaczego jest to wystarczające: czasowniki HTTP są znormalizowane w specyfikacji HTTP i rzadko się zmieniają. Użycie statycznej listy unika niepotrzebnej złożoności i zapewnia szybką wydajność, zwłaszcza gdy czasowniki takie jak TRACE, CONNECT i OPTIONS są rzadko wymagane w podstawowym klonie Postmana.

Konfigurowanie zachowania rozwijanej listy

Kluczowym szczegółem UI, jak wyjaśnia Tim, jest przełączenie stylu rozwijanej listy na listę rozwijaną, aby użytkownicy mogli wybierać tylko prawidłowe metody żądań HTTP (4:47). To zapobiega błędom i zapewnia, że aplikacja poprawnie interpretuje wybrany czasownik, niezależnie od tego, czy jest to żądanie GET, żądanie POST, czy później żądanie PUT, PATCH lub DELETE.

Dostosowuje także szerokość rozwijanej listy, aby pomieścić dłuższe czasowniki, takie jak DELETE lub PATCH, bez zrywania układu (5:51–7:27). To zwracanie uwagi na szczegóły zapewnia profesjonalny interfejs użytkownika aplikacji internetowej, który jest zarówno samowyjaśnialny, jak i funkcjonalny.

Wprowadzenie zakładek Ciała i Wyników

O godzinie 7:57 Tim dodaje kontrolkę zakładek do obsługi wprowadzania ciała żądania i odpowiedzi API. Oddziela ciało i wyniki na osobne zakładki:

• Zakładka Ciała: Pozwala użytkownikowi wpisać dane JSON, aby wysłać dane do serwera za pomocą metody POST lub żądania PUT.

• Zakładka Wyników: Wyświetla ciało odpowiedzi zwrócone przez serwer, w tym kody statusu HTTP i wszelkie zwrócone dane.

Ten design zapewnia, że poufne dane w treści żądania są wyraźnie oddzielone od pobranej informacji i obsługuje czyste zarządzanie wieloma metodami HTTP dla RESTful API (8:00).

Różnicowanie tekstu wejściowego i tekstu wyjściowego

Tim podkreśla różnicę między polem tekstowym ciało a polem tekstowym wyników (12:16). Tekst ciała jest edytowalny, aby użytkownicy mogli wpisywać dane żądania, podczas gdy tekst wyników jest tylko do odczytu, aby zapobiec przypadkowej modyfikacji odpowiedzi serwera.

Zmienienia też nazwę zakładki Wyniki z "Output" na Wyniki, aby poprawić klarowność. To proste nazewnictwo sprawia, że lista czasowników HTTP jest bardziej intuicyjna, zwłaszcza przy obsłudze wielu identycznych żądań lub idempotentnych metod jak GET, PUT i DELETE (12:44).

Testowanie żądań GET

Tim demonstruje, że UI działa poprawnie z żądaniami GET. Wklejając URL i wybierając GET, użytkownik pobiera dane z serwera, które pojawiają się w zakładce Wyniki. Ten proces odzwierciedla, jak aplikacje internetowe wchodzą w interakcję ze stroną internetową lub usługą internetową, aby pobrać informacje lub zweryfikować, czy zasób istnieje (13:22).

Zauważa, że wiele żądań GET lub powtarzanie tych samych żądań GET spowoduje pobranie tych samych informacji, jeśli stan zasobu nie uległ zmianie, podkreślając właściwość bezpieczeństwa metody GET (14:00).

Porządkowanie i ustawianie domyślnych

O godzinie 14:34 Tim sprząta rozwijaną listę i ustawia domyślne ustawienie na GET (16:05). To zapewnia, że użytkownicy od razu widzą prawidłową metodę żądania HTTP, unikając zamieszania.

Dodatkowo, gdy użytkownik kliknie "Go", aplikacja automatycznie przełącza się na zakładkę Wyniki, zapewniając płynne doświadczenie. To demonstruje obsługę scenariuszy wielokrotnego wykonywania żądania i zapewnia, że wielokrotne identyczne żądania produkują spójne ciała odpowiedzi (17:02).

Przygotowanie do żądań POST

Tim wyjaśnia, że chociaż UI już obsługuje GET i POST, rzeczywista funkcjonalność wysyłania danych za pomocą metody POST nadal wymaga implementacji. Zakładka Ciała pozwala użytkownikom wpisać dane żądania, symulując żądania POST, żądania PUT lub żądania PATCH, aby zmodyfikować istniejący zasób lub utworzyć nowy zasób w określonej lokalizacji.

Zachęca uczniów do wykorzystania tego jako wyzwania do ćwiczeń, eksperymentując z ciałami żądań JSON i testując je w usługach takich jak JSONPlaceholder, które obsługują żądania GET i POST do ćwiczeń (20:11).

Najważniejsze wnioski

Wideo Tima Corey'ego video podkreśla znaczenie zrozumienia czasowników HTTP i metod żądań HTTP w aplikacjach internetowych:

• Metoda GET: Pobierz dane z serwera bez zmiany stanu zasobu.

• Metoda POST: Wyślij dane do serwera, aby utworzyć nowy zasób.

• Metoda PUT: Zastąp cały zasób (żądanie idempotentne).

• Metoda PATCH: Zastosuj częściowe modyfikacje do istniejącego zasobu.

• Metoda DELETE: Usuń określony zasób.

• Metody HEAD, OPTIONS, TRACE, CONNECT: Dostarczają metadane, opcje komunikacji lub testowanie pętli zwrotnej wiadomości.

Podejście Tima pokazuje, że dobrze zaprojektowane UI tworzą listę czasowników HTTP intuicyjną, obsługują zarówno metody bezpieczne, jak i idempotentne, oraz przygotowują aplikację do niezawodnej obsługi REST API i RESTful API. Oddzielając ciało żądania, wyniki i wybór czasowników, klon Postmana staje się praktycznym narzędziem do testowania usług sieciowych i zrozumienia protokół hypertext transfer w prawdziwych aplikacjach.