Achievement Goals

전반적인 fetch 의 형태, 쓰임새에 대해 안다.
그동안 배운 promise,async 를 적용하여 써본다.

callback, promise, async 오케이. 이제 한번 적용해볼까?
하지만 fetch 를 처음 접하고나서 읭? 했다.
json() 메소드는 갑자기 어디서 튀어나온것이며 왜쓰는것일까?

매개변수
없음.
초깔끔.
맘에들음.

아무튼 이 메소드는 body 부분에 있는것을 JSON 으로 변환하여 다음 프로미스로 전달하는 역할을 한다.

정리

fetch만 있다고 하여 데이터를 바로 가져와서 사용할 수 없다.
fetch를 사용할 땐 두 단계를 거쳐야 한다.
1. 먼저 올바른 url로 요청을 보내야 한다.
2. 바로 뒤에오는 응답에 대해 json()을 해준다.
(axios는 json()과정을 자동으로 해주는 셈이다).

fetch(url)
  .then((response) => response.json()) 
  .then((data) => console.log(data)) 
  .catch((error) => console.log(error)); 

어떠한 url 을 받아 비동기적으로 실행해야 한다고 한다면,
다음과 같이 fetch / json 을 이용할 수 있다.

let newsURL = 'http://localhost:3000/data/latestNews';
let weatherURL = 'http://localhost:3000/data/weather';

function getNewsAndWeather() {
  let obj = {};
  return fetch(newsURL)
  .then(response => response.json())
  .then((value) => {
    obj.news = value.data;
    return fetch(weatherURL)
    .then(response => response.json())
    .then((value) => {
      obj.weather = value;
      return obj;
    })
  })
  .catch(err=> console.log(err))
}

Promise.all 을 이용한다면?

function getNewsAndWeatherAll() {
  // TODO: Promise.all을 이용해 작성합니다
  let obj = {};
  const newsData = fetch(newsURL).then(data => data.json())
  const weatherData = fetch(weatherURL).then(data => data.json())
  
  return Promise.all([newsData,weatherData])
  .then((data) => {
    obj.news = data[0].data;
    obj.weather = data[1];
    return obj
  })
}

더 간편하게 생긴 async 를 사용한다면?

async function getNewsAndWeatherAsync() {
  // TODO: async/await 키워드를 이용해 작성합니다
  
  const newsData = await fetch(newsURL).then(data => data.json())
  const weatherData = await fetch(weatherURL).then(data => data.json())
  return {news:newsData.data,weather:weatherData}

}

비교하자면 이렇다.

그리고 공부하면서 또하나 느낀것.
콘솔.. 무조건 찍어보자.