반응형
JavaScript Fetch API사용 예제
자바스크립트 자체 통신 API Fetch를 이용. 간단 예제를 포스팅해본다.
Fetch API는 Promise로 서버에 요청을 할 수 있는 표준이 되어가고 있다.
간단한 예제
초 간단 예제를 작성해본다.
이전에 포스팅한 Json 무료 가상 Rest JSONPlaceholder API를 백엔드라고 가정하고 통신을 해본다.
2022.12.06 - [슬기로운 자바 개발자 생활/etc] - Json 무료 가상 Rest API 서버 - JSONPlaceholder
Json 무료 가상 Rest API 서버 - JSONPlaceholder
HTTP 통신을 해서 JSON 데이터를 받아야 할 경우 (Backend API가 필요할 때) J-query나 리액트, Vue 같은 자바스크립트 프레임워크등을 공부할 때 Json 데이터를 가져올 API 서버가 필요할 때가 있다. DB를 설
ecolumbus.tistory.com
통신으로 가져온 데이터 중 Name, Email 주소를 Html 페이지에 표시해보는 간단한 코드다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<h1>Authors</h1>
<ul id="authors">
</ul>
<button onclick="doAction()">click me</button>
<script>
function doAction(){
alert('시작');
const ul = document.getElementById('authors');
const list = document.createDocumentFragment();
const url = 'https://jsonplaceholder.typicode.com/users';
fetch(url)
.then((response) => {
console.log("통신 시작");
return response.json();
})
.then((data) => {
console.log(data);
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
li.appendChild(name);
li.appendChild(email);
list.appendChild(li);
ul.appendChild(list);
});
})
.catch(function(error) {
console.log(error);
});
ul.appendChild(list);
console.log('종료');
}
</script>
</body>
</html>실행 결과.
반응형
'Web Front 개발공부 > HTML과 JAVASCRIPT' 카테고리의 다른 글
| 슬기형의 자바스크립트 기초강의 - 문자열 다루기 04-1 (0) | 2022.12.30 |
|---|---|
| 슬기형의 자바스크립트 기초강의 - 확인 및 취소 다이얼로그 03 (0) | 2022.12.26 |
| 슬기형의 자바스크립트 기초강의 - HTML 변경하기 02 (0) | 2022.12.25 |
| 슬기형의 자바스크립트 기초강의 - 알림박스, 다이얼로그 박스 표시 01 (0) | 2022.12.24 |
| 웹브라우저 저장소 스토리지storage 간단 예제 (0) | 2022.12.20 |
댓글