[TIL] Day26 #fetch API

Beanxxยท2022๋…„ 5์›” 31์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
26/120
post-thumbnail

[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

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-05-31 แ„‹แ…ฉแ„’แ…ฎ 3 30 51
  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;
    });
}
  1. 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;
      });
    }
  1. 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~๋๊นŒ์ง€)
profile
FE developer

0๊ฐœ์˜ ๋Œ“๊ธ€