Fetch API
The Fetch API provides a interface for fetching resources including across the network. It will seem familiar to anyone who has used XMLHttpRequest, however the new API provides a more powerful and flexible feature set.
Browser compatibility
Fetch Rest CRUD API
These are APIs that we need to provide:
| Methods | Urls |
|---|---|
| GET | /posts |
| GET | /posts/{id} |
| POST | /posts |
| PUT | /posts/{id} |
| DELETE | /posts/{id} |
Technology
- JavaScript
- Stackblitz
- JSONPlaceholder
Ok. let go.
Project Structure
Service js
const endPoint = 'https://jsonplaceholder.typicode.com';
async function getAll() {
const response = await fetch(`${endPoint}/posts`);
const data = await response.json();
return data;
}
async function getById(code) {
const response = await fetch(`${endPoint}/posts/${code}`);
const data = await response.json();
return data;
}
async function savePost() {
const response = await fetch(`${endPoint}/posts`, {
method: 'POST',
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
});
const data = await response.json();
return data;
}
async function updateResourse(code) {
const response = await fetch(`${endPoint}/posts/${code}`, {
method: 'PUT',
body: JSON.stringify({
id: 1,
title: 'foo',
body: 'bar',
userId: 1,
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
});
const data = await response.json();
return data;
}
async function del(code) {
const response = await fetch(`${endPoint}/posts/${code}`, {
method: 'DELETE',
});
const data = await response.json();
return data;
}
export { getById, getAll, savePost, updateResourse, del };
Index js
// Import stylesheets
import './style.css';
import { getById, getAll, savePost, updateResourse, del } from './services.js';
// Write Javascript code!
const appDiv = document.getElementById('app');
const appDiv1 = document.getElementById('app1');
const appDiv2 = document.getElementById('app2');
const appDiv3 = document.getElementById('app3');
const appDiv4 = document.getElementById('app4');
(function () {
// your page initialization code here
// the DOM will be available here
getIdPost();
getAllPost();
savPosts();
//upResource();
// deleteById();
})();
async function deleteById() {
let json;
await del(1).then(function (data) {
json = data;
});
appDiv4.innerHTML = JSON.stringify(json);
}
async function upResource() {
let json;
await updateResourse(1).then(function (data) {
json = data;
});
appDiv3.innerHTML = JSON.stringify(json);
}
async function savPosts() {
let json;
await savePost().then(function (data) {
json = data;
});
console.log(json);
appDiv2.innerHTML = JSON.stringify(json);
}
async function getAllPost() {
let json;
await getAll().then(function (data) {
json = data;
});
appDiv1.innerHTML = JSON.stringify(json);
}
async function getIdPost() {
let json;
await getById(1).then(function (data) {
json = data;
});
appDiv.innerHTML = JSON.stringify(json);
}
Index html
<div><h2>GET BY ID https://jsonplaceholder.typicode.com/posts/1</h2></div>
<div id="app"></div>
<div><h2>POST https://jsonplaceholder.typicode.com/posts</h2></div>
<div id="app2"></div>
<div><h2>PUT https://jsonplaceholder.typicode.com/posts/1</h2></div>
<div id="app3"></div>
<div><h2>DELETE https://jsonplaceholder.typicode.com/posts/1</h2></div>
<div id="app4"></div>
<div><h2>GET ALL https://jsonplaceholder.typicode.com/posts</h2></div>
<div id="app1"></div>
Run & Test
Source Code
References.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
https://www.javascripttutorial.net/javascript-fetch-api/
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
https://jsonplaceholder.typicode.com/guide/
.jpeg)
.png)
