Skip to content
This repository has been archived by the owner on Mar 26, 2022. It is now read-only.
/ modular-project Public archive

Modular Project using webpack, babel, json-server and Axios

Notifications You must be signed in to change notification settings

remidosol/modular-project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.