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 toiminnot ovat käyttäneet tietoja, jotka on jo toimitettu sinulle erillisenä JavaScript-tiedosto, mutta todellisessa maailmassa tiedot on noudettava joistakin ulkoista palvelua ennen kuin sitä voidaan käyttää.

Tässä harjoituksessa aiot lisätä kaksi uutta funktiota functions.js tiedosto. Ensimmäinen on yleinen aputoiminto JSON-tietojen hakemiseen ulkopuolisista palveluista. Toinen toiminto liittyy tarkemmin API-palveluun käytetään, mutta se hyödyntää ensimmäistä toimintoa noudettaessa tietoja kohteesta API.

Funktiot ovat:

1. getJSON(url)

• Ottaa yhden parametrin “url”, jonka tyyppi on “string” tai “URL-objekti <https://javascript.info/url>`_

• Käyttää window.fetch hakeaksesi tietoja URL-osoitteesta

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

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

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

2. getStackOverflowData (apiUrl, technologies = null)

• Ottaa parametrin “apiUrl”, jonka tyyppi on “string”.

• Ottaa toisen parametrin “technologies”, jonka tyyppi on “Array<string>” (Matriisiarvot pitäisi olla “merkkijonoja”). Tämä parametri on valinnainen, ja sen oletusarvo on null.

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

• Lue lisää kyselymerkkijonon (kutsutaan myös hakuparametreiksi) luomisesta

• Hae tiedot getJSON(url)-funktiolla ja palauta JSON

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

• Voit vapaasti tehdä funktiosta asynkronisen, jos haluat tai käyttää .then(). getJSON(url) palauttaman lupauksen käyttöliittymä Jälleen valinta on sinun.

Älä nimeä toimintoja 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) <https://tie-lukioplus.rd.tuni.fi/cais/api/stackoverflow/ tilastot>`_ testataksesi toimintaasi. Samaa APIa käytetään myös tehtävässä.

Sinun tulee tutustua julkaisun materiaaliin ja viittauksiin osion asynkronisesta JavaScriptistä 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

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

Promise {<pending>}

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

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