[JS] 실습 - fetch API

 

 

 

 

📌 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

 

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

 

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

 

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
  }
}