1. AJAX에 대해 알아 보자
2. Fetch API란?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button onclick="fetchTodo1('2')">통신 요청</button>
<script>
// 네트워크 요청 처리 Fetch API 의 활용
// 소화시키는 방법 1
async function fetchTodo1(todoId) {
try {
// 인수 1 -> URL 넣기
// fetch 함수는 미래타입으로 응답 한다.
let promiseData = await fetch(
"https://jsonplaceholder.typicode.com/todos/" + todoId,
{
method: "GET",
headers: {
"Content-type": "application/json",
},
}
);
console.log('동기적 방식으로 요청 및 파싱 까지');
let todo = await promiseData.json();
console.log(todo);
} catch (error) {
// 요류 발생시 콘솔에 출력
console.log("error : " + error);
}
}
// 소화시키는 방법 2 = 비동기 처리 then() 과 catch 사용하기
function fetchTodo2(todoId) {
fetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`, {
method: "GET",
headers: {
"Content-type": "application/json",
},
})
.then((proData) => {
console.log("수행 1");
return proData.text(); // 응답 본문(body)을 문자열 변환 처리
})
.then((bodyText) => {
console.log("수행 2");
const todo = JSON.parse(bodyText);
console.log("파싱된 객체 : ", todo);
console.log(" completed : ", todo.completed);
console.log(" id : ", todo.id);
console.log(" title : ", todo.title);
console.log(" userId : ", todo.userId);
})
.catch((error) => {
console.log(error);
});
}
// HTTP 1.1 <--- JSON - GET, POST () --> REST API // --> GET, POST, PUT, DELETE
function fetchPost1() {
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title: "서버에 자원 등록 요청",
body: "비동기 통신 POST 처리 방식 연습",
userId: 1,
}),
})
.then((proData) => {
console.log("수행 1");
return proData.html(); // 응답 본문(body)을 문자열 변환 처리
})
.then((bodyText) => {
console.log("수행 2");
const todo = JSON.parse(bodyText);
console.log("파싱된 객체 : ", todo);
console.log(" completed : ", todo.completed);
console.log(" id : ", todo.id);
console.log(" title : ", todo.title);
console.log(" userId : ", todo.userId);
})
.catch((error) => {
console.log(error);
});
}
// fetchPost1(); // 함수에 호출
testPatch(); // 함수 호출
function testPatch() {
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "PATCH",
body: JSON.stringify({
title: "foo",
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));
}
</script>
</body>
</html>
