Part 11

HTTP komunikácia, Fetch API, databázové úložiská, Parse.com, Back4App, Firebase

HTTP Requests Libraries

veľa vecí na výber:
- Axios - Promise based HTTP client for the browser and node.js
- Superagent - Ajax with less suck — (and node.js HTTP client to match)
- Request - Simplified HTTP request client.
- Fetch - This is a native browser API for making requests. It’s intended to be an alternative to XMLHttpRequest.
- Supertest - Super-agent driven library for testing node.js HTTP servers using a fluent API

Fetch API

My sa však pozrieme na Fetch API. Pozrieme sa na neho hlavne z dôvodu, že sa stalo súčasťou prehliadačov a snaží sa o nahradenie pôvodného XMLHttpRequest.
Fetch API poskytuje rozhranie pre získavanie zdrojov (naprieč internetom). Podobá sa na XMLHttpRequest, ale je mocnejšie a poskytuje výrazne silnejšiu sadu funkcií.

Bootstrap

Budeme pracovať s filmovou databázou, ktorá sa nachádza uložená na serveri Back4App. Jej baseUrl je https://parseapi.back4app.com/classes/movies:
```
const baseUrl = 'https://parseapi.back4app.com/classes/movies';
```

Aby sme sa mohli autentifikovať, pripravíme si ešte hlavičky pre naše HTTP požiadavky:

const headers = {
    'X-Parse-Application-Id': 'axACcyh0MTO3z42rUN8vFHfyAgE22VRjd3IJOwlJ',
    'X-Parse-REST-API-Key': 'sQAPUPRNJg2GpZ9f0fXZaALSvekT7N2KmdM8kBWk'
}

Každú funkciu, ktorú vytvoríme, pomenujeme podľa HTTP metódy, ktorú v nej budeme ilustrovať.
A teaz sa môžeme hrať.

The `fetch()` Method

funkcia má nasledujúcu syntax:
```
fetchResponsePromise = fetch(resource, init);
```
kde:
- resource - This defines the resource that you wish to fetch. This can either be:
  - A USVString containing the direct URL of the resource you want to fetch. Some browsers accept blob: and data: as schemes.
  - A Request object.
- init - An options object containing any custom settings that you want to apply to the request.
Funkcia vracia promise. Kvôli jednoduchosti ilustrácie príkladov budeme používať asyncs - await. Vďaka tomu nám pomôže uzavrieť ilustrácie do samostatných funkcií.

GET Method

Pomocou HTTP metódy GET môžeme získať:
- kolekciu (zoznam) zdrojov
- jednu inštanciu (zdroj)

GET Collection Resource

Zoznam filmov, resp. všetky filmy vieme štandardne získať uvedením URL adresy končiacej s názvom zdroja. V našom prípade to bude samotná adresa baseURL. Výsledný fragment kódu môže vyzerať nasledovne:

async function get(){
    const init = {
        method: 'GET',
        headers: headers
    };

    const response = await fetch(baseUrl, init);
    const json = await response.json();
    console.log(json);
}

Metódu GET nie je nutné špecifikovať osobitne, pretože je predvolená. Vzhľadom na túto skutočnosť je možné tento fragment kódu aj skrátiť nasledovne:

async function get(){
    const response = await fetch(baseUrl, { headers });
    const json = await response.json();
    console.log(json);
}

Response Object

Za pozornosť stojí samozrejme aj objekt odpovede Response. Tu nás môže zaujímať hlavička dostupná cez response.headers alebo HTTP Status Code dostupný cez response.status.
V prípade, že dôjde v tomto prípade k inému návratovému kódu ako 200, nedôjde k výnimke, ale nastaví sa len príslušná členská premenná objektu odpovede. Problémové situácie typu: zdroj nebol nájdený (404) alebo nedostatočná autentifikácie (401) treba overovať ručne.

GET Instance Resource

to môžeme získať dvoma základnými spôsobmi:
1. cez štandardnú URL s cestou, ktorá reprezentuje konkrétny end-point
2. pomocou filtra na query parameters

prvý spôsob bude vyzerať takto:

async function get(movieId){
    const response = await fetch(`${baseUrl}/${movieId}`, { headers });
    const json = await response.json();
    console.log(json);
}

