Fetching data from Fake API Using Axios on webpack-dev-server

Description

I've tried to carry out GET data, POST data, PUT data and DELETE data simultaneously with DOM manipulation using Fake API and localhost.

fake-api/employee.json

Localhost rooted fake API's JSON file

This file is file that data would be fetched. The example is as following.

   {
     "employees": [
       {
         "name": "remidosol",
         "department": "Software",
         "salary": "0",
         "id": 1
       },
       {
         "name": "Suicide Engineer",
         "department": "Crime",
         "salary": "10000",
         "id": 2
       },
       {
         "name": "Server-i Garâm",
         "department": "Literature",
         "salary": "10",
         "id": 3
       },
       {
         "name": "Küfran İcazcı",
         "department": "Sad Story",
         "salary": "4000",
         "id": 5
       }
     ]
   }

---

src/requests.js

Creating Instance

Via using npm package for Axios, a instance that produced for HTTP requests has been created in requests.js as modular as shown following.

import ax from 'axios';
export function Requests() {
    this.req = ax.create({
        baseURL: `http://localhost:3000/employees/`,
        headers: {
            "Content-type": "application/json; charset=utf-8"
        }
        // ,timeout:1000
    });
}

Using Instance

For using instance, methods have been created as named getRequest, postRequest, putRequest, deleteRequest.

---

src/ui.js

Add/Edit/Delete Employee from UI

DOM manipulation for index.html.

---

src/index.js

Main File

This is the main file for execute all operations.

---

index.html

Skeleton

This file is reference for events and DOM.