Fetch 기본 골격
fetch("url").then(res => res.json()).then(data => {
console.log(data)
})fetch("url") : url이랑 통신 요청
.then() : 요청 받으면 ()안 명령 실행
res => res.json() : 받은 데이터를 res라 부르고 json 형식으로 바꿈
then(data=>{}) : json 형태로 변경된 데이터를 data라고 부를게
JSON이란, JavaScript Object Notation의 줄임말로 JS 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷을 뜻한다.
→ 출처 : MDN Web Docs
Fetch란?
JS에서 제공하는 비동기통신으로 서버에게 요청하여 응답을 받을 수 있는 메서드이다.
Fetch 연습코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 시작하기</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function hey() {
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99';
//서울시에서 제공하는 open api 중 미세먼지에 관련된 api
fetch(url).then(res => res.json()).then(data => {
let data2 = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
console.log(data2);
let temp = `<p>${data2}</p>`;
$('#fet').append(temp);
})
}
//hey() 함수가 실행될 때 url에서 데이터를 받아와 공기 중 미세먼지 상태를 fet이라는 아이디를 가진 요소에 집어 넣는 코드
</script>
</head>
<body>
<button onclick="hey()">fetch 연습!</button>
<div id="fet">
<p>fetch 결과</p>
</div>
</body>
</html>서울시에서 제공하는 openAPI 중 미세먼지 농도에 관한 api를 Fetch하여 상태를 표시하는 코드이다.
에러 방지
fetch(url)
.then((res) => {})
.catch((err) => console.log("error:", err));
받아온 데이터가 문제가 있을 때 실행시키지 않고 console에 에러를 표시.
fetch(url).then(res => res.json()).then(data => {
let data2 = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
console.log(data2);
let temp = `<p>${data2}</p>`;
$('#fet').append(temp);
})
.catch((err)=>console.log(err));
위의 예시코드에 적용했을 때.
실패시 콘솔에 Failed to fetch라 뜬다.
하루 최소 1시간이라도 공부하자..