728x90
[1]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<div id="result">출력 영역</div>
</body>
</html>
<script>
const result = document.getElementById("result");
const render = (content) => {
result.innerHTML = JSON.stringify(content);
}
const promiseajax = (method, url, payload) => {
return new Promise((resolve, reject) => {
const request = new XMLHttpRequest();
request.open(method, url);
request.setRequestHeader('Content-type', 'application/json');
request.send(JSON.stringify(payload));
request.addEventListener("load", () =>{
resolve(request.response);
});
request.addEventListener("error", () =>{
reject(new Error(request.status));
});
});
}
// 실제 요청
promiseajax("GET", "https://jsonplaceholder.typicode.com/posts")
.then(JSON.parse)
.then(render, console.error);
</script>
[2] fetch then catch 예제
fetch('jsondata.json')
.then((response)=>response.json())
.then((data)=> console.log(data.documents[2].name))
.catch((e)=> console.log(e.message));728x90
'🤹🏻♀️ 자바스크립트 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁' 카테고리의 다른 글
| [javascript] 자바스크립트 for in 과 for of 차이 (0) | 2022.11.13 |
|---|---|
| [JS] JSON .parse VS .stringify 차이점 (0) | 2022.11.12 |
| [javascript] 동기, 비동기 (예제) (0) | 2022.11.11 |
| [javascript] 자바스크립트 문자열 정렬 (오름차순, 내림차순) (0) | 2022.11.10 |
| [javascript] 자바스크립트 숫자 배열 정렬 (0) | 2022.11.10 |
댓글