React: Czym jest Axios

16.8.x

0:00Cześć, w tej lekcji przechodzimy do takiej typowo brudnej roboty i

0:04zaczynamy pracę z backend'em, więc pierwsze co musimy zainstalować w

0:08naszym projekcie to axios. To jest biblioteka, która

0:12pozwala nam na bardzo łatwe i bardzo przyjemne łączenie się właśnie

0:16poprzez protokoły http z naszym backend'em i teraz pierwsze

0:20co robimy to oczywiście instalujemy axios w naszym

0:24projekcie, okej i skoro nasz axios

0:28został zainstalowany to teraz stwórzmy sobie widok login. Żeby

0:33to zrobić oczywiście w folderze views musimy sobie stworzyć login

0:37js, pobierzemy też sobie komponenty

0:41z formik'a, okej, stworzyliśmy sobie taki podstawowy widok

0:46logowania. Teraz możemy go wykorzystać w naszym root dodając

0:51po prostu kolejno ścieżkę. Tutaj

0:57może lepiej jak faktycznie nazwiemy to login page i jeszcze

1:03w naszym pliku routes, musimy sobie zaktualizować, a nie

1:08tutaj mam login. Okej, czyli jeśli jesteśmy na login, to to

1:13się nam wyświetli. Tylko tutaj musimy jeszcze zrobić jakąś

1:17funkcję. Na razie zróbmy sobie konsol log'a i tutaj

1:26ten JSX musi być jako jedno dziecko, więc wrzucimy to sobie

1:30we fragment i teraz jak wejdziemy sobie do

1:35tego widoku, to faktycznie, mamy nasz form. Tutaj

1:40zamiast fragmentu, opleciemy to sobie w form i teraz jeśli tutaj

1:44coś wpiszę, a tutaj musi być email. Może bez

1:48sensu, że ten email tutaj dałem. Dajmy tekst, bo ten login wcale nie musi być mail'em w

1:52naszej aplikacji. Teraz jak wpiszę sobie roman raz

1:57dwa trzy raz dwa trzy, to dostajemy hello, więc wszystko się zgadza

2:01i teraz zanim zaczniemy jakiekolwiek akcje pisać w axios'ie

2:06ale w redux'ie, to chcę ci pokazać jak axios działa tak po prostu, bez

2:10żadnych redux'ów, ponieważ to dość mocno skomplikuje nam sprawę, więc

2:14zaimportuje teraz tutaj sobie Axsios'a i po

2:22wykonaniu submit chciałbym, żeby on właśnie zwrócił nam

2:26tutaj akcję,

2:30która uderzy do naszego API. W tym przypadku chcę żeby to był

2:34login user, ponieważ mamy już takiego użytkownika jak my user

2:38password raz dwa trzy, więc chcę, żeby uderzył do takiego

2:43endpoint'a. Kopiuje sobie link do tego i tworzę axios post. Podaję

2:56tutaj nasz. Podaję tutaj nasz endpoint

3:00i teraz jak sobie zerkniemy do axios'a to on

3:04jako drugi argument przyjmuje obiekt z danymi, więc

3:08my też to zrobimy tutaj onsubmit przyjmuje values,

3:12które możemy wrzucić właśnie w to miejsce, values, właściwie

3:17możemy sobie zdestrukturyzować i teraz tak operacja w axios'ie zwraca

3:21nam promise, więc jeśli chcemy pójść dalej po tym jak już zostaniemy

3:25zalogowani, to musimy wpisać then. Natomiast, jeśli

3:30chcemy sprawdzić co się stanie, jeśli nie zostaniemy zalogowani, bo na przykład dostaliśmy

3:34jakiś błąd, to tutaj również możemy sobie to złapać, właśnie catch'em. Jeśli

3:39nie znasz konstrukcji promise'ów to, to jest bardzo ważne i podstawowa

3:43rzecz, więc jeśli jeszcze do tego nie dotarłeś to warto się zatrzymać teraz

3:48w tym kursie i przestudiować sobie jak działają promise'y w JavaScript'ie, ponieważ

3:52nie jest to składnia React'a, jest to składnia JavaScript'u i trzeba to znać. Tutaj

3:58dodam jeszcze http, bo zapomniałem. Teraz to jest prawidłowy

4:02URL i jeśli udało nam się wszystko połączyć tak jak trzeba, to po

4:06wpisaniu my user i password raz dwa trzy, dostaniemy

4:11komunikat login successful i tak się właśnie stało,

4:15backend nam odpowiedział, że wszystko jest git, teraz jeśli bym

4:19wpisał login my user, ale password raz dwa

4:23trzy cztery, to dostanę błąd. Dostałem

4:29403 forbidden, czyli login jest nieprawidłowy i w

4:34ten sposób właśnie działa axios, w ten sposób będziemy budować nasze zapytania.