<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="test1()">Promise1 Test</button>
<button onclick="test2()">Promise2 Test</button>
<button onclick="test3()">Promise3 Test</button>
<button onclick="test4()">Promise4 Test</button>
<script>
function test1(){
console.log("test1 start");
setTimeout(() => { // Tast Queue 등록
console.log("통신 요청 start");
console.log("통신 완료 end");
}, 2000);
console.log("test1 end");
}
function test2(){
let data;
console.log("test2 start");
setTimeout(() => { // Tast Queue 등록
console.log("통신 완료");
data = 200;
}, 2000);
console.log("test2 end");
console.log("값 : "+ data);
}
function test3(){
//resolve
//reject
console.log("test3 start");
let response = new Promise((resolve,reject) => {
setTimeout(() => { // Task Queue 담김
console.log("통신완료");
let data = 10;
resolve(data);
},2000);
});
console.log("값 : "+ response);
console.log("test3 end");
}
async function test4(){
//resolve
//reject
//await 가 컴파일 시점에 확인 된다.
//await 가 있으면 async 라는 예약어를 함수앞에 지정해 주어야 한다.
console.log("test4 start");
let response = await new Promise((resolve,reject) => {
setTimeout(() => { // Task Queue 담김
console.log("통신완료");
let data = 10;
resolve(data);
},2000);
});
console.log("값 : "+ response);
console.log("test4 end");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
//jquery 통신 코드 사용 방법
// $("#okBtn").on('click',() => {
// //만들어 두고 시작 $.ajax().done().fail()
// $.ajax({
// //통신 설정 : header , body 설정 등등..
// }).done((data,textStatus,xhr) =>{
// // 통신성공 하면 콜백 들어옴
// }).fail((error) => {
// //통신 실패시 콜백 들어옴
// });
// });
$("#okBtn").on('click',() => {
$.ajax({
type : "get",
url : "https://jsonplaceholder.typicode.com/posts/1",
contentType : "application/json; charset=utf-8",
}).done((data,textStatus,xhr) =>{
// console.log("data "+ data);
// console.log(typeof data);
// console.log(textStatus);
// console.log(xhr);
// console.log(xhr.responseJSON);
//let todo = JSON.parse(JSON.stringify(data));
let todo = xhr.responseJSON;
console.log(todo);
$("#result").append(`"title" : "${todo.title}"`);
}).fail((error) => {
console.log("error : "+ error);
});
});
});
</script>
<div id="result"></div>
<button id="okBtn">통신요청</button>
</body>
</html>