[J.....L]

#javascript #ajax #naukaprogramowania głupia sprawa. Django pod url'em /fakty wyrzuca mi JSON z linkami do galerii zdjęć. Ajax call do JSON'a jest wykonywany najpierw, po czym w kodzie poniżej wypisujemy cały array (fantastyka) oraz jedno ze zdjęć ma podmieniane źródło na link z tego array'u. Oczywiście Ajax jest asynchroniczny, więc w momencie gdy przeglądarka wykonywuje drugą część kodu , to dane nie zdążyły jeszcze wrócić do zmiennej var fantastyka i nic się nie dzieje. Zastanawiam się co teraz zrobić najlepiej. Ustawić jakieś window.onload() dla pozostałych funkcji albo dać im jakieś opóźnienie ?

[asdfghjkl]

@JungleJamPL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

[J.....L]

@asdfghjkl: dzięki, poczytam.

[asdfghjkl]

@JungleJamPL: mam jeszcze pytanie. dlaczego nie wykonasz tego kodu w funkcji success zaraz po tym jak dane przypisujesz do zmiennej fantastyka?

[Przegrywek123]

@JungleJamPL: promise i callback

[J.....L]

@asdfghjkl: faktycznie. Galeria zdjęć, którą projektuję ma 3 widoczne zdjęcia (reszta ładowana przy zrobieniu slide'u) więc spróbuję do tych img tagów od razu przyporządkować linki w funkcji success, potem będę myślał.

[J.....L]

@Przegrywek123: tak, racja.

[t.....k]

@JungleJamPL weź miej jakaś spójność w nazywaniu zmiennych i w formatowaniu kodu to jak nie sobie to chociaż innym ułatwisz tym pracę

[s.....R]

@JungleJamPL: użyawj jak człowiek async/await

[magic96]

@JungleJamPL: Ogólnie to taki jeden z większych mindfucków jeśli wchodzisz w JS, kiedy zauważasz, że kod napisany od góry do dołu nie wykonuje się w pożądanej kolejności. W tym języku jest podejście jak już wyżej wspomniano, callbackowe - reagujesz na zdarzenia, w tym wypadku jest to zdarzenie otrzymania odpowiedzi z serwera. Jak ogarnąć takie sekwencyjne działania i się nie zgubić? Najprościej z wykorzystaniem Promise właśnie, który występuje też w postaci lukru

[J.....L]

@magic96: promise świetnie się sprawdza. Tylko co najciekawsze funkcja .json() która normalizuje dane sama zwraca promise, więc żeby odzyskać dane z API trzeba dwa razy skorzystać z metody .then() Teraz chciałbym odebrać dane z kilku API , i na kazde API ma być generowana nowa instancja obiektu głównego. Chciałbym żeby w zależności od rodzaju API jaki był wywołany łapać dedykowany mu DIV w html'u co samo w sobie nie jest problemem,

[J.....L]

@magic96: po prostu pętla na każde API generuje nowy obiekt, i zastanawiam się czy i jak mogę generować dynamicznie nazwę dla nowej instancji obiektu, który generuję

[magic96]

@JungleJamPL: najfajniejszą i jedną z fundamentalnych cech promisów jest to, że można je chainować, tj. łączyć:

fetch('url').then(response => response.json()).then(jsonData => { console.log(jsonData); });

Trochę skomplikowałeś opis działania, keep it simple, stupid ( ͡° ͜ʖ ͡°)

[J.....L]

@magic96: ale to chainowanie to chyba w obrębie zapytań do jednego api ? chyba jeśli zmienia się url, to trzeba nowego fetcha wygenerować, no nie ?

[magic96]

@JungleJamPL:
odniosłem to do tego:

Tylko co najciekawsze funkcja .json() która normalizuje dane sama zwraca promise, więc żeby odzyskać dane z API trzeba dwa razy skorzystać z metody .then()