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

네트워크 요청 - ko.javascript.info

 

fetch

JavaScript를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다.

많은 웹사이트에서는 페이지 자체를 새로 고침하지 않고 해당 정보만 업데이트하기 위해 fetch API를 활용한다. 

fetch API를 활용하면 특정 url로부터 정보를 비동기적으로 받아올 수 있다.

 

fetch는 IE에서는 지원하지만 그 외 대부분의 모든 브라우저가 지원하고 있다.

 

기본 문법

let promise = fetch(url, [options])

url : 취득하고자 하는 url

options : 선택할 수 있는 매개변후로 method나 header등을 지정할 수 있다.

 

options에 아무것도 넘기지 않으면 request는 GET 메서드로 진행되어 url로부터 콘텐츠가 다운로드된다.

fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 Promise를 반환한다. 반환된 Promise는 fetch()를 호출하는 코드에서 사용된다. 

 

 

---

과제 내용

fetch를 이용해 request를 보내고 response를 받는 과정을 chaining, Promise.all 그리고 async & await 으로 구현한다.

 

 

Chaining

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

function getNewsAndWeather() {

  return fetch(newsURL)	//newsURL을 먼저 fetch하고
  .then((response) => response.json()) // fetch API는 자체적으로 json()이라는 메소드가 있어서 응답을 JSON 형태로 변환시켜 다음 promise로 전달한다.
  .then((json1) => { // 그 결과를 json1이라고 한다.
    return fetch(weatherURL){
    .then((response) = > response.json())
    .then((json2) => { // 결과를 json2라고 하며 객체 형태로 결과를 출력한다.
      return {
        news : json1.data,
        weather : json2 // .data라고 적지 않은 이유: news는 data라는 key 안에 값이 있고, weather은 아님
        }
      })
    })
 } 
      

1. newsURL에 fetch를 적용한다.

2. 응답을 response라고 하고, JSON 형태로 변환한다.

3. 그 응답을 json1이라고 한다면, 다음 weatherURL에 fetch를 적용한다.

4. 응답을 response라고 하고, JSON 형태로 변환한다.

5. 그 응답을 json2라고 한다면, 두 요청의 결과를 하나의 객체로 합친다.

6. 1을 리턴한다.

 

 

 

 

Promise.all

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

function getNewsAndWeatherAll() {

  return Promise.all([fetch(newsURL), fetch(weatherURL)]) // 두 url 모두에 fetch를 적용한다.
  .then([newsReponse, weatherResponse]) => { // fetch한 결과를 각각 newsResponse, weatherReponse라고 하고
    return Promise.all([newsReponse.json(), weatherResponse.json()]); // 응답을 json형태로 변환시킨다.
  })
  .then(([json1, json2]) => { // 그 결과를 각각 json1, json2라고 할 때 
    return { // 다음과 같은 객체로 리턴한다.
      news : json1.data,
      weather : json2
    }
  })
}
      
  

 

.1. Promise.all을 활용해 한번에 두 개의 url에 fetch를 적용시킨다.

2. 각각의 응답을 newsReponse, weatherResponse라고 할 때, Promise.all을 활용해 두 응답 모두를 JSON 형태로 변환한다.

3. 각각의 응답을 json1, json2라고 할 때, 두 요청의 결과를 하나의 객체로 합친다.

4. 1을 리턴한다.

 

 

 

 

Async & Await

const { response, json } = require("express");

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

async function getNewsAndWeatherAsync() {

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

 

1. newsURL에 fetch를 적용한 결과를 response라고 할 때, 이를 JSON 형태로 변환한 것을 json1 이라고 한다.

2. weatherURL에 fetch를 적용한 결과를 response라고 할 때, 이를 JSON 형태로 변환한 것을 json2 라고 한다.

3. json1, json2를 객체에 담아 리턴한다.