consuming promises, chaining promises, handling rejected promises

const getCountryData = function (country) {
  fetch(`https://restcountries.com/v2/name/${country}`)
    .then(function (response) {
      console.log(response);
      return response.json();
    })
    .then(function (data) {
      console.log(data);
      renderCountry(data[0]);
    });
};
getCountryData('portugal');

fetch에 저번에 배웠듯이 fullfilled state 가있고 rejected state가 있는데 fullfilled state일때는 .then(function())를 추가해준다.
저기서 response.json()이거에서 또다른 promise가 만들어지기 때문에
jason형태로 저렇게 return해준것이다.그리고 이 아이도 또다른 promise이기 대문에 .then(function())를 추가해줬다.
위의 코드를 깔끔하게 만들어주면 아래와 같다.

const getCountryData = function (country) {
  fetch(`https://restcountries.com/v2/name/${country}`)
    .then(response => response.json())
    .then(data => renderCountry(data[0]));
};

getCountryData('portugal');

어떤 사람이 promise와 consuming promise 정확한 뜻을 물어보니
누군가 이렇게 답해줌

Promises are a feature built into JS that allows you to run some async code and wait for a response and depending on if it's successful or not do something.
Consuming promises just means using them.

나라 국기에 이웃나라 국기 rendering 해주는걸 promise로 이용하려면
chaining promise를 이용해주면 된다..아래의 코드를 보며
혼자 복습해보자

const getCountryData = function (country) {
  // Country 1
  fetch(`https://restcountries.com/v2/name/${country}`)
    .then(response => response.json())
    .then(data => {
      renderCountry(data[0]);
      const neighbour = data[0].borders[0];

      if (!neighbour) return;

  // Country 2
   return fetch(`https://restcountries.com/v2/alpha/${neighbour}`);
    })
   .then(response => response.json())
   .then(data => renderCountry(data, 'neighbour'));
};

getCountryData('portugal');

아까 말했듯이 promise에 rejected state가 있는데 이렇게 rejected state나올 일은 인터넷이 갑자기 끊겼을때다ㅋㅋ
암튼 이렇게 rejected state가 나왔을 때 해결방법은

const getCountryData = function (country) {
  //Country 1
  fetch(`https://restcountries.com/v2/name/${country}`)
    .then(
      response => response.json(),
      err => alert(err)
    )
    .then(data => {
      renderCountry(data[0]);
      const neighbour = data[0].borders[0];

      if (!neighbour) return;

      // Country 2
      return fetch(`https://restcountries.com/v2/alpha/${neighbour}`);
    })
    .then(
      response => response.json(),
      err => alert(err)
    )
    .then(data => renderCountry(data, 'neighbour'));
};

btn.addEventListener('click', function () {
  getCountryData('portugal');
});

여기 보는것처럼 .then에 err => alert(err) 이걸 추가해주면
에러를 여기서 잡아주는거당..근데 이러면 에러가 나올만한 곳에
이 애를 계속 붙여넣기 해줘야 하니까 다른 방법이 있는데
바로 end of chain에 a catch method를 추가해 주는것이다.

const getCountryData = function (country) {
  //Country 1
  fetch(`https://restcountries.com/v2/name/${country}`)
    .then(response => response.json())
    .then(data => {
      renderCountry(data[0]);
      const neighbour = data[0].borders[0];

      if (!neighbour) return;

      // Country 2
      return fetch(`https://restcountries.com/v2/alpha/${neighbour}`);
    })
    .then(response => response.json())
    .then(data => renderCountry(data, 'neighbour'))
    .catch(err => alert(err))
};

btn.addEventListener('click', function () {
  getCountryData('portugal');
});

.catch(err => alert(err)) 이렇게 써주면 chain안에있는
어디에서 에러가 나던지 이 애가 잡아준다 ㅎㅎㅎ