Fetch 함수 연습
fetch 쓸 때 제이쿼리도 임포트 해놓기
let url = 'url '
} fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 시작하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function hey() {
let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
} fetch(url).then(res => res.json()).then(data => {
console.log(data)
})
</script>
</head>
<body>
<button onclick="hey()">fetch 연습!</button>Fetch 함수 정리 .....다시하기.
- fetch 함수는 기본으로 GET 방식으로 작동한다.
- 첫번째 인자로 url, 두번째 인자로 옵션객체를 받고 ,promise 타입의 객체를 반환한다. 반환된 객체는 API호출이 성공했을 경우 응답 (response)객체를 resolve 하고 실패했을 경우에는 예외(error)객체를 reject 한다
- resolve- 기능을 정상적으로 수행해서 마지막에 데이터를 전달한다.
then()으로 결과물을 받는다.- reject- 중간에 문제가 생기면 호출된다.
catch()로 결과를 받는다.
fetch("여기에 URL을 입력") // fetch(url)
fetch 코드를 이용하면 url에 저장했던 링크를 json으로 받은 data라는 변수에
이번에 받은 데이터가 리스트 딕셔너리의 형태를 띄고 있어 가져올 때 리스트 딕셔너리의 문법을 따른다.
결과값
function hey() {
let url = 'http://spartacodingclub.shop/sparta_api/seoulair'
fetch(url).then(res => res.json()).then(data => {
console.log(data['RealtimeCityAir']['row'][0])//여기
})
} console에서 row 뒤에 0을 빼고 rows로 바꾸고 새로고침 하면 모든 데이터가 나온다.
fetch(url).then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row'];
console.log(data['RealtimeCityAir']['row'])
rows.forEach(a => {
console.log(a);
});내가 원하는 데이터만 가져오는 방법
rows.forEach(a => {
let gu_name = a['MSRSTE_NM'];
let gu_mise = a['IDEX_NM'];
console.log(gu_name,gu_mise);
}); 이거 하면서 느낀 점 ....
전혀 이해가 안되고 그냥 따라하는 느낌
응용이 전혀 안되고 있음.....
그냥 읽는 것 밖에 못함..
문제가 이게 실습도 중요하긴 한데 이론도 어느정도는 설명을 해줘야 글을 쓰지 실습만 하고 설명은 대충하는 느낌이라서
다른 사람들 글 보고 검색했는데 정보가 너무 많아서 정리하기 힘들다..
이 강의를 들으면서 제일 많이 들은 말이 그냥 무조건 해봐라는 것이다.
그리고 어려운 게 있으면 하지 말고 그냥 기다리기만 해서 조금 응용하는 걸 방해하는 것 같았다.
