Embedded Files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Api Call Example</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 15px;
}
h1 {
font-size: 40px;
margin-bottom: 30px;
}
.posts-list-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.post-item {
display: flex;
flex-direction: column;
gap: 10px;
border: 1px solid rgb(0, 255, 98);
padding: 10px;
background-color: rgb(86, 14, 164);
}
.post-item h3 {
color: #fff;
font-size: 20px;
}
.post-item p {
font-size: 18px;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<h1>API Call Example</h1>
<div class="posts-list-container"></div>
</div>
<script>
const postsListContainer = document.querySelector(".posts-list-container");
//fetch using XHR
function fetchUsingXHR() {
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts");
xhr.responseType = "json";
xhr.send();
xhr.onload = () => {
if (xhr.status === 200) {
displayResults(xhr.response);
} else {
console.log("Some Error ocurred");
}
};
}
function fetchUsingFetchMethod() {
const fetchRequest = fetch("https://jsonplaceholder.typicode.com/posts", {
method: "GET",
});
fetchRequest
.then((response) => response.json())
.then((result) => displayResults(result))
.catch((e) => console.log(e));
}
async function fetchUsingAsynCAwaitMethod(){
const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
method: "GET",
});
const result = await response.json();
displayResults(result)
console.log('====================================');
console.log(result);
console.log('====================================');
}
function helperMethod(method, url){
const promise = new Promise((resolve,reject)=> {
const xhr = new XMLHttpRequest();
xhr.open(method,url);
xhr.responseType = 'json';
xhr.send();
xhr.onload = ()=> {
if(xhr.status === 200){
resolve(xhr.response)
} else {
reject(xhr.response)
}
}
})
return promise;
}
async function fetchUsingXHRAndAsyncAwait(){
const response = await helperMethod('GET', "https://jsonplaceholder.typicode.com/posts");
displayResults(response)
console.log('====================================');
console.log(response);
console.log('====================================');
}
function displayResults(posts) {
postsListContainer.innerHTML = posts
.map(
(postItem) => `
<div class="post-item">
<h3>${postItem.title}</h3>
<p>${postItem.body}</p>
</div>
`
)
.join(" ");
}
// fetchUsingXHR();
//fetchUsingFetchMethod();
//fetchUsingAsynCAwaitMethod();
fetchUsingXHRAndAsyncAwait()
</script>
</body>
</html>
Page updated
Google Sites
Report abuse