fecth API에 대해
네이버 사이트를 생각해보자.
예를들어 검색 창과 메일 카페등의 메뉴 부분은 고정적인 정보지만
밑의 뉴스 기사들이나 날씨등의 정보는 계속 변해야 함!
그래서 많은 웹사이트들은 해당 정보만 업데이트하기 위해 요청 API를 이용
지금은 대표적인 fetch API를 이요해 해당 정보를 원격 URL로 부터 불러오는 경우를 연습하자!
fetch API는 위와 같이, 특정 URL로부터 정보를 받아오는 역할을 함!
이때 blocking이 발생하면 안되니까, 특정 DOM에 정보가 표시될 때까지 로딩 창을 대신 띄우자!
fetch API 사용법!
다음은 원격으로 요청하고, 데이터를 받아올 수 있는 URL이 있음
- 최신 뉴스: https://v1.nocodeapi.com/codestates/google_sheets/YbFMAAgOPgIwEXUU?tabId=최신뉴스
- 날씨 정보: https://v1.nocodeapi.com/codestates/google_sheets/YbFMAAgOPgIwEXUU?tabId=날씨&row_id=2
Ex1) fecth 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)); // 에러가 발생한 경우 에러띄움
'코딩공부 > T.I.L' 카테고리의 다른 글
| 2022-01-27 HTTP를 이용한 클라이언트-서버 통신과 API (0) | 2022.01.27 |
|---|---|
| 2022-01-27 클라이언트-서버 아키텍쳐 (0) | 2022.01.27 |
| 2022-01-25 Node.js 모듈 사용법 (0) | 2022.01.25 |
| 2022-01-25 타이머 API (0) | 2022.01.25 |
| 2022-01-25 비동기 (0) | 2022.01.25 |