Nuxt.js: Async data

0:00W poprzedniej lekcji dowiedzieliśmy się

0:01jak korzystać z Excela, czyli z domyślnego Stora dla DAX.

0:06I tutaj wyświetlimy sobie taką informację, że mamy zmodyfikowany nasz stan i

0:12możemy z niego normalnie korzystać w sposób aktywny.

0:17I w dowolnym miejscu naszej aplikacji go modyfikować.

0:21Ja na razie zostawię tutaj te fragmenty

0:23kodu i przejdę do tematu tej lekcji, czyli do async data.

0:27Tak jak wspominałem na początku tego

0:29działu, JavaScript może być wykonywane po stronie serwera nawet w komponentach View.

0:37I do tego właśnie służy passing data.

0:39Async data jest taka

0:41predefiniowane metoda, która rozszerza domyślne metody View i tutaj async data.

0:49No to będziemy mogli wywoływać nasz kod właśnie w tym miejscu.

0:54Ta metoda otrzymuje tutaj jako parametr obiekt z różnymi właściwościami.

1:02I tej właściwości jest tam naprawdę sporo.

1:04Jest tam cały dostęp do routingu.

1:06To się nazywa context.

1:08Jeżeli wejdziemy tutaj w dokumentację i wpiszemy context.

1:14No to widzimy naprawdę dużo różnych możliwości.

1:17Mamy dostęp do App Store, czyli właśnie dobiłem do naszego obecnego routera, do

1:23parametrów zmiennych konfiguracyjnych, zmiennych środowiskowych itd.

1:28Itd. Jest tego naprawdę całkiem sporo.

1:30Możemy sobie jeszcze tak dla pewności cały config tutaj przypiszemy

1:36console log config i zauważyć, że faktycznie wypisze się to nam tutaj

1:43w serwerze w momencie kiedy wejdziemy na naszą stronę.

1:46Ja tutaj odświeżę.

1:48I po odświeżeniu mamy tutaj pełny dostęp do tego co znajduje się w tym configu.

1:54I jak widzisz jest tutaj też Axis, a jest tutaj Access.

1:56Dlatego ponieważ w naszym next config jest.

1:59Zrobiliśmy sobie tutaj moduł i on właśnie rozszerza m.in. kontekst w async data i

2:04ten kontekst jest też dostępne w innych metodach i funkcjach.

2:08W związku z czym co możemy z tym zrobić?

2:11Jako że mamy tutaj tak dużo możliwości

2:13jest tor, jest Axis i możemy robić normalne zapytania HTTP.

2:19Daje to nam naprawdę dużo możliwości, ale co dalej z tymi danymi?

2:23Więc zróbmy na początku taki test.

2:26Że pobierzemy sobie dane.

2:29Ze stara czyli nasz egzamin state.

2:35Piszemy sobie tutaj vario config kropka store.

2:39Kropka state.

2:40Kropka example.

2:44Stats wypiszę tutaj.

2:46Zobaczymy co się stanie, czy zadziała czy nie.

2:50Ponownie będziemy musieli sobie odświeżyć

2:52naszego auta i zobaczyć co się dzieje tutaj w konsoli.

2:56Więc zapisaliśmy odświeżamy roota.

3:00Wracamy z powrotem.

3:02I na sam dole i na samym dole faktycznie widzimy większość.

3:09No i skoro dobraliśmy się tutaj do tych naszych danych inwestora

3:13i faktycznie jesteśmy w stanie stwierdzić, że to wykonuje fabrykanci,

3:17ponieważ jest to tutaj w konsoli na to, co można zrobić z tym dalej.

3:20Otóż kolejną cechą async data jest to, że jeżeli coś zwrócimy z tej funkcji np.

3:24właśnie te informacje ze store np.

3:27from ASP 2k i tutaj w samym Mario

3:33zapiszemy, to ta wartość, ten obiekt zostanie przypisany

3:38do naszego data do data naszego komponentu.

