JavaScript: Wysyłanie danych

0:00Pokazałem Ci w jaki sposób możemy pobierać

0:02dane z użyciem funkcji fetch, ale co ważne takie dane możemy też wysyłać.

0:06Czyli na przykład może mieć formularz, w którym ktoś uzupełni dane i za pomocą

0:10Ajax bez przeładowywania witryny wyślemy je na serwer.

0:13Natomiast oczywiście to jest bardzo istotne, że pobierać dane możemy wszędzie

0:17tam, gdzie serwer nam potrafi coś wyświetlić tak jak tutaj,

0:20natomiast żeby dane wysłać pod jakiś adres

0:23to serwer musi być w ten sposób przygotowany, żeby np.

0:26metodą POST te dane na odpowiednim adresie przyjmował.

0:29Czyli to nie jest tak, że gdziekolwiek możesz sobie cokolwiek wysłać. Ale ta

0:32strona, jsonplaceholder, z której korzystaliśmy pod takim adresem, czyli

0:36identycznym jak do pobierania, pozwala nam przesyłać dane

0:39gdybyśmy chcieli jakby coś wstawić do tej bazy danych. To jest tylko tymczasowe, to

0:44się nigdzie nie zapisuje, ale służy nam do testowania.

0:47Dlatego będziemy mogli wykorzystać właśnie

0:49taki endpoint, czyli adres. I metodą POST zazwyczaj się wysyła dane.

0:54I będę chciał Ci pokazać jak to zrobić.

0:55Więc skopiujemy sobie ten adres i znowu po

0:57kliknięciu w ten przycisk będziemy chcieli metodą fetch,

1:02zróbmy sobie najpierw tutaj funkcję, czyli po kliknięciu w przycisk metodą fetch

1:06będziemy chcieli do serwera jakieś dane wysłać.

1:08Więc napiszemy znowu fetch, podamy adres pod jaki wysyłamy dane

1:12i teraz jak powiedzieć, że nie chcemy

1:14danych pobrać, a więc nie wysyłamy zapytania HTTP o typie GET, ale będzie to

1:19typ POST musimy podać tutaj jako drugi parametr do tej funkcji

1:23taki obiekt konfiguracyjny.

1:24Przekażę go w ten sposób rozwinę, żeby było bardziej czytelne

1:28i tutaj podajemy coś takiego jak method i string POST.

1:32To informuje tę funkcję, że wysyłamy to takim właśnie zapytaniem POST.

1:36Następnie musimy przekazać body, czyli to co chcemy wysłać właśnie na ten

1:41serwer. I my chcemy tam wysłać JSON, ale skąd go weźmiemy?

1:45Moglibyśmy oczywiście utworzyć formularz,

1:47pokazywałem Ci w tym kursie jak możemy z

1:49użyciem JavaScriptu odczytywać pola formularza, ale żeby tego przykładu nie

1:53komplikować, to po prostu ręcznie utworzę tutaj obiekt,

1:57który nazwę post jak wpis i przypiszemy mu tutaj title Nowy wpis i następnie body.

2:04Bo to są te dane, których oczekuje ten

2:06serwer title i body. Więc to jest istotne, żeby to po prostu tam przekazać.

2:10Aczkolwiek do innego serwera, gdybyś wysyłał np.

2:13formularz kontaktowy będziesz zawsze wysyłał takie dane jakich serwer oczekuje,

2:17albo Ty będziesz go tworzył, albo back end developer powie Ci co tam masz wysłać.

2:21Więc tutaj wpiszemy treść nowego wpisu.

2:25I teraz wyobraź sobie, że te dane pobrał byś po prostu z formularza.

2:28Pokazywałem Ci jak z użyciem właściwości value na danym polu pobrać to co ktoś

2:32wpisał, no i na podstawie tego co byś pobrał utworzył byś dokładnie taki obiekt.

2:36I teraz ten obiekt chcemy wysłać, ale nie

