JS weather api, fetch api

https://openweathermap.org/api

Weather API - OpenWeatherMap

에 접속해서 로그인을 해준 뒤 프로필에 들어가서 api key를 복사해준다.

API call에 이렇게 나와있다.

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}

여기로 요청을 보내주면 api가 json으로 리턴해준다. 

아래와 같이 사용할 수 있다.

const API_KEY = 'API_KEY';
 
function onGeoOk(position) {
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
    fetch(url).then(response => response.json()).then(data => {
        const weather = document.querySelector('#weather span:first-child');
        const city = document.querySelector('#weather span:last-child');
        city.innerText = data.name;
        weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
    });
}
 
function onGeoError() {
    alert("Can't find you. No weather for you.");
}
 
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

아래와 같은 방식으로 사용해줄 수 있다.

geolocation으로 현재 위도와 경도를 받아왔고, 콜백 함수를 추가해줬다.

onGeoOk함수에서 url에 요청할 api의 url을 넣었다.

그다음 fetch를 사용했다.

 

fetch(url)은 서버에 url로 request를 보내고 response로 받는 역할을 수행한다. 

then 메소드는 앞에서 리턴한 값을 response 파라미터로 받아서 처리를 해준다. 

api가 response로 json을 리턴하기 때문에 json() 메소드를 사용해서 자바스크립트 객체로 변환해 줄 수 있다.

 

fetch는 기본적으로 promise 객체를 리턴한다. 

promise를 통해서 비동기 메소드에서 동기 메소드처럼 값을 리턴해줄 수 있다.

pending 상태에서 fulfilled 상태로 바뀌면 then으로 등록한 콜백 함수를 호출해줄 수 있다.

then 메소드가 다시 프로미스 객체를 리턴하기 때문에 뒤에 then은 더 써도 된다.