How does API work ?

When we operate on webpage, it will need to get some data from backend.
But, it can’t get data directly from DB(database), instead, need to ask browser to do the favor.
Therefore, there is a communication method between browser and webpage called API.
(Application Programming Interface)

And API can be used to do GET / POST / PATCH / DELETE.

Timing to use each of API method

GET : When we want some data from DB
POST : User builds data on webpage site, validated by browser, then send to DB to store.
PATCH : Similar process to POST, aims to update data in DB.
DELETE : Remove one specified data in DB.

Difference between client side & server side

Client side: Client can use their unique UUID to access data, validation is not required.
Server side: Administrator have to pass validation, using TOKEN.

Therefor, when we send request from client-side to server-side
if this request is processed by serve-side API
then validation is required, and content is contained inside headers.

Let’s add validation content:

1 2	axios.defaults.headers['Authorization'] = `Bearer ${token}`; // axios 設定說明：https://github.com/axios/axios#config-defaults

How to use Axios ?

Apply Axios CDN

1	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Let’s create 4 buttons to represent each method

Attach each DOM, and link with event listener.

document.querySelector('#get').addEventListener('click', getData);
document.querySelector('#post').addEventListener('click', postData);
document.querySelector('#patch').addEventListener('click', patchData);
document.querySelector('#delete').addEventListener('click', deleteData);

Declare variable

1
2
3

var uuid = '';//every user has unique one
var token = '';//for validation purpose, not a fixed value
var apiPath = 'https://course-ec-api.hexschool.io/';

GET method

Before we start, one thing we need to know is
The API we use belongs to client side or server side ?
In this example, this GET API is server side, and need to pass validation.

HTTP Request: GET api/{uuid}/admin/ec/products

function getData() {
            console.log('getData');
            var api = `${apiPath}api/${uuid}/admin/ec/products`;
            axios.get(api)
                .then(function (res) {
                    console.log(res);
                })
        }

POST method

HTTP Request: POST api/{uuid}/admin/ec/product

function postData() {
            console.log('postData');
            var api = `${apiPath}api/${uuid}/admin/ec/product`;
            var data = {
                title: '好茶',
                category: 'tea',
                content: '內容',
                description:'描述',
                imageUrl: [
                    'https://images.unsplash.com/photo-1587918515749-a2a68b40a124?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'
                ],
                enabled: true,
                origin_price: 100,
                price: 90,
                unit: '杯'
            };
            axios.post(api, data)
                .then(function (res) {
                    console.log(res);
                })

        }

PATCH method

When edit one specified data, you need to get ID of that data.
HTTP Request: PATCH api/{uuid}/admin/ec/product/{id}

function patchData() {
            console.log('patchData');
            var api = `${apiPath}api/${uuid}/admin/ec/product/uWyvjgNuNn9DbR3lPyol46u5gT60memR1TFyB49L8tMmyjuYpkylKcVUg6z9flBg`;
            var data = {
                title: '更新資料',
                category: 'tea',
                content: '內容',
                description:'描述',
                imageUrl: [
                    'https://images.unsplash.com/photo-1587918515749-a2a68b40a124?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'
                ],
                enabled: true,
                origin_price: 100,
                price: 90,
                unit: '杯'
            };
            axios.patch(api, data)
                .then(function (res) {
                    console.log(res);
                })
        }

DELETE method

When delete one specified data, you need to get ID of that data.
HTTP Request: DELETE api/{uuid}/admin/ec/product/{id}

function deleteData() {
            console.log('deleteData');
            var api = `${apiPath}api/${uuid}/admin/ec/product/AnA2VmGKvwvO48281E5UtsKaGI7pFMNzqAJYMgfylnE89Ssb1bEataAipqU7nvEc`;
            axios.delete(api)
                .then(function (res) {
                    console.log(res);
                })
        }

Fly with code

Using Axios to do GET / POST / PATCH / DELETE