3:41Czyli w tym momencie jesteśmy w stanie

3:44odwołać się do tej wartości, do tego statusu poprzez data.

3:49To znaczy jeżeli zrobimy po prostu from

3:51async data to mamy bezpośredni dostęp do wartości tego data.

3:57Tutaj nie musimy tego niczym poprzedzać.

3:58Zapiszmy, zobaczmy co się stanie.

4:01I faktycznie mamy naszą informację przekazaną, to znaczy, że nasze async data

4:07zadziałało i pobraliśmy dane ze Store i przekazaliśmy je dalej do naszego data.

4:13Jest to całkiem przydatne, jeżeli robimy coś dosyć specyficznego dla danego PG.

4:18Możemy tak czy siak rozwiązać to inaczej

4:20poza komponentem poprzez właśnie routing middleware.

4:24Ale to co możemy zrobić jeszcze i to chyba

4:26na tym tutaj skupimy się w tym momencie to zrobić.

4:32Zapytanie do naszego API, które wcześniej przygotowaliśmy.

4:35To znaczy jeśli zrobimy sobie connect, akcja równa się config.

4:42Akcja jest oczywiście.

4:46Moglibyśmy tutaj zrobić District String

4:47albo po prostu pobrać właściwości, na których nam zależy.

4:52No to mamy tutaj dostęp do SAP już w kontekście Nexta.

4:57Tzn. Będziemy mieli domyślnie teraz, których

4:59potrzebujemy w dobrym miejscu jeśli zrobimy sobie konsolowe akcje ASP.NET.

5:07I tutaj przekażemy nasz pakiet.

5:09Czyli to było Epi Wiki.

5:14Powiedzmy.

5:14Content i tutaj page ID, czyli w naszym przypadku to będzie Janusz.

5:2220.

5:23Korczak.

5:26I zrobimy sobie tutaj łata.

5:28Ale aby użyć łata musimy zmienić funkcję na funkcję asynchroniczne.

5:32Więc to jest taka śmieszna nazwa async.

5:34A Segritta, jako że to jest nazwa funkcji no tak, to

5:39musi być i zapiszemy to to się przebudowuje.

5:43Odświeżamy ponownie, choć Mateusz tego nie robi.

5:47Request status, Status, kod 404.

5:52I tutaj po prostu chyba brakowało.

5:57Odpowiedniej ścieżki w bucie.

5:58Zobaczmy Viki tutaj page.

6:00Dobrze więc Viki content.

6:08Także zapisujemy ponownie.

6:10Jeszcze jeden refresh.

6:14Prawdopodobnie powinniśmy zrobić tutaj czekać, ażeby cała strona nam się nie

6:17wracała w momencie, kiedy zapytanie nie przeszło.

6:20Coś jest jeszcze nie tak.

6:21Zróbmy request ręcznie.

6:23Localhost 8000 API wiki content page Janusz 20 Core Hack.

6:33I faktycznie tam zadziałało.

6:35W związku z czym

6:36dochodzę do wniosku, jeżeli dobrze myślę i nie zrobiłem żadnej literówki,

6:42że jednak akcja musi mieć tutaj jakiś inny kontekst.

6:47I na to wygląda, że tak jest.

6:48Międzyczasie zróbmy sobie tutaj.

6:50Aha.

7:01Przekażemy go tutaj.

7:04Tutaj chwilową zmienną test.

7:08Będzie domyślnie.

7:09Tutaj przypiszemy do testu i console.log.

7:13Test zapiszemy.

7:16Odświeżamy, odświeżamy.

7:21I możemy zaraz zobaczyć o co chodzi z tym statkiem.

7:25Faktycznie jest dwa razy na oczy i dalej ten request nie działa.

7:28Zobaczmy Next axis.

7:33Co jest pokazane w dokumentacji.

7:37Dosyć.

7:41Akcja z GET.

7:43IPN spytał.

7:45Ciekawy jestem, czy to jest kwestia tego, że tutaj nie ma dolara przed gettem.

