728x90
반응형
[JavaScript] 18. AJAX와 Fetch
1. AJAX
=>AJAX는 웹 페이지에서 서버와 비동기적으로 데이터를 주고받기 위한 기술이다!
2. Ferch API
(1) Fetch API의 개
3. 시나리오 코드
(1-1) JSON PlaceHolder를 출력해보기
<!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="fetchTodo(1)">통신 요청</button>
<script>
//네트워크 요청 처리 Fetch API의 활용
function fetchTodo(todoId){
// 인수 1->URL 넣기
// fetch 함수의 리턴 타입은 Promise 타입(미래 타입)
let promiseData=fetch("https://jsonplaceholder.typicode.com/todos/"+todoId);
console.log(promiseData);
}
</script>
</body>
</html>
(1-2) await/async를 통해 출력해보기
<!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="fetchTodo(1)">통신 요청</button>
<script>
//네트워크 요청 처리 Fetch API의 활용
async function fetchTodo(todoId){
try {
// 인수 1->URL 넣기
// fetch 함수의 리턴 타입은 Promise 타입(미래 타입)
let promiseData=await fetch("https://jsonplaceholder.typicode.com/todos/"+todoId);
console.log(promiseData);
// JSON 형식의 문자열을 변수에다가 저장
// PromiseData 데이터 타입을 사용할려면 역시나 await 키워드를 사용해주어야 한다.
let todo=await promiseData.json();
console.log("todo : "+JSON.parse(todo));
} catch (error) {
// 오류 발생 시 콘솔에 출력
console.log("error : "+error);
}
}
</script>
</body>
</html>
(2) 응답 주고 받기
<!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="fetchTodo2(2)">통신 요청</button>
<script>
//네트워크 요청 처리 Fetch API의 활용
// 소화시키는 방법 1
async function fetchTodo(todoId){
try {
// 인수 1->URL 넣기
// fetch 함수의 리턴 타입은 Promise 타입(미래 타입)
let promiseData=await fetch("https://jsonplaceholder.typicode.com/todos/"+todoId);
console.log(promiseData);
// JSON 형식의 문자열을 변수에다가 저장
// PromiseData 데이터 타입을 사용할려면 역시나 await 키워드를 사용해주어야 한다.
let todo=await promiseData.json();
console.log("todo : "+todo);
} catch (error) {
// 오류 발생 시 콘솔에 출력
console.log("error : "+error);
}
}
// 소화시키는 방법2 = 비동기 처리 then()과 catch()를 사용하기
function fetchTodo2(todoId){
fetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`)
.then(proData=>{
console.log("then 수행 1");
console.log("proData : "+proData);
console.log("proData : "+ proData.body);
// 응답 본문을 문자열로 변환
// proData <--- Response Object 타입입니다.
console.log("json text : "+proData.text());
})
.catch(error=>{
console.log(error);
});
}
</script>
</body>
</html><!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 함수의 리턴 타입은 Promise 타입(미래 타입)
let promiseData=await fetch("https://jsonplaceholder.typicode.com/todos/"+todoId,{
method:'GET',
headers:{
'Content-type':'application/json'
}
})
// 소화시키는 방법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("파싱된 객체 : "+todo);
console.log("파싱된 객체 : "+todo);
console.log("파싱된 객체 : "+todo);
console.log("파싱된 객체 : "+todo);
})
.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/1',{
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringfy({
title: '서버에 자원 등록 요청',
body: '비동기 통신 POST 처리 방식 연습',
userId: 1
})
}).then(response =>{
console.log('수행1');
console.log(JSON.parse(response.text()));
// let resultBody = JSON.parse(response.text());
// console.log("응답받은 결과를 문자열에서 JS 객체로 변환 처리(파싱)", resultBody);
})
.catch(error=>{
console.log(error);
});
}
// fetch 함수의 호출
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>728x90
반응형
'HTML,CSS, JS > JavaScript' 카테고리의 다른 글
| [JavaScript] 20. 실행 환경 구축 (0) | 2024.08.21 |
|---|---|
| [JavaScript] 19. 로컬 스토리지 (0) | 2024.08.21 |
| [JavaScript] 17. Promise 타입 (0) | 2024.08.02 |
| [JavaScript] 16. 이벤트 처리 - 배너 변경하기 (0) | 2024.08.01 |
| [JavaScript] 15. 쿼리 셀렉트문과 클래스 선택자 (0) | 2024.08.01 |