2:38możemy go tutaj po prostu tak podstawić dlatego, że musimy do serwera wysłać

2:42JSON a to nie jest JSON tylko obiekt.

2:45Pokazywałem Ci jak możemy obiekty zamienić na JSON, czyli tak naprawdę na string.

2:51Robimy to w języku JavaScript

2:53za pomocą JSON.stringify i przekazujemy tam obiekt.

2:57Cały ten zapis zwróci nam string, który

2:59będzie reprezentował te dane i funkcja fetch

3:02właśnie ten string w takiej właściwości body wyśle do serwera.

3:06I jest jeszcze jedna rzecz, którą możemy

3:08zrobić, ale nie musimy, bo w tym przypadku to zadziała.

3:10Ale jeżeli wysyłamy JSON, to dobrze jest

3:13ustawić nagłówek zapytania, który informuje serwer o jakim typie danych

3:18te dane tam wysyłamy. I możemy to dodać za pomocą takiego specjalnego tutaj klucza w tym

3:22obiekcie, który nazywa się headers i dodamy nagłówek, który nazywa się Content-Type.

3:28Czyli muszę go podać w cudzysłowie tutaj,

3:30żeby z tego minusa móc skorzystać i jest to application/json.

3:35Jeżeli to są dla Ciebie nowe rzeczy, to

3:37one nie wynikają z tego, że nie rozumiesz jak działa JavaScript, tylko z tego, że

3:41musisz doszkolić się w samym protokole HTTP.

3:43Najlepiej jest to zrobić zerkając sobie tutaj do panelu Network i patrząc jak

3:47wyglądają różne zapytania, ale oczywiście to też przyjdzie z czasem.

3:51Nie musisz wszystkiego wiedzieć od razu.

3:53Ja chcę Ci pokazać, że nagłówki po prostu też możemy ustawiać.

3:57OK, no i jeżeli zrobimy coś takiego, to ta funkcja wyśle nam to do serwera,

4:01ale zazwyczaj jest tak, że serwer wtedy

4:02kiedy przyjmie takie dane, coś nam zwraca np.

4:05identyfikator nowo utworzonego wpisu itd.

4:10Więc będziemy oczywiście też chcieli sobie

4:11przechwycić odpowiedź z serwera i zrobimy to w tym bloku then.

4:15Zobaczymy co tam się znajdzie.

4:18Ja wiem, że ten serwer zwraca w response

4:21również JSON, więc będziemy go chcieli sparsować

4:23i w lekcji poprzedniej wstawiałem tutaj funkcję taką zwykłą, ale dla skrótu możemy

4:28tutaj wstawić funkcję strzałkową, która po prostu zwróci nam res.json

4:31To działa identycznie, ale jak widzisz to jest dużo krótszy zapis.

4:35W razie czego wróć do lekcji o funkcjach strzałkowych,

4:38dlaczego to tak wygląda.

4:39Więc albo zwykłe function i całą funkcję tu podstawiasz taką klasyczną albo funkcję

4:43strzałkową. Czyli to co serwer nam odeśle zostanie sparsowane na JSON, bo serwer

4:48odsyła nam po prostu tekst i następnie w kolejnym then już ten JSON

4:53tutaj otrzymamy. Nazwę sobie tak stałą json, ale możesz ją

4:56nazwać jak chcesz i będę chciał zrobić w console.log

5:00po prostu tenże JSON.

5:01A więc zobaczmy, wyślijmy ten post do serwera i zobaczymy co serwer nam odpowie.

5:06Jestem w panelu Network, klikam wyślij dane.

5:09Widzimy, że zapytanie do serwera wyszło i następnie serwer

5:14coś nam odesłał. Tutaj możemy to zobaczyć w Response,

5:18odesłał nam coś takiego, to co tam wysłaliśmy, czyli title

