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

Here on Stackblitz.

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/

TechNotes Central

Wednesday, March 16, 2022

JavaScript Fetch API CRUD