fetch API란? 개발을 하다가 네트워크 요청이 필요할 때, 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있게 해준다.
fetch 함수를 사용하면 리소스를 비동기로 요청할 수 있으며, fetch를 호출하면 브라우저는 요청을 보내고 Promise 객체를 반환한다.
요청이 완료되면 성공 여부에 상관없이 Promise가 resolved 상태가 되어 Response 객체가 반환된다.
GET
오늘 공부한 내용은 가상의 뉴스 URL 요청을 성공했을 때, then으로 최종적으로 결과를 출력하는 것이었다. 두개의 URL을 fetch를 사용해서 객체에 담아서 반환하는 것이 문제였다.
let newsURL = 'http://localhost:5000/data/latestNews';
let weatherURL = 'http://localhost:5000/data/weather';
// 생략..
let obj = {};
return fetch(newsURL)
// response 처리
.then((news) => {
// 서버가 주는 데이터를 사용하려면 json()을 사용해야 한다.
return news.json()})
// json 출력
.then((json) => {
// 객체에 담는다.
obj.news = json.data;
// 이어서 바로 두번째 URL을 요청한다.
return fetch(weatherURL)
})
.then((weather) => {
return weather.json()})
.then((json) => {
obj.weather = json.data;
return obj;
})
fetch API를 통해서 서버에 요청을 하고 json()을 통해서 서버에서 주는 데이터를 받아온다. 그리고 response.json()은 응답을 JSON 형태로 파싱을 한다.
Promise.all()
그 다음은 어제 배운 Promise.all을 사용해서 똑같은 값을 반환해보았다.
let news = fetch(newsURL)
.then((response) => {
return response.json()
})
let weather = fetch(weatherURL)
.then((response) => {
return response.json()
})
return Promise.all([
news,
weather,
])
.then((response) => {
return {news: response[0].data, weather: response[1]}
})
이 문제를 처음 접근했을 때는 Promise.all의 매개변수인 배열안에서 fetch를 사용했더니 요청하는데 계속 시간초과가 발생했다. 원인을 찾지 못한 채, 위의 코드처럼 변수에 할당한 후에 다시 배열에 넣어주었다.
배열안에서 순회가능한 객체가 아니라서 fetch를 사용할 수 없는건지는 모르겠다.
Promise에는 취소라는 개념이 없다. 그래서 Promise.all()의 배열 내 요소 중 어느 하나라도 거부를 하게 되면 Promise.all()도 즉시 거부한다.
Async & Await
마지막은 최신 문법인 await을 사용해서 풀어보는 것이였다.
// 함수 앞에 'async'를 붙여준다.
async function getAsynce () {
// fetch 앞에 'await'를 붙여준다.
let news = await fetch(newsURL)
.then((response) => {
return response.json();
})
let weather = await fetch(weatherURL)
.then((response) => {
return response.json();
})
return {news: news.data, weather: weather}
}
이틀동안 Promise를 공부해보고 실습도 해보았지만, Async & Await를 사용해서 작성한 코드가 제일 깔끔해보였다.
이렇게 Promise 스프린트도 끝이 났다. 정말 어렵고 중요한 내용이라고 해서 긴장을 많이 했었는데, 이틀 연속 정규시간보다 2~3시간씩 일찍 끝나서 시간이 굉장이 여유로웠다. 그래서 저녁에는 따로 듣고 있는 React 강의를 듣고 공부를 했다.
어제 오늘 배웠던 내용들도 저번주에 선행학습을 조금 했었는데 많이 도움이 되었다. 앞으로도 꾸준히 시간이 남을지는 모르겠지만 스프린트 정규 시간이외에 더 필요한 스택들에 대해서 공부를 해야겠다!!
👊 내일의 TIW(today I Will)
HTTP, Ajax