하루5분코딩"fetch"

fetch API

- 비동기 요청의 가장 대표적인 사례의 예는 네트워크 요청이 있다. 다양한 네트워크 요청중 URL을 요청하는 경우가 가장 흔한다. 이를 가능하게 해주는 API가 바로 fetch API 이다. 주로 포털 사이트에 실시간으로 변하는 정보, 날씨 , 주식 등의 정보를 URL로 받아오는 역할을 한다.

✓ fetch 를 사용하여 URL 가져오기

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

fetch는 네트워크 에서 JSON 으로 가져와 사용할수 있게해준다. fetch()는 불러들이는 경우, 취득할 리소스를 반드시 인수로 지정해야한다. 또한 fetch는 Promise 로 리턴한다.

✓실질적인 예시

var newsURL = 'http://localhost:5000/data/latestNews';
var weatherURL = 'http://localhost:5000/data/weather';
function getNewsAndWeather() {
  let obj = {};
  return fetch(newsURL)
  .then(response => response.json())
  .then(data => {
      obj['news'] = data.data;
      return fetch(weatherURL);
    })
    .then((response)=> response.json())
    .then(data => {
      obj['weather'] = data;
      return obj;
    })  
}

URL을 통해서 가져온 결과값은 아래와 같다.

const obj = {
            news: [
              {
                row_id: 2,
                title: '2021년 경제 성장률 전망 밝아',
                source: 'A신문',
                timestamp: '2020/12/30',
              },
              {
                row_id: 3,
                title: '코로나19 증가추세 대폭 하락해',
                source: 'BBC',
                timestamp: '2020/12/29',
              },
              {
                row_id: 4,
                title: '코드스테이츠 취업연계 파트너사 xxx건 돌파',
                source: '스타트업 뉴스',
                timestamp: '2020/12/31',
              },
            ],
            weather: { status: 'sunny', tempature: '28', finedust: 'good' },
          };

또한 promise로 리턴을 받기때문에 Promise.all 과 async/await 으로 표현할수 있다.

✓ Promise

function getNewsAndWeatherAll() {
  return Promise.all([
    fetch(newsURL).then(response => response.json()), 
    fetch(weatherURL).then(response => response.json())
  ])
    .then((data) =>{ 
    return {news: data[0].data, weather : data[1]};
  })
}

✓ async/await

async function getNewsAndWeatherAsync() {![](https://velog.velcdn.com/images%2F-hsw9724%2Fpost%2F9aa63714-e102-4ec0-9f86-1d395f4a1372%2Fjs.png)
  let news = await fetch(newsURL).then(response => response.json())
  let weather = await fetch(weatherURL).then(response => response.json())
  return {news: news.data, weather : weather};
}