Fetch¶

Lataa malli¶

fetch.zip

Ohjeet¶

Aloita seuraavilla vaiheilla:

Lataa tämän harjoituksen zip-tiedosto ja pura se tyhjään hakemistoon.
Kopioi harjoituksessa 6.5 (Stackoverflow-tietojen käsittely) palauttamasi tiedosto functions.js samaan hakemistoon

Toistaiseksi funktiosi ovat käyttäneet tietoja, jotka on jo toimitettu sinulle erillisenä JavaScript-tiedostona, mutta todellisessa maailmassa tiedot on noudettava jostakin ulkoisesta palvelusta ennen kuin niitä voidaan hyödyntää.

Tässä harjoituksessa aiot lisätä kaksi uutta funktiota functions.js tiedostoon. Ensimmäinen on yleinen apufunktio JSON-tietojen hakemiseen ulkopuolisista palveluista. Toinen funktio liittyy tarkemmin käyttämäämme API-palveluun, mutta se hyödyntää ensimmäistä funktiota noudettaessa tietoja API:sta.

Funktiot ovat:

getJSON(url)

Ottaa yhden parametrin url, jonka tyyppi on string tai URL object

Käyttää window.fetch hakeakseen tietoja URL-osoitteesta

Jäsentää tiedot JSONiksi ja palauttaa JSONin (teknisesti funktio palauttaa Promisen, joka ratkaisee JSON:n, sillä fetch palauttaa aina Promisen)

Voit tehdä funktiosta asynkronisen, jos haluat, tai käyttää fetch:n kanssa .then()-käsittelijää, valinta on sinun

VINKKI: lue osio asynkronisesta JavaScriptistä ja kaikki koodiesimerkit huolellisesti…

getStackOverflowData (apiUrl, technologies = null)

Ottaa parametrin apiUrl, jonka tyyppi on string.

Ottaa toisen parametrin technologies, jonka tyyppi on Array<string> (Array-arvot tulisi olla merkkijonoja). Tämä parametri on valinnainen, ja sen oletusarvo on null.

Jos toinen parametri on annettu eikä se ole tyhjä, sinun tulee rakentaa query string muotoa ?tech=item1;item2;item3 ja lisätä se apiUrl-osoitteeseen. Kohteet on erotettava puolipisteellä (“;”). Ole varovainen, koodaa query string oikein: on merkkejä, jotka eivät ole sallittuja URL-osoitteissa.

Lue lisää query string (kutsutaan myös hakuparametreiksi) luomisesta

Hae tiedot getJSON(url)-funktiolla ja palauta JSON

Jälleen tämä toiminto palauttaa teknisesti Promisen, joka ratkaisee JSONin

Voit vapaasti tehdä funktiosta asynkronisen, jos haluat tai käyttää .then()-käsittelijää. Jälleen valinta on sinun.

Älä nimeä funktioita uudelleen, muuten testit eivät pysty havaitsemaan ja käyttämään niitä. Sinun tarvitsee vain palauttaa functions.js-tiedosto.

Avaa index.html selaimessasi. Jos toiminnot on toteutettu oikein, sinun pitäisi nähdä tutun näköinen menu ja taulukko ja sinun pitäisi pystyä valitsemaan eri teknologiat ja eri vuodet ja kaiken pitäisi toimia kuten ennen aikaisemmassa harjoituksessa Pinon ylivuototietojen käsittely

Voit käyttää API:amme (https://tie-lukioplus.rd.tuni.fi/cais/api/stackoverflow/stats) testataksesi funktioitasi. Samaa APIa käytetään myös tehtävässä.

Sinun tulisi tutustua asynkronisen JavaScriptin osion materiaaleihin ja viittauksiin, mutta tässä muutama linkki lisää, joista voi olla apua:

The Modern JavaScript Tutorial: Promises, async/await

MDN: Using Fetch

MDN: Using Promises

MDN: async/await

Attention

Jos lähetystäsi ei hyväksytä, tässä on muutamia vinkkejä funktioidesi testaamiseen.

Avaa index.html selaimessa. Varmista, että funktiosi löytyy ikkunasta avaamalla JavaScript konsolin ja kirjoittamalla:

getJSON("https://tie-lukioplus.rd.tuni.fi/cais/api/stackoverflow/stats")

Paluuarvon tulee olla:

Promise {<pending>}

Jos edellinen vaihe näytti hyvältä, yritä kirjoittaa:

getJSON("https://tie-lukioplus.rd.tuni.fi/cais/api/stackoverflow/stats").then((data) => console.log(data))

Aluksi sinun pitäisi saada paluuarvo Promise {<pending>} . Jonkin ajan kuluttua tämän pitäisi muuttua seuraavankaltaiseksi arvoksi:

Object { 2011: {…}, 2012: {…}, 2013: {…}, etc etc }

Tehtävää ladataan...