[TIL] Day26 #fetch API

[TIL] Day26
[SEB FE] Day26

☑️ fetch API

• 비동기 요청의 가장 대표적 사례: ‘네트워크 요청'

  • URL로 요청하는 것을 가능하게 해 주는 API가 fetch API

• 해당 정보만 업데이트하기 위해 요청 API 이용

  • fetch API를 이용해 해당 정보를 원격 URL로부터 불러옴 (비동기로 진행)

  ⇒ 즉, fetch API는 특정 URL로부터 정보를 받아오는 역할

✋ fetch는 Promise를 리턴

// fetch API 사용법

let url = "~";
fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

---

☑️ [Pair] fetch API

1. Chaining Test: fetch를 이용해서 2개의 요청 결과를 하나의 객체로 합치는 것을 구현

const newsURL = "http://localhost:~~";
const weatherURL = "http://localhost:~~";

function getNewsAndWeather() {
	
	// 결과값을 담을 빈 객체 선언
  let newObj = {};
  return fetch(newsURL)
    .then((data) => data.json())  // json 형태로 변환
    .then((json) => {
			// 빈 객체인 newObj의 key가 news인 value로 newsURL의 key인 data에 해당하는 value 즉, 배열 안에 들어있는 객체 3개를 할당
      newObj.news = json.data;  
      return fetch(weatherURL);
    })
    .then((data) => data.json())
    .then((json) => {
			// newObj 객체의 key가 weather인 value로 weatherURL 객체 자체를 할당
      newObj.weather = json;
      return newObj;
    });
}

2. Promise.all Test: 위와 같은 결과를 반환하되 Promise.all() 사용

   function getNewsAndWeatherAll() {
     let newObj = {};
   
   	// newsURL / weatherURL 객체를 각각 fetch로 가져와서 json 형태로 변환
     let json1 = fetch(newsURL).then((data) => data.json());
     let json2 = fetch(weatherURL).then((data) => data.json());
   
   	// 전달인자는 배열 형태로 가져오며, Promise 함수여야 함.
     return Promise.all([json1, json2]).then((data) => {
   		// data[0]은 [json1, json2] 배열 중 index 0인 json1을 가리킴
       newObj.news = data[0].data;
   		// data[1]은 [json1, json2] 배열 중 index 1인 json2를 가리킴
       newObj.weather = data[1];
       return newObj;
     });
   }

3. async/await Test: 위와 같은 결과를 반환하되 async/await 사용

   async function getNewsAndWeatherAsync() {
     let newObj = {};
   
     let news = await fetch(newsURL).then((data) => data.json());
     let weather = await fetch(weatherURL).then((data) => data.json());
   
     newObj.news = news.data;
     newObj.weather = weather;
     return newObj;
   }

---

☑️ ETC

• substr(): 문자열의 특정 위치에서 시작해서 특정 문자 수 만큼의 문자들을 반환

  const str = 'Mozilla';
  
  console.log(str.substr(1, 2)); //  "oz"  (index 1~2)
  console.log(str.substr(2));  // "zilla"  (index 2~끝까지)