[JavaScript] fetch(<url>) : 자바스크립트에서 url 불러오기

https://mswait.tistory.com/85

[JavaScript] API란? Weather API를 이용한 현재 위치의 날씨 정보 불러오기

url 이라는 변수를 선언해 주고 Weahter API를 위한 요청을 담은 url을 백틱(`) 을 이용해 입력해줘야 하는 값들까지 입력을 마쳤을때

이를 콘솔창으로 출력해보면 잘작동하여 원하는 정보가 담긴 페이지로 이동이 됨을 알 수 있다.

콘솔창을 클릭하는 것이 아닌 이제 JavaScript에서 웹사이트로 들어가 정보를 가져 오게 하려면

fetch() 를 사용해야 한다.

fetch(url);

구글 크롬에서 마우스 우클릭 -> 하단의 '검사' .

네트워크 탭을 보면 우리가 뭔가를 했을때 인터넷 상에서 어떤 일이 일어나는지 보여준다.

 

누군가 url을 request 했다. JavaScript가 말이다.

fetch를 이용하면 직접 url로 갈 필요없이 JavaScript가 url을 불러준다.

 

main 안의 temp가 285.88 등 화씨로 표시 되고 있으니 이를 섭씨로 바꾸어 보자

API DOC에 그 방법이 적혀져 있다.

fetch(url)을 호출해줄 코드에도 이 부분을 추가해주고

fetch()는 서버의 응답을 기다리는 promise다. 바로 실행되는 것이 아니라 요청을 서버에게 보내면 그에 대한 응답이 올때까지 기다려야 함을 의미한다. 그래서 .then 을 사용하는 것이다.

response.json(), 응답의 json을 얻어낸다.(JSON 형식의 정보)

 fetch(url).then((response) =>
    response.json().then((data) => console.log(data.name, data.weather[0].main))
  );