코드스테이츠 소프트웨어엔지지어링 부트캠프 +45일,

fetch 

• fetch(url) : url에서 자료를 다운받고 promise형 객체로 반환한다.
• json() : promise 객체를 리턴하는데, 그 promise는 텍스트를 JSON으로 파싱한 resolve값이다.                                               JS화 한다고 생각하면 된다.

The json() method of the Response interface takes a Response stream and reads it to completion. It returns a promise which resolves with the result of parsing the body text as JSON.

더 좋은 해석이 가능하다면 댓글로 써주세요 수정할게요

 

---

 

fetch로는 데이터를 바로 사용할 수 없다. fetch를 사용할 땐 두 단계를 거쳐야 한다.

 

1. 먼저 올바른 url로 요청을 보내고 , fetch(newsURL)

let newsURL = 'http://localhost:5000/data/latestNews';
.
.
.
fetch(newsURL)

 

2. 바로 뒤에 오는 응답에 json()을 해줘야 한다. 

json()메소드는 JS가 처리할 수 있는 형태로 데이터를 변환해준다.

fetch(newsURL)
  .then(response=>response.json())

 

다음은

1. newsURL에서 데이터를 다운받고,

2. json()메서드를 통해 변환해주고

3. 데이터를 console.log()

한 코드이다.

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

function getNewsAndWeather() {
  return fetch(newsURL)
  .then(response=>response.json())
  
  .then(newsData=>console.log(newsData))
  }

결과

 

 

fetch는 비동기 방식으로 요청하기 때문에 API호출하는 과정이 끝나지 않더라도 다음코드로 넘어가는 방식이다.

 

promise형 객체를 리턴하며, 리턴된 자료는 json()메서드를 통해 변환해주어야 한다.