fetch API 개요 문제

코드스테이츠 의사코드 작성한 문제입니다.

1. 'part-3/01_basicChaining.js'는, fetch를 이용해서 해결해야 합니다.

http://localhost:4999/data/latestNews 요청과 http://localhost:4999/data/weather 요청의 결과를 하나의 객체로 합치는 것이 목표입니다.

const newsURL = 'http://localhost:4999/data/latestNews';
const weatherURL = 'http://localhost:4999/data/weather';

function getNewsAndWeather() {
  // TODO: fetch을 이용해 작성합니다
  // TODO: 여러개의 Promise를 then으로 연결하여 작성합니다

  // 빈객체를 만든다.
  let result = {}; 
  
  // fetch(newsURL)로 프로미스를 가져와서 json()으로 문자열로 만든다. 
  return fetch(newsURL)
    .then((response) => {
      return response.json();
    })
    // 나오는 값을 보면 key인 data안에 원하는 값이 있으므로 json['data']를 통해 빼낸다.
    // 그 값을 result 객체안에 넣어준다.
    // 그뒤에 다음 다음 프로미스를 실행되도록 연결시켜준다.
    .then((json) => {
      result["news"] = json["data"];
      return fetch(weatherURL);
    })
    // 이전 .then에서 fetch(weatherURL)를 리턴해서 그 Result값이 나온다.
    // 그리고 Result값을 json()으로 문자열로 만든다.
    .then((response) => {
      return response.json();
    })
    // result객체 weather키에 json을 값으로 넣어주고 result를 리턴한다.
    .then((json) => {
      result["weather"] = json;
      return result;
    });
}


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

2. 'part-3/02_promiseAll.js'는, 마찬가지로 getNewsAndWeather 과 정확히 같은 결과를 리턴합니다. 그러나 이번에는 반드시 Promise.all을 사용해서 해결해야 합니다.

const { response } = require("express");


// function getNewsAndWeatherAll() {
//   // TODO: Promise.all을 이용해 작성합니다
//   result = {};
//   return Promise.all([
//     fetch(newsURL),
//     fetch(weatherURL)
//     ])
//   .then(([newsValue, weatherValue]) =>{
//     console.log(newsValue.json())
//     result['news'] = newsValue.json()['data']
//     result['weather'] = weatherValue.json()['data']
//     return result;
//   })

// }


function getNewsAndWeatherAll() {
  // TODO: Promise.all을 이용해 작성합니다
  // promise.all을 이용해서 fetch(newsURL), fetch(weatherURL)의 promiseResult를 뽑아낸다.
  return Promise.all([fetch(newsURL), fetch(weatherURL)])
  // 각 promiseResult 값에 map 메소드를 이용해서 json()함수를 적용시켜준다.
    .then((response) => {
      response = response.map((el) => el.json());
      return response;
    })
    // 적용된 값은 프로미스이고 promiseResult 값을 다시뽑아낸다.
    .then((response) => {
      return Promise.all(response);
    })
    // 그 값들이 배열에 담겨져 나온다.
    // 첫번째로 나온값은 news에 넣어주고
    // 두번재로 나온값을 weatherd에 넣어주고 객체로 리턴한다.
    .then((response) => {
      return { news: response[0]["data"], weather: response[1] };
    });
}





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

3. 'part-3/03_asyncAwait.js'는, getNewsAndWeather, getNewsAndWeatherAll과 같은 결과를 리턴합니다. 이번에는 async 및 await 키워드를 사용해야 합니다.

async function getNewsAndWeatherAsync () {
  let result = {}
  
  //fetch(newsURL)의 promiseResult값에 json()함수적용하고 나온 promiseResult값 객체
  let json1 = await fetch(newsURL).then(resp => resp.json());
  // fetch(weatherURL)의 promiseResult값에 json()함수적용하고 나온 promiseResult값 객체
  let json2 = await fetch(weatherURL).then(resp => resp.json());

  return {
    // json1 객체안 data키안에 원하는 값이 있으므로 json1.data해주고 객첼로 리턴 
    news: json1.data,
    // json2 객체를 값으로 weather를 키로하는 객체를 리턴
    weather: json2
  }
}




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