[Node.js] fetch API / SPRINT-비동기💯️

goal

• fetch를 이용해 웹에서 정보 가져오기

fetch 💯️

• 웹 개발을 할 때, ajax통신을 자주 사용하게 된다. ajax 를 사용할 때, XHR, JQuery, Fetch 를 쓸 수 있는데, 그 중 가장 베스트인 fetch에 대해서 알아본다.

• fetch란? : 자바스크립트에서 => 서버로 네트워크 요청(request)을 보내고 응답(response)을 받을 수 있도록 해주는 메서드

• XMLHttpRequest와 비슷하지만 fetch는 Promise 기반으로 구성되어 있어서 더 간편하게 사용할 수 있다.

• 비동기 요청의 가장 대표적인 사례를 꼽으라고 한다면, 단연 네트워크 요청을 들 수 있다. 다양한 네트워크 요청 중, URL로 요청하는 경우가 가장 흔하다. 이를 가능하게 해주는 API가 바로 fetch API이다!

• 

• 위 화면에서 계속 전체 화면을 새로 불러 오는 것 보다 실시간 뉴스나, 정해진 시간에 따라 변경되는 광고, 포스팅 등 원하는 정보만 업데이트 하기 위해서, fetch API 를 이용하여 원하는 정보를 원격 URL로부터 불러온다.

• fetch API는 특정 URL로부터 정보를 받아오는 역할을 수행한다.

• 이 과정은 비동기로 이루어진다.

fetch API 사용법

• fetch (url, [options])

  • url : 접근하고자 하는 URL
  • options : 선택적인 매개변수로, method나 header 등을 지정할 수 있음
    • options에 아무것도 넘기지 않으면, 요청은 언제나 GET method 로 진행되어, url로부터 컨테츠가 다운로드 된다.
    • fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환된다.
    • 반환되는 프라미스는 fetch()를 호출하는 코드에서 사용된다.

• 요청헤더, 응답헤더, POST요청에 대한 자세한 설명은 👉️ 여기를 참고

• fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드

• fetch의 두 번째 파라미터로 요청에 대한 추가적인 데이터를 입력할 수 있다.( fetch의 파라미터들은 👉️ 여기를 참고 )

• fetch API는 기본적으로 Promise의 형식으로 이루어져 있다.

• fetch로는 원하는 데이터를 바로 사용할 수 없다.

• 올바른 url로 요청을 보내야 하고, then으로 불러오는 응답에 대해 자체 내장 메소드인 json()을 적용해야 한다.

• json()은 Response 스트림 (스트림에 대한 짧막한 설명은 👉️ 여기를 참고)을 가져와서 스트림이 완료될 때까지 읽은 후, 다 읽은 body의 텍스트를 Promise형태로 반환한다.

• fetch 로 인해 반환되는 값은 데이터가 아닌, Promis로 감싸져 있는 Response 객체. 그리고 이 Reponse 객체는 json 이라는 메소드를 가지고 있는데, 이 메소드를 실행 시켜야 비로서 우리가 원하는 데이터가 Promise 에 감싸져서 나오게 된다.

• 작동 순서
  fetch 요청👉️
  Promise<Response> 가 반환 됨👉️
  Response 를 꺼냄 (Promise 패턴 혹은 async await 패턴)👉️
  Response 의 json 메소드를 실행👉️
  Promise<data> 가 반환 됨👉️
  data를 꺼냄

fetch VS axios 비교

• fetch VS axios 비교는 👉️ 여기를 참고

SPRINT-비동기 💯️

fetch / Promise와 then을 이용

var newsURL = 'http://localhost:5000/data/latestNews';
var weatherURL = 'http://localhost:5000/data/weather';

function getNewsAndWeather() {
  
  return fetch(newsURL)		 // 올바른 url요청을 보낸다
  .then(res => res.json()) 
  	// 바로 뒤에 오는 응답에 대해 json()을 해준다 
 	// (axios는 이과정을 자동으로 해준다)
	// 자체적으로 json()메소드가, 응답(res)을 JSON형태로 변환시킨 뒤, 다음 Promise로 전달한다
  .then((result1) => {	 	// result1은 newsURL에서 받은 결과
    return fetch(weatherURL) 
    .then(res => res.json()) 
    .then((result2) => {  
      
      	 //! 실패한 방법
     	 // let obj = {}
     	 // obj.news = result1;
     	 // obj.weather = result2;
     	 // return obj
      
   //! 실패한 방법
   // return `{news: ${result1.data}, weather: ${result2}}`
      return {news: result1.data, weather: result2}
    })
  })
  .catch((err) => console.log(err)) 	// 에러메시지를 확인할 수 있음
  
}

fetch / Promise.all을 이용

function getNewsAndWeatherAll() {

  //! 실패한 빙법
  //! return Promise.all([newsURL, weatherURL])
  //! .then(([contents1, contents2]) => {
  //!   return {news: contents1.data, weather: contents2}
  //! })

  //! 정답 1
  let news = fetch(newsURL).then(res => res.json())	// json으로 바로 사용할 수 있는 형태로 만들어서
  let weather = fetch(weatherURL).then(res => res.json()) 
  return Promise.all([news, weather]) 			// promise로 감싸진 데이터를 all로 한번에 가져오기
  .then(([n, w]) => { 					// 인자가 두개이므로, 두개의 인자를 넘기고
    return {news: n.data, weather: w}			// 원하는 형식으로 출력
  })

  // or

  //! 정답 2
   return Promise.all([fetch(newsURL), fetch(weatherURL)])	// fetch로 각 url을 배열에 담아 가져와서
   .then(([news, weather]) => { 				// 배열로 담긴 인자를 넘기고
     return Promise.all([news.json(), weather.json()]) 		// json을 해주는데, 이때 Promise로 감싸주어야
   })
   .then(([n,w]) => { 						// 감싸준 데이터를 all로 두개를 넘겼으므로, 두개의 인자를 배열로 묶어서
     return {news: n.data, weather: w} 				// 원하는 형식으로 출력
   })

}

fetch / async, await을 이용

// async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의한다.
async function getNewsAndWeatherAsync() {
  let news = await fetch(newsURL).then(res => res.json())
  let weather = await fetch(weatherURL).then(res => res.json())
  return {news: news.data, weather: weather}
}

출처 : https://hoorooroob.tistory.com/💚️
출처 : https://ko.javascript.info/fetch💚️