S2) Unit3. [실습] fetch API

📣 fetch를 이용해 HTTP 요청을 보내고 응답 받아오기

✔️ HTTP 요청

➰ 클라이언트가 HTTP 프로토콜을 사용해 서버에 요청 보내는 것

 

 

1️⃣ basicChaining.js

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

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

  return fetch(newsURL)
    .then((response) => response.json())
    .then((json1) => {
      return fetch(weatherURL)
        .then((response) => response.json())
        .then((json2) => {
          return {
            news: json1.data,
            weather: json2
          }
        })
    })
}

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

➰ fetch는 네트워크에서 JSON 파일을 가져온다.

➰ 가져온 JSON 파일의 내용을 출력하기 위해 json()으로 파싱해준다.

➰ 첫번째 과정이 성공하면 두번째 과정도 똑같이 반복한다.

➰ 가져온 데이터들을 객체에 담아 리턴해준다.

 

 

2️⃣ promiseAll.js

function getNewsAndWeatherAll() {
  // TODO: Promise.all을 이용해 작성합니다
  let news = fetch(newsURL).then((response) => response.json());
  let weather = fetch(weatherURL).then((response) => response.json());

  return Promise.all([news, weather]).then((values) => {
    return {
      news : values[0].data,
      weather : values[1]
    };
  });
}

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

➰ fetch로 데이터들을 받아온다.

➰ 받아온 데이터들을 promise.all을 사용해 순회하면서 객체에 담아 리턴해준다.

 

3️⃣ asyncAwait.js

const { response } = require("express")

async function getNewsAndWeatherAsync() {
  // TODO: async/await 키워드를 이용해 작성합니다
  let news = await fetch(newsURL).then((response) => response.json());
  let weather = await fetch(weatherURL).then((response) => response.json());

  return  {
    news: news.data,
    weather: weather
  };
}
if (typeof window === 'undefined') {
  module.exports = {
    getNewsAndWeatherAsync
  }
}

➰ async, await를 사용해서 비동기적으로 구현해준다.