코드스테이츠 7주차 / fetch API (part-3)

fetch API

Part 3는 Node.js 환경을 떠나, 브라우저에서 진행합니다. Node.js 환경에는 fetch API가 내장 모듈로 제공되지 않습니다.

이번에는 fetch를 이용해 HTTP 요청을 보내고, 응답을 받는 연습을 합니다. Part 3는 Part 2와 비슷하게 구성되어 있습니다. 다만 callback 형태의 요청이 존재하지 않으므로, chaining과 Promise.all 그리고 async/await을 이용합니다.

npm run server:part-3 으로 서버를 실행해 url을 통해 정보를 얻어 올 수 있었다

1. Chaining Test

fetch를 이용해서 해결해야 했고
http://localhost:4999/data/latestNews 요청과
http://localhost:4999/data/weather 요청의 결과를 하나의 객체로 합치는 것이 목표였다

test case

체이닝의 결과가 Promise 형태로 리턴되어야 합니다
/data/latest 의 응답 내용과 /data/weather 응답 내용을 합쳐 새로운 객체로 리턴되어야 합니다
fetch를 활용하세요. 총 두 번 사용해야 합니다
Promise.all 또는 async/await을 사용하지 않고 풀어보세요

var newsURL = 'http://localhost:5000/data/latestNews';
var weatherURL = 'http://localhost:5000/data/weather';

function getNewsAndWeather() {
 // TODO: fetch을 이용해 작성합니다
 // TODO: 여러개의 Promise를 then으로 연결하여 작성합니다
 return fetch(newsURL)
 .then(resp => resp.json())
 .then(news => {
   // news는 받아온 newsURL
   return fetch(weatherURL)
   // 똑같은 작업 한번 더 진행
     .then(resp => resp.json())
     .then(weather => {
     // 이 스코프에서만 news, weather 에 접근 가능하다
       return {
         news: news.data,
         weather: weather
       }
     });
   })
}

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

2. promise.all

1번과 같은 결과를 리턴하되 Promise.all을 사용해서 풀면 된다

test case

Promise 형태로 리턴되어야 합니다
Promise.all을 사용해서 풀어야 합니다
/data/latest 의 응답 내용과 /data/weather 응답 내용을 합쳐 새로운 객체로 리턴되어야 합니다

var newsURL = 'http://localhost:5000/data/latestNews';
var weatherURL = 'http://localhost:5000/data/weather';

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

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

3. async await

1번과 같은 결과를 리턴하되 async await 을 사용해서 풀면 된다

test case

async 키워드를 사용한 함수는 AsyncFunction의 인스턴스입니다
/data/latest 의 응답 내용과 /data/weather 응답 내용을 합쳐 새로운 객체로 리턴되어야 합니다
async/await을 활용하세요. 총 두 번 사용해야 합니다

var newsURL = 'http://localhost:5000/data/latestNews';
var weatherURL = 'http://localhost:5000/data/weather';

async function getNewsAndWeatherAsync() {

  let news = await fetch(newsURL).then(resp => resp.json());
  let weather = await fetch(weatherURL).then(resp => resp.json());

  return {
    news: news.data,
    weather: weather
  }
}

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