{"id":27684,"date":"2021-05-13T13:42:00","date_gmt":"2021-05-13T10:42:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27684"},"modified":"2021-10-18T03:47:29","modified_gmt":"2021-10-18T00:47:29","slug":"rozszerzenie-klienta-rest-dla-kodu-programu-visual-studio","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/rozszerzenie-klienta-rest-dla-kodu-programu-visual-studio\/","title":{"rendered":"Rozszerzenie klienta REST dla kodu programu Visual Studio"},"content":{"rendered":"

Przep\u0142yw pracy w tworzeniu stron internetowych zmienia si\u0119 w dzisiejszych czasach bardzo szybko. U\u017cytkownicy preferuj\u0105 tworzenie stron internetowych przy u\u017cyciu framework\u00f3w\/bibliotek JavaScript, takich jak React, Vue, Angular. Chocia\u017c tworzenie witryny internetowej w oparciu o te technologie jest popularne, wymaga r\u00f3wnie\u017c wywo\u0142ania interfejs\u00f3w API Rest, aby Twoje aplikacje by\u0142y dynamiczne.<\/p>\n

Twoja aplikacja frontendowa wysy\u0142a \u017c\u0105danie HTTP do serwera zaplecza i pobiera lub przetwarza dane. Do serwera zaplecza mo\u017ce by\u0107 konieczne wys\u0142anie r\u00f3\u017cnych \u017c\u0105da\u0144 HTTP, takich jak GET, POST, PUT, DELETE. Na podstawie tych \u017c\u0105da\u0144 i odpowiedzi HTTP Twoja aplikacja dzia\u0142a dla u\u017cytkownika ko\u0144cowego.<\/p>\n

Poniewa\u017c musisz stworzy\u0107 punkty ko\u0144cowe API, oczywiste jest, \u017ce musisz przetestowa\u0107 \u017c\u0105dania HTTP. Dost\u0119pnych jest kilka narz\u0119dzi, kt\u00f3re pozwalaj\u0105 nam testowa\u0107 \u017c\u0105dania i odpowiedzi HTTP. Dobra wiadomo\u015b\u0107 jest taka, \u017ce \u200b\u200bje\u015bli u\u017cywasz Visual Studio Code, nie musisz u\u017cywa\u0107 ani instalowa\u0107 \u017cadnego innego narz\u0119dzia ani oprogramowania. Mo\u017cesz przetestowa\u0107 swoje wywo\u0142ania API w samym edytorze kodu. W tym artykule pokazujemy, jak korzysta\u0107 z rozszerzenia Rest Client w Visual Studio Code.<\/p>\n

Zainstaluj rozszerzenie klienta Rest w Visual Studio Code<\/h3>\n

Celem tego artyku\u0142u jest pokazanie, jak u\u017cytkownik mo\u017ce testowa\u0107 \u017c\u0105danie i odpowied\u017a HTTP w kodzie programu Visual Studio. Wi\u0119c najpierw musisz zainstalowa\u0107 rozszerzenie o nazwie \u201eKlient odpoczynku".<\/p>\n

Kliknij ikon\u0119 \u201eRozszerzenia” iw polu wyszukiwania wpisz \u201eKlient odpoczynku”. Z wynik\u00f3w wyszukiwania wybierz pakiet opracowany przez \u201eHuacho Mao” i zainstaluj go.<\/p>\n

Jak przetestowa\u0107 \u017c\u0105danie i odpowied\u017a HTTP<\/h3>\n

W tej sekcji zobaczymy, jak wys\u0142a\u0107 rzeczywiste \u017c\u0105danie HTTP i zobaczy\u0107 odpowied\u017a. Je\u015bli masz gotowe punkty ko\u0144cowe API, mo\u017cesz je bezpo\u015brednio zastosowa\u0107. W naszym przypadku do cel\u00f3w testowych pobieramy punkty ko\u0144cowe z REQ | OZE<\/a>.<\/p>\n

Utw\u00f3rz plik z rozszerzeniem \u201e.http”, np. \u201eapi.http”. Mo\u017cesz zapisa\u0107 ten plik w dowolnym miejscu. To tylko plik, w kt\u00f3rym mo\u017cesz przechowywa\u0107 wszystkie \u017c\u0105dania HTTP do p\u00f3\u017aniejszego wykorzystania.<\/p>\n

Aby wys\u0142a\u0107 \u017c\u0105danie GET, nasz punkt ko\u0144cowy to https:\/\/reqres.in\/api\/users?page=2<\/a>. Tak wi\u0119c w api.http<\/code>napiszemy to w nast\u0119puj\u0105cy spos\u00f3b.<\/p>\n

GET https:\/\/reqres.in\/api\/users?page=2\n<\/code><\/pre>\n
Teraz, je\u015bli zaewidencjonujesz edytor, zobaczysz wiersz \u201eWy\u015blij \u017c\u0105danie” do\u0142\u0105czony do naszego o\u015bwiadczenia. Kliknij \u201eWy\u015blij \u017c\u0105danie”, trafia do punktu ko\u0144cowego API i daje odpowied\u017a HTTP w nast\u0119pnym oknie. Zobacz zrzut ekranu poni\u017cej.<\/p>\n
<\/a><\/p>\n
To o wiele prostsze. W przysz\u0142o\u015bci mo\u017cesz wys\u0142a\u0107 \u017c\u0105danie POST, jak poni\u017cej.<\/p>\n
POST https:\/\/reqres.in\/api\/users\nContent-Type: application\/json\n\n{\n    \"name\": \"morpheus\",\n    \"job\": \"leader\"\n}\n<\/code><\/pre>\n
Oczywi\u015bcie nie chcesz tworzy\u0107 osobnego pliku dla ka\u017cdego \u017c\u0105dania. Aby oddzieli\u0107 \u017c\u0105danie, naci\u015bnij Enter i wpisz \u201e###”, a nast\u0119pnie w nowym wierszu dodaj nowe \u017c\u0105danie.<\/p>\n
GET https:\/\/reqres.in\/api\/users?page=2\n\n###\nPOST https:\/\/reqres.in\/api\/users\nContent-Type: application\/json\n\n{\n    \"name\": \"morpheus\",\n    \"job\": \"leader\"\n}\n<\/code><\/pre>\n
W ten spos\u00f3b mo\u017cesz przechowywa\u0107 wszystkie \u017c\u0105dania HTTP w jednym pliku i \u0142atwo go przetestowa\u0107. Koniec z k\u0142opotami ze znalezieniem naszej pro\u015bby i skorzystaniem z niej.<\/p>\n
W innym przyk\u0142adzie mo\u017ce by\u0107 konieczne przekazanie tokena w ka\u017cdym \u017c\u0105daniu HTTP. Mo\u017cesz to zrobi\u0107, jak pokazano poni\u017cej.<\/p>\n
POST https:\/\/reqres.in\/api\/users\nAuthorization: Bearer YOUR_TOKEN_HERE\nContent-Type: application\/json\n\n{\n  \"user_id\":5,\n    \"car_number\":\"030663\",\n    \"car_reg_id\":\"217\",\n    \"days\": [\"Monday\", \"Wednesday\"],\n    \"booking_time\": \"07PM - 08PM\"\n}\n<\/code><\/pre>\n
Masz pomys\u0142, prawda? W ten sam spos\u00f3b mo\u017cesz pisa\u0107 \u017c\u0105dania PUT, DELETE HTTP. \u015amia\u0142o i spr\u00f3buj. Na pewno spodoba ci si\u0119 to rozszerzenie. Chcieliby\u015bmy pozna\u0107 Twoje przemy\u015blenia i sugestie w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n