section2/unit3/[JS/Node] 비동기(9/27)

블로깅 주제

• fetch API

---

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

• 오늘은 데일리코딩에서부터 진이 빠졌다. 엄청 어려운 문제는 아닌 것 같은데 내가 너무 꼬아서 생각했나 잘 풀리지 않았다.. 결국 테스트케이스를 몇 개 통과하지 못한 채로 레퍼런스를 보고 이해했다. ㅠㅠ 레퍼런스는 매우 간단했다는 거...ㅠㅠ 그래도 split 개념을 다시 복습하고 substr 리마인드, reduce 리마인드 했다는 것에 의의를 둔다. 오늘 드디어 이틀에 걸친 비동기 과제가 마무리되었다. 내일부터 리액트라니 믿기지가 않는다. 비동기도 진짜 이틀간 낑낑대면서 한 것 같은데..리액트는 오죽할까 ㅠㅠ그래도 잘 넘어갔으면 좋겠다. 리액트 부셔보자!

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

• fetch API

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

- fetch API 

특정 URL로부터 정보를 받아오는 역할

이 과정은 비동기로 이루어지기 때문에, 경우에 따라 다소 시간이 걸릴 수 있다.

이렇게 시간이 소요되는 작업을 요구할 경우에는 blocking이 발생하면 안 되므로, 특정 DOM에 정보가 표시될 때까지 로딩 창을 대신 띄우는 경우도 있다.

let url =
  "https://koreanjson.com/posts/1";
fetch(url)
  .then((response) => response.json()) 
  .then((json) => console.log(json)) // fulfiled된 프로미스를 리턴
  .catch((error) => console.log(error));

---

- 과제 part3 : Fetch API

 

1. baseChaining

const newsURL = 'http://localhost:4999/data/latestNews';
const weatherURL = 'http://localhost:4999/data/weather';

function getNewsAndWeather() {
  // TODO: fetch을 이용해 작성합니다
  // TODO: 여러개의 Promise를 then으로 연결하여 작성합니다
  return fetch(newsURL) 
  .then((response) => response.json()) // response / body.json()은 프로미스를 리턴하는 것
  .then((newsRes) => { //promise
    return fetch(weatherURL)
    .then((response) => response.json())
    .then((weatherRes) => {
      return {news: newsRes.data, weather: weatherRes}; // newsRes promise 객체의 'data' 값을 불러와야 함
    })
  })
}

비동기 함수는 항상 promise를 리턴한다.

fetch도 프로미스를 리턴한다.

fetch를 통해 url에 있는 데이터를 받으면 response(response 형태)가 리턴되고 

우리가 원하는 데이터는 body에 있음. 이걸 뽑아내는게 .json()

response.json()을 통해 그것을 프로미스 형태로 만들어준다.

newsRes는 프로미스 객체가 된다.

리턴할 객체에는 newRes 프로미스 객체의 'data' 값(배열안에 세 개의 객체가 들어있음)을 넣어준다.

weatherRes는 받아온 response가 response.json()을 통해 객체 형태가 되었므로 그대로 리턴할 객체에 넣는다.

 

2. PromiseAll

function getNewsAndWeatherAll() {
  // TODO: Promise.all을 이용해 작성합니다
  let newsRes = fetch('http://localhost:4999/data/latestNews'); 
  let weatherRes = fetch('http://localhost:4999/data/weather'); // [newsRes,weatherRes] => [Promise, Promise]
  return Promise.all([newsRes,weatherRes])
  .then((res) => res.map((el) => el.json())) //Promise.all을 해주면 resolve 된 값이 된다 / [response, response]
    .then((data) => Promise.all(data)) // [Promise, Promise]
    //json 처리를 하면서 다시 Promise가 되었기 때문에 다시 resolve된 값으로 바꿔주기 위해 Promise.all을 한번 더 사용해준다.
    .then((data) => {
      return { news: data[0].data, weather: data[1] };
    });
}

 

fetch를 통해 url에 있는 데이터를 받으면  resolve된 값인 res(response 형태)가 리턴된다.

PromiseAll을 통해 리턴된 res 배열 안 요소를 map안에서 el.json()을 해주어 Promise 형태로 바꿔준다.

json 처리를 통해 data가 Promise 형태가 되어있으므로 그것을 다시 resolve 된 값의 형태로 바꿔주기 위해 Promise.all을 사용한다.

 

3. asyncAwait

async function getNewsAndWeatherAsync() {
  // TODO: async/await 키워드를 이용해 작성합니다
  let newsRes = await fetch('http://localhost:4999/data/latestNews').then((response) => response.json());
  let weatherRes = await fetch('http://localhost:4999/data/weather').then((response) => response.json());

  return {news: newsRes.data, weather: weatherRes};
}

---

https://velog.io/@hwanieee/fetch%EC%99%80-body.json-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Promise.all

fetch,Promise.all, body.json() 그리고 그 외

---

▶ JSON.parse()와 response.json()의 차이

response 객체에 .json 메서드가 있다.

json()은 response 객체를 대상으로 사용하는 것이다. 네트워크 응답의 body 부분을 뽑아내는 역할을 한다.

JSON.parse()에는 문자열을 자바스크립트가 읽을 수 있는 형태로 가져오는 역할을 한다.

JSON.parse()에는 응답(response) 바디만을 넣어야한다. 바디와 헤더가 들어가면 데이터를 읽어오지 못한다.

반면에, response.json()에는 응답 헤더가 들어가도 바디만 읽어서 불러온다.