• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Vue jak radzić sobie z asynchronicznością API

VPS Starter Arubacloud
0 głosów
408 wizyt
pytanie zadane 28 czerwca 2019 w JavaScript przez kordix Gaduła (3,910 p.)
Ktoś z was może chce rzucić okiem na ten codepen:

https://codepen.io/kordix/pen/MMropg

Powiedzmy że chcę dodać jakieś dane do obiektu pobranego z API.

Tutaj to nie zadziała ponieważ ze względu na to że fetch działa asynchronicznie to funkcja uruchamia się przed pobraniem danych.

Myślałem że beforecreate w vue załatwi sprawę, niestety to nie działa tak jak się spodziewałem, jeśli tam wstawimy funkcję pobierająca z api to wcale nie uruchomi się szybciej niż metody w mounted.

Teraz jedyne opcje jakie widze to robić jakieś timeouty albo eventy aby modyfikacje danych odbywały się po pobraniu ich z api, albo robić te modyfikacje w kolejnym callbacku w fetch, co jest też dość karkołomne i irytujące.

Nikt z was nie miał tego typu problemów przy pobieraniu danych z API? Może jest na to w ogóle jakiś mądrzejszy sposób?

3 odpowiedzi

+1 głos
odpowiedź 29 czerwca 2019 przez BT101 Stary wyjadacz (12,540 p.)

Nie bardzo rozumiem twój problem. W hooku created robisz tego calla i w `.then` modyfikujesz sobie co tam potrzebujesz. Przed lub po zapisaniu do data.

Tutaj to nie zadziała ponieważ ze względu na to że fetch działa asynchronicznie to funkcja uruchamia się przed pobraniem danych.


Czyli, że jakaś twoja metoda uruchamia się zanim fetch zakończy działanie, no ale przecież po jest .then żeby coś zrobić z response PO zakończeniu backend calla.


Jeśli dobrze zrozumiałem to ty chcesz w 1 hooku (nazwijmy go A), który jest wcześniej w lifecycle vue zrobić calla a w innym hooku (nazwijmy B), który jest później w lifecycle vue modyfikować dane, które pobrałeś w A ale to, że w lifecycle vue A jest przed B nie oznacza, że ten call się skończy zanim B zostanie wywołane.

0 głosów
odpowiedź 29 czerwca 2019 przez hans001 Obywatel (1,150 p.)
0 głosów
odpowiedź 29 czerwca 2019 przez kordix Gaduła (3,910 p.)
edycja 29 czerwca 2019 przez kordix

Chodziło mi o to że chciałem najpierw wszystkie dane wrzucić do jednego wora i wtedy np. wszystkim obiektom dodać jakiś parametr. Może na przykład chciałbym pobrać dane z różnych api. Tak to muszę każde dane traktować osobno w callbacku then, czy wywoływać wiele razy tą samą operację dla każdego źródła api, nawet jeśli ta operacja jest identyczna dla wszystkich obiektów które pobieram.

Dla potomnych: tak to można przerobić żeby to działało synchronicznie:

getFromApi: async function()  {
        const request = async () => {
            const response = await fetch(`/api/wzory`);
            const json = await response.json();
            json.map((el)=>this.dane.push(el));
        }
        await request();
      }

await this.getFromApi();

Chociaż to też może nie jest najlepsza metodologia

P.S No tak, w sumie mógłbym wszystkie dane pobrać w kolejnych then'ach i na końcowym then je obrabiać, jak kolega mówi... Może faktycznie za dużo kombinuję

 

 

 

komentarz 29 czerwca 2019 przez ShiroUmizake Nałogowiec (46,300 p.)

Jeśli chcesz, wszystkie dane wpakować naraz do aplikacji. To możesz wywołać twój serwis poza instancją Vue, w którym tworzysz obiekt Promise. który ląduje na kolejkę (arraykę z promisami), gdzie następnie wyłowujesz promises.all(i tu inicjujesz intancje Vue, przekazując do niej pobrane dane).

 

Przykładowa implementacja:

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

komentarz 30 czerwca 2019 przez BT101 Stary wyjadacz (12,540 p.)

P.S No tak, w sumie mógłbym wszystkie dane pobrać w kolejnych then'ach i na końcowym then je obrabiać, jak kolega mówi... Może faktycznie za dużo kombinuję

Takie zagnieżdżanie w .then jest brzydkie i unikaj tego. Lepiej napisać 3 funckje, które returnują promise i użyć promise.all tak jak kolega napisał wyżej.

 

Podobne pytania

0 głosów
1 odpowiedź 122 wizyt
pytanie zadane 18 października 2018 w JavaScript przez Gambr Dyskutant (7,530 p.)
0 głosów
1 odpowiedź 256 wizyt
pytanie zadane 15 sierpnia 2018 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)
0 głosów
1 odpowiedź 436 wizyt
pytanie zadane 30 czerwca 2018 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...