5:20Nowy wpis, treść nowego wpisu i nadał naszemu wpisowi nowe id.

5:25Jak wspomniałem jest to tylko taki serwer

5:26testowy, ale pozwala nam wysłać właśnie takie zapytanie o typie POST

5:30co widzimy w tym miejscu pod ten adres, a

5:33na dole możemy zobaczyć co my do tego serwera tak naprawdę wysłaliśmy.

5:36Jest to tutaj fajnie pokazane jako request payload.

5:40W prawdziwym życiu zrobiłbyś tutaj jakiś formularz, do którego można coś wpisać, no i

5:44można by było dodatkowo zrobić tak, że jak ktoś kliknie w ten przycisk to ustawimy mu

5:47atrybut disabled albo za pomocą setAttribute, albo takim skrótem disabled

5:53na true, ten przycisk wtedy zostanie jakby wyłączony,

5:56wyśle się to do serwera i dopiero jak

5:58otrzymamy odpowiedź czyli po jakimś czasie, bo to wszystko działa

6:01asynchronicznie będziemy mogli powiedzieć button.textContent np.

6:09Wysłano i moglibyśmy tutaj ten przycisk

6:11odblokować, czyli napisać disabled false, ale ja nie chcę go odblokowywać,

6:15chcę żeby on był zablokowany.

6:16Chodzi o to, że jak ktoś kliknie dwa razy szybko to byśmy wysłali dwa zapytania.

6:20Ja chcę po kliknięciu w przycisk go

6:21zablokować, więc kolejne kliknięcie nie wywoła już tej funkcji.

6:25Wysłać zapytanie do serwera i jak

6:27otrzymamy odpowiedź to zmienić jego tekst na wysłano.

6:29Wtedy moglibyśmy go również odblokować

6:31ustawiając to disabled gdzieś w tym miejscu na false i jeszcze raz wysłać

6:35dane, ale ja nie chcę pozwalać na ich ponowne wysyłanie.

6:37Zobaczmy jak to zadziała.

6:39Otrzymaliśmy komunikat z powrotem i mamy tutaj wysłano i

6:43przycisku już nie da się kliknąć, bo go nie odblokowałem.

6:46Asynchroniczność, o której wspomniałem

6:48przejawia się w tym, że ten kod nie wykonuje się tak do końca z góry na dół.

6:52Czyli jak byśmy tutaj zrobili np.

6:53console.log Przed wysłaniem

6:56I to się nie tyczy tylko tego zapytania

6:58POST, ale to co było w lekcji poprzedniej

6:59również, zawsze jak używasz fetch wyświetlimy Przed wysłaniem.

7:03Tutaj byśmy powiedzieli

7:05Po wysłaniu i myślimy, że to się wykona później niż to miejsce,

7:11ale tak nie jest. Tutaj napiszemy sobie console.log

7:14Właśnie wysłałem.

7:18Zobacz, no i prześledźmy jak te console.logi po prostu będą wyglądać.

7:22A więc zobaczymy przed wysłaniem, po wysłaniu i dopiero Właśnie wysłałem.

7:25Czyli asynchroniczność takich zapytań polega na tym, że wykonuje się ten kod.

7:29Tutaj ustawiamy to zapytanie, ono jest wysyłane, ale niczego nam nie blokuje,

7:33dalszy kod jest wykonywany aż wykona się cały nasz skrypt.

7:36I kiedy można powiedzieć, że otrzymamy odpowiedź z serwera to wracamy do tej

7:40funkcji, którą tutaj przekazaliśmy i dopiero wtedy ona się wykonuje.

7:44Więc mam nadzieję, że to jest jasne, że

7:45chociaż jakby z góry na dół ten kod się wykonuje, to nie czekamy z wykonaniem

7:49kolejnej linijki do czasu aż wszystko się z serwera pobierze, tylko po prostu

7:53kontynuujemy wykonywanie kodu i nie blokujemy niczego na stronie.