Fetch API

När vi bygger hemsidor eller appar för webben kan vi använda oss av olika så kallade API:er (Application Programming Interface). Ett API är ett gränssnitt med funktioner som är kopplade mellan scriptspråket och bakomliggande bibliotek eller tjänst. Du kan se vilka Web API:er vi har att jobba med på MDN - Web API.

Ett verkligt trivsamt API är fetch. Vi kan med hjälp av det hämta filer och data från servrar via http-protokollet. JavaScript på klientsidan har ingen möjlighet att hämta data lokalt från hårddisken av diverse säkerhetsskäl.

När vi använder fetch behöver vi ett enda argument, viket är den url:en som datan finns tillgänglig på. Vi får tillbaka ett så kallat Promise - ett löfte om att vi kommer få tillbaka något, men inte när. När datan är laddad och vi kan jobba med den blir förfrågan (Request) löst (Resolve). Det är delar vi tar i senare kurser, men för stunden behöver vi ta reda på hur vi jobbar med den typen av funktionalitet.

async / await

Vi kan göra det med hjälp av async/await. De nyckelorden hjälper oss att strukturera koden mer som kanske är vana att programmera. Vi kikar på ett exempel där vi ska hämta en fil:

let data = await fetch(`https://url-to-a-file.json`) // Hämta datan
let json = await data.json() // Skapa ett JSON objekt av datan

// Här har du tillgång till datan

För att nyttja async kan vi skapa en egen funktion med nyckelordet async. För att använda await behöver vi wrappa anropet i en “async function”.

async function readData() {
  // Nu kan vi använda await i funktionen
  let data = await fetch(`https://url-to-a-file.json`)
  let json = await data.json()

  return json
}

För att sedan använda vår skapade funktion kallar vi på den med await:

let parsedData = await readData()
// Här har vi tillgång till datan

Läs mer om async på MDN.

Läs mer om await på MDN.

Läs mer om fetch på MDN.