fetch API 실습

fetch 를 이용하면 HTTP 요청을 보내고 응답을 받을 수 있다. 페어프로그래밍으로 진행된 fetch API 실습 중 Promise.all 을 이용한 부분이 가장 헷갈리고 어려웠다. 이 부분에 대해 글을 작성해보겠다. 

 

const newsURLs = 'http://localhost:4999/data/latestNews';
const weatherURLs = 'http://localhost:4999/data/weather';

function getNewsAndWeatherAll() {
  // TODO: Promise.all을 이용해 작성합니다
  let result ={};
  return Promise.all([fetch(newsURLs),fetch(weatherURLs)])
   
  .then((response)=> {
    // console.log(response);
    return response.map(x => x.json())
   })
  .then((json)=> {
    result.news = json[0].data;
    result.weather=json[1];
    // console.log(result);
    return result;
  })
}

if (typeof window === 'undefined') {
  module.exports = {
    getNewsAndWeatherAll
  }
}

Promise.all 인자로 배열 형태로 뉴스 url 과 날씨 url 을 fetch 한 것을 넣어주었다. fetch 결과는 프로미스를 반환하므로 이와같이 작성해보았다. 그 후 fetch 가 성공적으로 되었을 시 reponse 객체를 반환한다.  then에 반환된 response를 인자로 주어 배열 형태로 결과가 반환되었으니 map 을 이용해 배열의 원소로 접근하여 자바스크립트 객체 형태로 바꿔주기 위해 x.json() 을 실행시켰다. 그 후 바뀐 객체의 데이터에 접근해보았는데 .. 결과는 undefined 였다.. 그래서 코드를 조금 수정해보았다. 

 

const newsURLs = 'http://localhost:4999/data/latestNews';
const weatherURLs = 'http://localhost:4999/data/weather';

function getNewsAndWeatherAll() {
  // TODO: Promise.all을 이용해 작성합니다
  let result ={};
  return Promise.all([fetch(newsURLs),fetch(weatherURLs)])
   
  .then((response)=> {
    // console.log(response);
    return response.map(x => x.json())
   })
  .then((data) => Promise.all(data))  //추가된부분
  .then((json)=> {
    result.news = json[0].data;
    result.weather=json[1];
    // console.log(result);
    return result;
  })
}

if (typeof window === 'undefined') {
  module.exports = {
    getNewsAndWeatherAll
  }
}

이유를 몰라 중간중간 console.log를 실행해본 결과 프로미스가 들어와있었고 프로미스 결과에 원하던 데이터가 들어가 있었다.... 

따라서 .json 을 실행한 뒤 Promise.all(data) 를 실행해 그 결과 값을 다음 인자로 전달해 프로미스 결과에 들어있던 데이터에 접근 할 수 있었다.