D-25

🔍 fetch API란?

HTML에서 <a href=">의 형태로 주소를 넣어 이동하는 것을 생각해보자.
이는 화면 전체를 바꾸기도하며 페이지의 용량이 크면 전환하는데 시간이 걸린다.
자바스크립트는 싱글 스레드 방식이기때문에 과부화가 걸린다.
이를 보완하기 위해 비동기 통신이 등장한 것이다.

fetch API는 특정 URL로 부터 데이터를 받아오는 역할을 한다.
이 과정은 비동기적으로 이루어진다.

👨‍🏫 fetch API 과제

📌 1. basicChaining

function getNewsAndWeather() {
  return fetch("http://localhost:4999/data/latestNews") 
    .then((response) => response.json()) 
    .then((json1) => { 
      return fetch("http://localhost:4999/data/weather") 
        .then((response) => response.json())
        .then((json2) => { 
          return {
            news: json1.data,
            weather: json2,
          };
        });
    });
}

1.
.then((response) => response.json()) : then메소드를 이용해 이전 promise객체가 성공하면 해당 응답객체를 JSON으로 파싱하는 방법이다.

2.
.then((json1) => : then메소드를 이용해 파싱된 JSON데이터를 json1 변수에 저장한다.

3.
return {news: json1.data, weather: json2,}; :news와weather객체를 포함하는 객체를 반환한다.

news 객체는 json1.data 값으로 설정

weather 객체는 json2 값으로 설정

---

📌 2. promise.All

function getNewsAndWeatherAll() {
  return Promise.all([fetch("http://localhost:4999/data/latestNews"), fetch("http://localhost:4999/data/weather")])
    .then(([newsResponse, weatherResponse]) => {
      return Promise.all([newsResponse.json(), weatherResponse.json()]);
    })
    .then(([json1, json2]) => {
      return {
        news: json1.data,
        weather: json2,
      };
    });
}

1.
return Promise.all([~]) : promise.all을 이용해 두 링크의 데이터를 가져온다.

2.
.then(([newsResponse, weatherResponse]) : 가져온 데이터를 두 변수에 저장한다.

3.
return Promise.all([]) : promise.all을 이용해 두 데이터를 JSON 형태로 변환한다.

4.
.then(([json1, json2]) : 변환된 데이터들을 두 변수에 저장한다.

5.
return {news: json1.data, weather: json2,}; :news와weather객체를 포함하는 객체를 반환한다.

news 객체는 json1.data 값으로 설정

weather 객체는 json2 값으로 설정

---

📌 3. async / await

async function getNewsAndWeatherAsync() {
  let json1 = await fetch("http://localhost:4999/data/latestNews").then((response) => response.json());
  let json2 = await fetch("http://localhost:4999/data/weather").then((response) => response.json());

  return {
    news: json1.data,
    weather: json2,
  };
}

1.
let json1 = await fetch("")

`fetch()`메소드는 네트워크 요청을 생성하고 반환한다.

`await`키워드는 완료될 때 까지 코드 실행을 일시 중지시키고 요청이 완료되면 반환된`response`객체를 처리한다.

response.json() 메소드를 이용해 JSON 형태로 파싱 후 `json1`변수에 저장한다.

2.
let json2 = await fetch("");

`fetch()`메소드는 네트워크 요청을 생성하고 반환한다.

`await`키워드는 완료될 때 까지 코드 실행을 일시 중지시키고 요청이 완료되면 반환된`response`객체를 처리한다.

response.json() 메소드를 이용해 JSON 형태로 파싱 후 `json2`변수에 저장한다.

3.
return {news: json1.data, weather: json2,}; :`news`와`weather`객체를 포함하는 객체를 반환한다.

news 객체는 json1.data 값으로 설정

weather 객체는 json2 값으로 설정