Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript] Pobranie wyników API z kilku podstron
NetPax
post 13.12.2017, 12:25:23
Post #1





Grupa: Zarejestrowani
Postów: 33
Pomógł: 1
Dołączył: 30.11.2011

Ostrzeżenie: (0%)
-----


Cześć,

chciałbym pobrać w JS dane z API podzielonego na "n-podstron" (całkowita liczba podstron nieznana/zmienna) tak żeby pokazać wszystko w jednej tabeli.

Myślałem żeby wywołać

fetch('https://api.github.com/orgs/someOrgs/repos?page=0')

w pętli do...while i podstawiać zmienną do ?page=pageCount

i łączyć tablice ale z tego co wiem nie da się w pętli (synchroniczna) wywoływać zapytań asynchronicznych.

Szukałem jakiegoś rozwiązania (Google/Stack) ale jakiegoś konkretnego nie znalazłem. Wywnioskowałem że można użyć Promise.all.

Macie może jakąś podpowiedź/linka?

Pozdrawiam

Go to the top of the page
+Quote Post
trueblue
post 13.12.2017, 12:56:05
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Zapytania w pętli wykonają się po kolei, ale odpowiedzi możesz uzyskać w różnej kolejności.
Otrzymując wynik danej podstrony wstawiaj go po prostu w blok przypisany do niego. Kolejność wtedy nie będzie mieć znaczenia.


--------------------
Go to the top of the page
+Quote Post
NetPax
post 17.12.2017, 12:00:49
Post #3





Grupa: Zarejestrowani
Postów: 33
Pomógł: 1
Dołączył: 30.11.2011

Ostrzeżenie: (0%)
-----


Hej,

zakodowałem coś takiego. Kod działa i spełnia swoją funkcję ale nie jestem w stanie stwierdzić czy to co on robi jest zaprogramowane w poprawny (optymalny) sposób. Wydaje mi się że nie i trzeba w ogóle inaczej podejść do tego zagadnienia tzn. iterowania po podstronach API JSON.

Moglibyście coś napisać o tym kodzie/podejściu?

  1. componentDidMount() {
  2. var dataUrl = 'https://api.github.com/orgs/angular/members';
  3. fetch(dataUrl)
  4. .then(response => response.headers.get('Link'))
  5. .then(pagesData => {
  6. var parsedPages = parse(pagesData);
  7. var pageIterations = parseInt(parsedPages.last.page, 10);
  8.  
  9. //pętla podstron JSON
  10.  
  11. var allMembersData = [];
  12. for (var i=1; i <= pageIterations; i++) {
  13. var membersUrl = 'https://api.github.com/orgs/angular/members?page='+i;
  14. fetch(membersUrl)
  15. .then(response => response.json())
  16. .then(membersData => {
  17. allMembersData = allMembersData.concat(membersData);
  18. this.setState({
  19. data: allMembersData
  20. });
  21. })
  22.  
  23. } //koniec pętla podstron JSON
  24. })
  25. }
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 20.04.2024 - 02:17