fetch를 이용한 네트워크 요청
비동기 요청의 가장 대표적인 사례는 네트워크 요청이다
네트워크를 통해 이뤄지는 요청은 그 형태가 다양한데
그 중에서 URL로 요청하는 경우가 가장 많다
URL로 요청하는 걸 가능하게 해 주는 API가 바로 fetch API이다 !!
포털사이트를 보면 자주 변하는 정보와, 고정적인 정보가 따로 분리되어 구성되어 있다
이 중에서 최신 뉴스나 날씨/미세먼지 정보가 바로 동적으로 데이터를 받아와야 하는 정보이다
이럴 때 많은 웹사이트에서는 해당 정보만 업데이트하기 위해 요청 API를 사용한다
밑의 사진은 원격 URL로부터 정보를 받아와서 특정 DOM 엘리먼트를 업데이트하는 방법이다
fetch API는 위와 같이, 특정 URL로부터 정보를 받아오는 역할을 한다
이 과정이 비동기로 이루어지기 때문에, 경우에 따라 다소 시간이 걸릴 수 있다
이렇게 시간이 소요되는 작업을 요구할 경우에는 blocking이 발생하면 안 되므로,
특정 DOM에 정보가 표시될 때까지 로딩 창을 대신 띄우는 경우도 있다
fetch API 사용법
원격으로 요청하고, 데이터를 받아올 수 있는 URL이 있다
fetch API를 사용하여 데이터를 요청 해보자
let url =
"https://v1.nocodeapi.com/codestates/google_sheets/YbFMAAgOPgIwEXUU?tabId=최신뉴스";
fetch(url)
.then((response) => response.json())
// 자체적으로 json() 메소드가 있어, 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달
.then((json) => console.log(json)) // 콘솔에 json을 출력
.catch((error) => console.log(error)); // 에러가 발생한 경우, 에러를 띄웁니다
:)