/* openweathermap api로 날씨를 가져오기 */
const latitude = ' ';
const longitude = ' ';
const API_KEY = ' ';
fetch(
`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`
)
.then(function(response){
console.log(response);
});
response에 있는 body는 보이지 않음.
이 body는 스트림이고, 데이터가 완전히 다 받아진 상태가 아님.
/* .json() 함수 사용 */
fetch(
`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`
)
.then(function(response){
return response.json(); // Promise 반환
})
.then(function(json){
console.log(json);
});
.json()은 Response 스트림을 가져와 스트림이 완료될 때까지 읽고,
다 읽은 body의 텍스트를 Promise 형태로 반환한다.
p.s. axios를 사용할 경우, .json() 단계를 넘어가도 된다.
axios는 json()과정을 자동으로 해주는 셈이다.
[추가 공부할 내용]
Priomise, axios
'Front > Java Script' 카테고리의 다른 글
Interface(인터페이스) - UI(User Interface) & API(Application Programming Interface) (0) | 2021.04.11 |
---|---|
모듈(Module) & 라이브러리 - 호스트 환경에 따른 모듈의 로드 (0) | 2021.04.11 |
HTML <canvas> 태그 - 초록색 사각형 그리기 (0) | 2021.03.28 |
스크립트의 로딩 방법 ( 내부 & 외부 자바스크립트 / async & defer ) (0) | 2021.03.14 |
Callback : Synchronuous(동기) / Asynchronuous(비동기) (0) | 2020.07.04 |