Łączenie z API pogodowym fetch

0

Witam. Tworze reactowy program do łączenia się z API pogodowym: https://openweathermap.org/current. Chciałbym się spytać o jakąś drobną radę w jaki sposób zwrócić te dane dalej.

let forecast = {
  searchWeather(city) {
    return fetch(`api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${apiKey}`)
    .then(response => {
      if (response.ok) {
        return response.json();
      }
    })
    .then(jsonResponse => {
      return [{
        id: jsonResponse.id,
        name: jsonResponse.name,
        temp: jsonResponse.main.temp,
        temp_max: jsonResponse.main.temp_max,
        temp_min: jsonResponse.main.temp_min
      }]
    })
  }
} 
0

Polecam ci użyć axios do requestów.
W sumie też robiłem apke pogodową, możesz sobie zerknąć w kod -> https://github.com/DorianMazur/WeatherNoAds-v2

1

Użycie axiosa raczej dużo nie zmieni dopóki dalej będę miał błąd a nie chcę też patrzeć na gotowe rozwiązanie. Bardziej mi chodzi o wskazanie błędu abym wiedział gdzie mam szukać.
Dodam jeszcze, że błąd to SyntaxError: Unexpected token < in JSON at position 0

0

Próbujesz parsować JSON i masz błąd bo to nie JSON.
Jakiś błąd w zapytaniu najpewniej. Sprawdź co zwraca zapytanie oraz czy klucz jest dobry.

I mylisz się, axios wiele zmienia :)

0

Klucz jest dobry a typ zwracanego zapytania to basic chyba, że to nie o to chodzi. A o axiosie poczytam w takim razie.

1
const forecast = {     //tu użyj const, bo bo forecast jest obiektem i zawsze nim pozostanie
  searchWeather(city) {
    return fetch(`api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${apiKey}`)
    .then(response => {
      if (!response.ok) {   //lepiej sprawdzać czy nie jest ok aby wiedzieć co się dzieje w razie błędów
        throw Error(response.statusText);  
      }
      return response.json();  //a gdy jest ok to zwracaj odpowiedź
    })
    .then(jsonResponse => {
      return [{
        id: jsonResponse.id,
        name: jsonResponse.name,
        temp: jsonResponse.main.temp,
        temp_max: jsonResponse.main.temp_max,
        temp_min: jsonResponse.main.temp_min
      }]
    })
    .catch(error => console.log(error));
  }
}

axios jest dużo lepszym wyborem bo obsługuje dużo więcej od fetch (timeouty, transformatory, interceptory i wiele wiele innych przydatnych rzeczy)

0

Dobra rozwiązanie znalazłem. Zapomniałem dodać http przed linkiem. Ale dzięki za wskazówki co do kodu i axiosa.

1 użytkowników online, w tym zalogowanych: 0, gości: 1