druhý spôsob pomocou query parameters bude vyzerať zasa takto:

async function get(movieId){
    const url = new URL(${baseUrl}),
        params = { where: JSON.stringify({ movieId }) };
    Object.keys(params).forEach(key =>
        url.searchParams.append(key, params[key])
    );

    const response = await fetch(url, {
        method: "GET",
        headers: headers
    });

    const json = await response.json();
    console.log(json);
}

Podobne - špecifikáciu metódy môžeme oponúť, nakoľko metóda GET je predvolená. Tým pádom môžeme aj tento fragment kódu skrátiť nasledovne:

async function get(movieId){
    const url = new URL(`${baseUrl}`),
        params = { where: JSON.stringify({ movieId }) };
    Object.keys(params).forEach(key =>
        url.searchParams.append(key, params[key])
    );

    const response = await fetch(url, { headers });

    const json = await response.json();
    console.log(json);
}

POST Method

Pomocou metódy POST vieme vytvoriť nový zdroj. Ako URL adresa je použitá adresa končiaca s názvom zdroja, čiže v našom prípade adresa uložená v premennej baseUrl.
Najprv však vytvoríme nový zdroj, ktorý bude reprezentovať nový zdroj. Obecne ho nazývame payload, ale v kontexte našej aplikácie, resp. databázy, budeme vytvárať nový film:
```
const movie = {
    title: "Farmagedon",
    year: 2019,
    genres: ["Family", "Comedy", "Animation", "Children"]
};
```

Po jeho vytvorení už len pripravíme objekt požiadavky pre fetch():

async function post(movie){
    const response = await fetch(baseUrl, {
        headers,
        method: "POST",
        body: JSON.stringify(movie)
    });

    const data = await response.json();
    console.log(data);
}

DELETE Method

Mazanie funguje podobne, ako v prípade metódy GET pre získanie jednej položky. V prípade potreby odstránenia jednej položky použijeme rovnakú URL adresu, ale zmení sa HTTP metóda na DELETE. Fragment kódu môže vyzerať nasledovne:
```
async function delete(movieId){
    const response = await fetch(`${baseUrl}/${movieId}`, { headers });
    const json = await response.json();
    console.log(json);
}
```
Pozor: CORS problém!

PUT Method

Metódu PUT používame na aktualizáciu zdroja. V závislosti od implementácie to môže byť aj metóda PATCH.
Pri aktualizovaní je však dôležité to, či sa jedná o:
- full update (plná aktualizácia), alebo o
- partial update (čiastočná aktualizácia).
V prípade, že sa jedná o full update, nahrádza sa položka za položku. To znamená, že ak sa v novom zdroji nenachádzajú položky pôvodného zdroja, budú tieto po aktualizácii vymazané.
V prípade, že sa jedná o partial update, budú prepísané len tie položky, ktoré sa nachádzajú v novom zdroji. Pôvodné položky zostanú nezmenené (neprepísané).
Server back4app používa na aktualizáciu položiek HTTP metódu PUT a použva metódu čiastočnej aktualizácie.
Ak teda chcem vykonať zmenu len v názve filmu, vytvorím nový payload:
```
const payload = {
    title: "Shaun the Sheep: Farmagedon"
};
```

A následne ho použijeme ako telo našej požiadavky pre HTTP metódu PUT:

async function put(movieId, payload){
    const response = await fetch(`${baseUrl}/${movieId}`, {
        headers,
        method: "PUT",
        body: JSON.stringify(payload)
    });

    const data = await response.json();
    console.log(data);
}

Additional Links

Fetch API
Using Fetch
Fetch - Living Standard - The Fetch standard defines requests, responses, and the process that binds them: fetching.
MovieLens - GroupLens Research has collected and made available rating data sets from the MovieLens web site (http://movielens.org). The data sets were collected over various periods of time, depending on the size of the set. Before using these data sets, please review their README files for the usage licenses and other details.
Comparing JavaScript HTTP Requests Libraries for 2019 - Comparing 5 JS and Node.js HTTP Request libraries to choose from in 2019: Axios, Request, Superagent, Fetch and Supertest.
fetch() - The fetch() method of the WindowOrWorkerGlobalScope mixin starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.