💡 학습 목표
|
1. AJAX에 대해 알아 보자
| 💡 AJAX (Asynchronous JavaScript and XML) AJAX는 웹 페이지에서 서버와 비동기적으로 데이터를 주고받기 위한 기술입니다 전통적인 방식의 문제점:
|
2. Fetch API란?
| 💡 Fetch API란? 웹 브라우저에서 제공하는 인터페이스로, 네트워크 요청을 쉽게 수행할 수 있게 해주는 기술입니다. 전통적으로 웹에서 비동기적으로 서버와 데이터를 주고받을 때 주로 사용되던 기술은 XMLHttpRequest(XHR)였습니다. XHR은 웹 개발 초기부터 사용되었으며, AJAX(Asynchronous JavaScript and XML)의 핵심 구성 요소로서 많은 웹 애플리케이션에서 사용되었습니다.그러나 XHR에는 복잡한 인터페이스, 불편한 오류 처리, 비표준화, Promise 미지원 등 한계점이 있어서 이를 대체 하기 위해 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.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);
});
}
// 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>
'JavaScript > JS 작업을 위한 코딩 연습' 카테고리의 다른 글
| JS 이벤트 처리 - 7(Promise) (0) | 2024.08.02 |
|---|---|
| JS 이벤트 처리 - 6(배너변경하기) (0) | 2024.08.01 |
| JS 이벤트 처리 - 5(이미지 토글) (0) | 2024.08.01 |
| JS 이벤트 처리 - 4(반복문과동적생성) (0) | 2024.08.01 |
| JS 이벤트 처리 - 3(forms) (0) | 2024.08.01 |
