2021년 7월 27일에 작성된 문서 4번 입니다.
javascript 배운 내용을 정리했습니다.
fetch를 이용한 네트워크 요청
비동기 요청의 대표적인 사례 : 네트워크 요청
네트워크를 통해 이뤄지는 요청은 그 형태가 다양합니다. 그 중에서 URL로 요청하는 경우가 가장 흔합니다. URL로 요청하는 걸 가능하게 해 주는 API가 바로 fetch API입니다.
- 동적으로 데이터를 받아와야 하는 정보 : 최신 뉴스, 날씨/미세먼지 정보
이럴 때 많은 웹사이트에서는 해당 정보만 업데이트하기 위해 요청 API를 이용합니다. 이 콘텐츠에서는 그 중 대표적인 fetch API를 이용해 해당 정보를 원격 URL로부터 불러오는 경우를 설명합니다. 다음은 원격 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())
.then((json) => console.log(json))
.catch((error) => console.log(error));- fetch API는 Promise의 형식으로 이루어져 있다.
//개발자도구의 콘솔에서 fetch API를 사용하여 데이터를 요청
fetch(url)
.then((response) => response.json()) // 자체적으로 json() 메소드가 있어, 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달합니다
.then((json) => console.log(json)) // 콘솔에 json을 출력합니다
.catch((error) => console.log(error)); // 에러가 발생한 경우, 에러를 띄웁니다Written with StackEdit.
