[Javascript] fetch API

 이전 포스팅에서 weather API 를 사용했었습니다. weather api 를 활용하기 위해서는 fetch 를 사용합니다.,

 

fetch 는 서버와의 비동기 요청 방식으로 Ajax 방식 중 하나로써 가장 최신기능을 제공합니다. 또한 fetch API 는 Promise 객체를 기반으로 하고 있습니다.

 

 fetch 는 javascript 의 오픈 api 로 javascript 를 사용해 웹페이지를 직접 열지않도고 서버를 통해 원하는 리소스를 얻어올 수 있는 기능을 해줍니다

 

 fetch 의 장점은 네트워크 리소스를 비동기적으로 가져올 수 있다는 것과 http와 관련된 다른 개념들을 한 곳에 모아서 정의할 수 있는 논리적인 저장소가 제공된다는 점입니다.

 

 - 비동기적으로 가져온다는 것은, 요청과 동시에 결과를 가져오지 않는다라는 의미입니다. 반대로 동기적으로 가져온다라는 것은, 요청과 동시에 결과를 가져온다는 의미입니다.

 

 - 동기적으로 가져온다는 것은 우리가 리소스를 가져오기 위해 서버에 요청을 했을 때 서버가 요청에 결과를 내줄때까지 계속 기다려야 한다는 것입니다. 즉, 요청이 계속되었을 때 결과가 나오기 전까지 다른 작업을 하지 못합니다.

 

 

 비동기적으로 가져온다는 것은 우리가 리소스를 가져오기 위해 서버에 요청을 했을 때 서버가 요청에 결과를 내줄때까지 기다리지 않아도 된다는 것입니다. 즉, 요청 이후 결과가 나오기 전이나 후나 다른 작업을 할 수 있는 효율적인 장점이 있습니다.

 

---

Promise 란??

 

Promise 는 javascript 비동기처리에 사용되는 객체입니다.

 

Promise 는 서버에서 받아온 데이터를 화면으로 표시할 때 사용합니다.

(weather api 에서 날씨정보를 가져와서 웹페이지에 표시하는게 이 때문입니다.

 

이 객체에 담긴 뜻은 여러 의미를 가지고 있습니다.

 

Promise 는 단어의미 그대로 "약속" 이란 의미이며. 단어 안에 Promise 객체의 특성을 알 수 있습니다.

 

1. 약속은 어떤일에 대한 보장이지만 약속은 지켜질 수도 안지켜질 수도 있다.

2. 약속이 지켜질 경우 그에 대한 결과를 얻을 수 있다

3. 약속이 지켜지지 않을 경우 그에 대한 이유와 해결책이 있다.

4. 약속에 대한 답변을 받을 수 없는 경우도 있으므로, 그런 경우 '시간경과 후 답변이 없으면 결렬된다' 라는 조건을 줄 수 있다.

 

 

[Promise states]

 

pending(대기)	fulfilled(이행)	rejected(실패)
완료하거나 실패하지도 않은 상태	비동기작업이 성공한 상태	비동기작업이 실패한 상태
-	promise.then() 로 처리결과값 받음	promise.catch() 로 실패이유 알 수 있음.
	return 은 promise 객체	return 은 promise 객체

fetch api 로직방향

 

---

fetch API 기본 사용법.

fetch("url 주소")
.then(Response => Response.json())
.then(data => console.log(data))

weather API (일부) + fetch API 

function onGeoOk(position) { // geolocation object 이용
    const lat = position.coords.latitude; // 위도
    const lng = position.coords.longitude; // 경도
    console.log(lat);
    const link = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}`;
    fetch(link)
    .then(Response => Response.json())
    .then(data => {
            console.log(data); // 요소 확인
            const city = document.querySelector("#infoContainer span:nth-child(1)");
            const weather = document.querySelector("#infoContainer span:nth-child(2)");
            weather.innerText = `${data.weather[0].main} / ${kelvinToCelsius(data.main.temp)}℃`;
            city.innerText = `${data.sys.country} - ${data.name}`;
        });
}