7:49Napiszmy to i zobaczmy.

7:52Byłoby to dosyć dziwne, ale możliwe, że tak jest.

7:56Tam jest.

7:59Jeszcze zobaczymy. Dalej na wiosce ostrze.

8:03Dolar fiat.

8:06Axis Plugin Dollar Methods to gesty data.

8:13Czyli tutaj będziemy mieli bezpośredni dostęp do danych, które zostaną zwrócone,

8:17więc tak czy siak zostaniemy przy targecie.

8:20Ale mimo wszystko nie zadziałał nam tutaj AX.

8:26Pique z jakiegoś powodu.

8:30Czy trzeba to jakoś skonfigurować?

8:32Wydaje mi się, że nie.

8:34Więc wróćmy jeszcze raz może do tego usage.

8:38Wydaje mi się, że korzystamy z tej samej paczki.

8:41Możemy się jeszcze upewnić, ale jest tutaj widoczne to, że mamy dostęp do.

8:49Tych informacji w async data.

8:54Spróbujmy w sumie po prostu zrobić request

8:56bezpośrednio do naszego serwera localhost 8000.

9:02Tutaj po przejdziemy to przez HTTP.

9:05Zapiszmy.

9:07Być może domyślnie nie wykrywa. Naszego serwera.

9:12Dalej jest null.

9:16Upewnijmy się, że korzystamy z tej samej wersji paczki.

9:20Czyli co będzie w pakiet?

9:21Czasem prawdopodobnie.

9:24Next Akcja to jest dokładnie to samo.

9:28Extra jest akcja z.

9:33W związku z czym ja tutaj postaram się dodać.

9:39Więc zobaczmy co się tutaj dzieje.

9:41Poprzez wejście skąd i gdzie jest.

9:44I tutaj na pewno będzie konfiguracja dla iOS a.

9:47I wydaje mi się, że możemy tutaj zdefiniować back URL bez.

9:54No chyba tak to będzie tak.

9:56A.

9:58I tutaj możemy wstawić sobie.

10:01Wykonywanie tego nie jest najlepszym

10:02sposobem, ale chcę tylko sprawdzić czy to faktycznie chodzi o to localhost 8000.

10:08Zapiszemy.

10:10Tutaj to nam się przebudowuje.

10:13Tutaj wyczyść.

10:15Naszą konsolę.

10:16Wejdźmy z powrotem do pliku, pozbądźmy się localhost 8000, stąd napiszemy.

10:24Odświeżamy.

10:27I dalej niestety jest null.

10:29Zobaczmy jak jest.

10:31To jest nasz kod.

10:33Odświeżamy.

10:36Tutaj powinniśmy oczywiście to echo wrzucić, a nie w kluczu.

10:42No niestety czasem takie rzeczy umkną.

10:45Tego typu błędy są najprostsze, a zarazem najbardziej trudne do spostrzeżenia.

10:50I faktycznie teraz to działa. Zastanawiam się co było problemem.

10:53Prawdopodobnie to, że nie wchodziliśmy w ogóle w tego Ch.

10:56Piotra i się nie wywracał, w związku z czym to nam działało.

10:59I wracając do głównego clue.

11:02To co możemy teraz z tym zrobić, to

11:04faktycznie wydać te dane na frontend, czyli się tego pozbędziemy.

11:09From data aktualizujemy bezpośrednimi request.

11:13Oczywiście powinniśmy tutaj zrobić jakiś error handling.

11:16No i teraz jak wejdziemy na naszą stronę to faktycznie widzimy te wszystkie dane

11:20widoczne na stronie z propagowane do data i tak naprawdę moglibyśmy już kontynuować

11:27propagowanie tych danych do naszych komponentów.

11:29Ale zanim to zrobimy, ja chciałbym pokazać jeszcze jeden sposób jak można przekazać

11:34dane z backendu na frontend w trakcie i wykorzystamy do tego routing middleware.