2021_04_27

TIL - fetch를 이용해 웹에서 정보 가져오기

1. fetch를 이용해 웹에서 정보 가져오기

Fetch API를 MDN 문서에서 찾아보면 '리소스를 가져 오기위한 인터페이스를 제공하는 것' 이라고 소개되어있다. 쉽게 말하면 서버에 URL로 네트워크를 요청할 때 사용한다.

fetch API 사용하는 방법
먼저 fetch API는 아래와 같은 구조를 가지고있다.

fetch(url)
.then((response) => {
  // Code ...
})
.catch(function(error) {
  // Error
});

1) 통신을 성공했을 때

fetch(url)
.then(response => response.json())
.catch(function(error) {
  // Error
});

통신을 성공했을 땐 .then() 안의 코드를 실행한다.
response.json()을 해서 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달하는 역할을 한다.

2) 통신을 실패했을 때

fetch(url)
.then((response) => {
  // Code ...
})
.catch(function(error) {
  console.log(error)
});

통신에 실패했을 땐 .catch() 안의 코드를 실행한다.
error를 출력하여 에러의 원인을 알 수 있다.

예제로 확인하기!

문제) newsURL, weatherURL의 요청의 결과를 하나의 객체로 합쳐야 한다.

해결방법)
-- fetch API를 이용해서 데이터를 가져온다.
-- 가져온 데이터를 json 형태로 변환한다.
-- 새로운 객체에 넣는다.

var newsURL = 'http://localhost:5000/data/latestNews'; 
var weatherURL = 'http://localhost:5000/data/weather';
function getNewsAndWeather() {
  let obj = {}; //리턴할 새로운 객체를 선언한다.
  return fetch(newsURL) //fetch API를 사용한다.
  .then(response => response.json()) //받아온 응답을 JSON 형태로 변환한다.
  .then(news => {
    return fetch(weatherURL) //fetch API를 사용한다.
    .then(response => response.json()) //받아온 응답을 JSON 형태로 변환한다.
    .then((weather) => {
      obj['news'] = news.data //객체의 키를 'news'로 해서 데이터를 넣는다.
      obj['weather'] = weather //객체의 키를 'weather'로 해서 데이터를 넣는다.
      return obj
    })
  })
}

오늘은 fetch API에 대하여 공부하였다.
내일은 클라이언트 서버, Ajax에 대하여 공부한다
오늘은 여기까지 ~ :)