JS Fetch() Api NBP

pytanie zadane 27 listopada 2019 w JavaScript przez mariozz Nowicjusz (140 p.)

Witam. Próbuję od kilku dni skończyć kalkulator walut w JS bazujący na kursach z NBP. Czy ktoś mógłby mi pomóc i wytłumaczyć dlaczego poniższy skrypt zwraca w konsoli komunikat "Liczba to [object Promise]" zamiast faktycznego kursu? Proszę o pomoc!

const usd_url = 'https://api.nbp.pl/api/exchangerates/rates/a/usd/';

async function getCurrency(){
fetch(usd_url)
  .then(response => response.json())
  .then(json =>  {
   plnusd = json.rates[0].mid;
  return plnusd;
  })       
}
xxx = getCurrency();
console.log('waluta to '+xxx)

2 odpowiedzi

odpowiedź 27 listopada 2019 przez adrian17 Ekspert (344,860 p.)

Ogólnie trochę tutaj pomieszałeś ;)

Po pierwsze, w getCurrency, albo używasz .then, albo robisz funkcję async i używasz await - nie ma potrzeby obu.

async function getCurrency() {
  let response = await fetch(usd_url);
  let json = await response.json();
  return json.rates[0].mid;
}

Po drugie, getCurrency jest asynchroniczne, więc jego użycie też powinno być asynchroniczne. Tak więc albo:

async function run() {
  let xxx = await getCurrency();
  console.log(`waluta to ${xxx}`);
}
run()

Albo

getCurrency().then(xxx => console.log(`waluta to ${xxx}`));

komentarz 27 listopada 2019 przez mariozz Nowicjusz (140 p.)

Dziękuję za szybką odpowiedź :)

Mam taki kod:

const usd_url = 'https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json';

async function getCurrency() {
  let response = await fetch(usd_url);
  let json = await response.json();
  return json.rates[0].mid;
}
async function run() {
  let xxx = await getCurrency();
  console.log(`waluta to ${xxx}`);
}
run()

console.log('waluta to to '+xxx);

Skrypt działa. Pytanie - co zrobić żeby przekazać zmienną xxx poza funkcje, tak żeby ostatnia linijka zwróciła mi poprawny wynik? Sorry za głupie pytanie, ale dopiero zaczynam przygodę ;P

komentarz 27 listopada 2019 przez adrian17 Ekspert (344,860 p.)

O to chodzi z asynchronicznymi funkcjami, że nie możesz. run() zwraca natychmiast, a być może fetch() pobierze JSONa po kilku minutach, bo serwer NBP był wolny. `xxx` można użyć dopiero gdy getCurrency() się dokończy, co można zapisać tak jak napisałem wyżej - .then() lub await.

komentarz 27 listopada 2019 przez mariozz Nowicjusz (140 p.)

Zaczynam rozumieć :) Dziękuję bardzo! Jesteś moim bohaterem!

odpowiedź 27 listopada 2019 przez mati2762 Mądrala (5,510 p.)

Po pierwsze to nie jest JSON tylko XML

komentarz 27 listopada 2019 przez mati2762 Mądrala (5,510 p.)

użyj https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json

komentarz 27 listopada 2019 przez adrian17 Ekspert (344,860 p.)

W zależności od headera Accept, ten sam URL zwraca JSONa lub XML. Nie trzeba nawet nic dopisywać do URLa.

komentarz 27 listopada 2019 przez mati2762 Mądrala (5,510 p.)

Najpierw to trzeba ustawić tego headera

komentarz 27 listopada 2019 przez adrian17 Ekspert (344,860 p.)

Właśnie nie trzeba :)

curl https://api.nbp.pl/api/exchangerates/rates/a/usd/
{"table":"A","currency":"dolar amerykański","code":"USD","rates":[{"no":"229/A/NBP/2019","effectiveDate":"2019-11-27","mid":3.9154}]}

W przeglądarce widzisz XML, bo przeglądarka wysyła dodatkowe nagłówki.