logo

Jak se připojit k API pomocí JavaScriptu

Velkou součástí práce s JavaScriptem je vědět, jak se připojit k API. Jako začínající vývojář vám možná bylo v určitém okamžiku řečeno, abyste si "pohráli s některými API!" naučit se, co to je a jak s nimi pracovat. Pokud jste se někdy podívali na dokumentaci k rozhraní API a nevěděli jste, kde začít nebo co dělat, a byli jste frustrovaní, tento článek je pro vás.

Vytvoříme velmi jednoduchou webovou aplikaci s jednoduchým JavaScriptem, která bude získávat informace z API a zobrazovat je na stránce. Nebude zde žádný server, závislosti, nástroje pro sestavení ani cokoli jiného, ​​co by dále bahnilo vody na již tak obtížném a matoucím tématu pro začátečníky.

  • Zobrazit ukázkovou aplikaci
  • Zdrojový kód na GitHubu

Předpoklady

  • Základní znalost HTML a CSS.
  • Základní znalost syntaxe a datových typů JavaScriptu.
  • Základní znalost práce s objekty JSON a JavaScript. Tento krátký článek to úplně objasní.

Vše ostatní probereme cestou.

Cíle

Napíšeme od nuly tuto jednoduchou webovou aplikaci, která se připojí k rozhraní Studio Ghibli API, načte data pomocí JavaScriptu a zobrazí je na přední straně webu. Toto není měl být rozsáhlým zdrojem o rozhraních API nebo REST - jen nejjednodušší možný příklad k uvedení do provozu, ze kterého můžete v budoucnu stavět. Naučíme se:

  • Co je webové rozhraní API.
  • Přečtěte si, jak používat požadavek HTTP GET s JavaScript
  • Jak vytvářet a zobrazovat prvky HTML pomocí JavaScriptu.

Bude to vypadat takto:

Začněme.

Rychlý přehled

API je zkratka pro Application Program Interface, což lze definovat jako soubor metod komunikace mezi různými softwarovými komponentami. Jinými slovy, API umožňuje softwaru komunikovat s jiným softwarem.

Zaměříme se konkrétně na webová rozhraní API, která umožňují webovému serveru interakci se softwarem třetích stran. V tomto případě webový server používá požadavky HTTP komunikovat s veřejně dostupným koncovým bodem URL obsahující data JSON. Pokud je to nyní matoucí, na konci článku to bude dávat smysl.

Možná znáte pojem CRUD app, což je zkratka pro Create, Read, Update, Delete. K vytvoření aplikace CRUD lze různými metodami použít jakýkoli programovací jazyk. Webové rozhraní API používá požadavky HTTP, které odpovídají slovesům CRUD.

Akce Metoda HTTP Popis
Vytvořit POST Vytvoří nový zdroj
Přečíst GET Načte zdroj
Aktualizovat PUT /PATCH Aktualizuje existující zdroj
Smazat DELETE Odstraní zdroj

Nastavení

Co je naším cílem? Chceme získat data pro všechny filmy Studio Ghibli a zobrazit názvy a popisy v mřížce. Pro určité znalosti v pozadí Studio Ghibli je japonské animační studio, které produkovalo několik filmů, jako je Spirited Away, k jehož použití mě jako příklad inspiroval můj přítel Craig.

Začneme vytvořením index.html soubor v novém adresáři. Projekt se bude skládat pouze z index.html , style.css a scripts.js na konci. Tato kostra HTML pouze odkazuje na soubor CSS a JavaScript, načte se ve fontu a obsahuje div s root id. Tento soubor je kompletní a nebude se měnit. K přidání všeho odsud budeme používat JavaScript.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Ghibli App</title>

    <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <div id="root"></div>
    <script src="scripts.js"></script>
  </body>
</html>

Protože je tento článek zaměřen na koncepty API a JavaScriptu, nebudu vysvětlovat, jak CSS funguje. Vytvoříme style.css který bude použit k vytvoření mřížky. Pro stručnost jsem zahrnul pouze to nejrelevantnější strukturální CSS níže, ale celý kód CSS můžete zkopírovat zde.

style.css
#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and (min-width: 600px) {
  .card {
    flex: 1 1 calc(50% - 2rem);
  }
}

@media screen and (min-width: 900px) {
  .card {
    flex: 1 1 calc(33% - 2rem);
  }
}

Nyní máme HTML a CSS nastavené, takže můžete vytvářet scripts.js a odtud budeme pokračovat.

Připojení k rozhraní API

Pojďme se podívat na dokumentaci Studio Ghibli API. Toto rozhraní API bylo vytvořeno, aby pomohlo vývojářům naučit se pracovat se zdroji pomocí požadavků HTTP, což je pro nás ideální. Vzhledem k tomu, že k API lze přistupovat mnoha různými metodami – JavaScript, PHP, Ruby, Python atd. – dokumentace pro většinu API nedává konkrétní pokyny, jak se připojit.

Z této dokumentace vidíme, že nám říká, že můžeme zadávat požadavky pomocí curl nebo běžná volání REST, ale možná ještě nemáme ponětí, jak to udělat.

Získání koncového bodu rozhraní API

Pro začátek přejděte do sekce filmů. Vpravo uvidíte GET /films . Ukáže nám adresu URL našeho koncového bodu API, https://ghibliapi.herokuapp.com/films. Kliknutím na tento odkaz zobrazíte pole objektů v JSON.

Načítání dat pomocí HTTP požadavku

Než se pokusíme něco umístit na přední část webu, otevřeme připojení k API. Uděláme to pomocí XMLHttpRequest objektů, což je způsob, jak otevřít soubory a vytvořit požadavek HTTP.

Vytvoříme request proměnnou a přiřadit novou XMLHttpRequest namítat proti tomu. Poté otevřeme nové připojení s open() metoda - v argumentech uvedeme typ požadavku jako GET stejně jako URL koncového bodu API. Požadavek se dokončí a my můžeme přistupovat k datům v onload funkce. Až budeme hotovi, odešleme žádost.

scripts.js
// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()

// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true)

request.onload = function () {
  // Begin accessing JSON data here
}

// Send request
request.send()

Případně můžete použít fetch API a async /await .

function getData() {
  const response = await fetch('https://ghibliapi.herokuapp.com/films')
  const data = await response.json()
}

Práce s odpovědí JSON

Nyní jsme obdrželi odpověď z našeho požadavku HTTP a můžeme s ní pracovat. Odpověď je však v JSON a my musíme tento JSON převést na objekty JavaScript, abychom s ním mohli pracovat.

Budeme používat JSON.parse() analyzovat odpověď a vytvořit data proměnná, která obsahuje všechny JSON jako pole objektů JavaScriptu. Pomocí forEach() , odhlásíme název každého filmu, abychom se ujistili, že funguje správně.

scripts.js
// Begin accessing JSON data here
var data = JSON.parse(this.response)

data.forEach(movie => {
  // Log each movie's title
  console.log(movie.title)
})

Pomocí Inspect na index.html a při prohlížení konzole byste měli vidět názvy 20 filmů Ghibli. Úspěch!

Jediné, co nám zde chybí, je nějaký způsob, jak se vypořádat s chybami. Co když je použita nesprávná adresa URL nebo adresa URL praskla a nic se nezobrazovalo? Když je proveden požadavek HTTP, odpověď se vrátí se stavovými kódy HTTP. 404 je nejznámější odpověď, což znamená Nenalezeno a 200 OK je úspěšný požadavek.

Zabalme náš kód do if úspěšná při jakékoli odpovědi v rozsahu 200-300 a odhlásit chybu, pokud požadavek selže. Chcete-li chybu otestovat, můžete zpackat adresu URL.

scripts.js
// Begin accessing JSON data here
var data = JSON.parse(this.response)

if (request.status >= 200 && request.status < 400) {
  data.forEach(movie => {
    console.log(movie.title)
  })
} else {
  console.log('error')
}

Zde je celý dosavadní kód.

scripts.js

var request = new XMLHttpRequest()

request.open('GET', 'https://ghibliapi.herokuapp.com/films', true)
request.onload = function () {
  // Begin accessing JSON data here
  var data = JSON.parse(this.response)

  if (request.status >= 200 && request.status < 400) {
    data.forEach(movie => {
      console.log(movie.title)
    })
  } else {
    console.log('error')
  }
}

request.send()

Úspěšně jsme použili GET HTTP požadavek na načtení (nebo spotřebu) koncového bodu API, který se skládal z dat ve formátu JSON. Stále jsme však uvízli v konzole – chceme tato data zobrazit na frontendu webu, což provedeme úpravou DOM.

Zobrazení údajů

Abychom zobrazili informace na frontendu webu, budeme pracovat s DOM, což je vlastně samotné API, které umožňuje JavaScriptu komunikovat s HTML. Pokud s DOM nemáte vůbec žádné zkušenosti, napsal jsem Understanding and Modifying the DOM in JavaScript for DigitalOcean , který objasní, co to DOM je a jak se DOM liší od zdrojového kódu HTML.

Na konci bude naše stránka sestávat z obrázku loga následovaného kontejnerem s více prvky karet – jeden pro každý film. Každá karta bude mít nadpis a odstavec, který obsahuje název a popis každého filmu. Takto to vypadá s načteným pouze základním CSS:

Pokud si vzpomínáte, naše index.html má pouze kořenový div - <div id="root"> právě teď. Budeme k němu přistupovat pomocí getElementById() . Můžeme stručně odstranit veškerý předchozí kód, který jsme zatím napsali, a za chvíli jej přidáme zpět.

scripts.js
const app = document.getElementById('root')

Pokud nejste 100% pozitivní, co getElementById() ano, vezměte výše uvedený kód a console.log(app) . To by mělo pomoci objasnit, co se tam vlastně děje.

První věcí na našem webu je logo, které je img živel. Vytvoříme prvek obrázku s createElement() .

const logo = document.createElement('img')

Prázdné img není dobré, takže nastavíme src atribut k logo.png . (Nalezeno zde)

logo.src = 'logo.png'

Vytvoříme další prvek, div tentokrát a nastavte class atribut k container .

const container = document.createElement('div')
container.setAttribute('class', 'container')

Nyní máme logo a kontejner a stačí je umístit na web. Použijeme appendChild() metoda pro připojení obrázku loga a kontejneru div do kořenového adresáře aplikace.

app.appendChild(logo)
app.appendChild(container)

Zde je úplný kód.

scripts.js
const app = document.getElementById('root')

const logo = document.createElement('img')
logo.src = 'logo.png'

const container = document.createElement('div')
container.setAttribute('class', 'container')

app.appendChild(logo)
app.appendChild(container)

Po uložení se na přední straně webu zobrazí následující.

Prvky
<div id="root">
  <img src="logo.png" />
  <div class="container"></div>
</div>

Toto bude viditelné pouze v části Kontrola Elements, nikoli ve zdrojovém kódu HTML, jak je vysvětleno v článku DOM, na který jsem odkazoval.

Nyní vložíme zpět veškerý náš kód z dřívější doby. Posledním krokem bude vzít to, co jsme dříve utěšili, a vytvořit z nich prvky karty.

Vložte vše zpět, ale my se jen podíváme na to, co je uvnitř forEach() .

data.forEach(movie => {
  console.log(movie.title)
  console.log(movie.description)
})

Místo console.log , použijeme textContent k nastavení textu prvku HTML na data z API. Používám substring() na p prvek omezit popis a zachovat stejnou délku každé karty.

scripts.js
data.forEach(movie => {
  // Create a div with a card class
  const card = document.createElement('div')
  card.setAttribute('class', 'card')

  // Create an h1 and set the text content to the film's title
  const h1 = document.createElement('h1')
  h1.textContent = movie.title

  // Create a p and set the text content to the film's description
  const p = document.createElement('p')
  movie.description = movie.description.substring(0, 300) // Limit to 300 chars
  p.textContent = `${movie.description}...` // End with an ellipses

  // Append the cards to the container element
  container.appendChild(card)

  // Each card will contain an h1 and a p
  card.appendChild(h1)
  card.appendChild(p)
})

Chybu konzole také nahradím chybou na rozhraní frontend pomocí nejlepšího prvku HTML, marquee ! (Dělám to pouze jako vtip pro zábavu a demonstrační účely, ve skutečnosti nepoužívejte marquee v jakékoli skutečné aplikaci, nebo mě zde berte vážně.)

const errorMessage = document.createElement('marquee')
errorMessage.textContent = `Gah, it's not working!`
app.appendChild(errorMessage)

A máme hotovo! Zde je finální scripts.js kód.

scripts.js
const app = document.getElementById('root')

const logo = document.createElement('img')
logo.src = 'logo.png'

const container = document.createElement('div')
container.setAttribute('class', 'container')

app.appendChild(logo)
app.appendChild(container)

var request = new XMLHttpRequest()
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true)
request.onload = function () {
  // Begin accessing JSON data here
  var data = JSON.parse(this.response)
  if (request.status >= 200 && request.status < 400) {
    data.forEach(movie => {
      const card = document.createElement('div')
      card.setAttribute('class', 'card')

      const h1 = document.createElement('h1')
      h1.textContent = movie.title

      const p = document.createElement('p')
      movie.description = movie.description.substring(0, 300)
      p.textContent = `${movie.description}...`

      container.appendChild(card)
      card.appendChild(h1)
      card.appendChild(p)
    })
  } else {
    const errorMessage = document.createElement('marquee')
    errorMessage.textContent = `Gah, it's not working!`
    app.appendChild(errorMessage)
  }
}

request.send()

A s úplnými styly CSS zde je, jak konečný produkt vypadá.

Opět zde je odkaz na živou aplikaci a zdrojový kód.

  • Zobrazit ukázkovou aplikaci
  • Zdrojový kód na GitHubu

Závěr

Gratulujeme, k připojení k API pomocí požadavků HTTP jste použili prostý JavaScript. Doufejme, že lépe rozumíte tomu, co je koncový bod API, jak prohlížeč komunikuje s daty API třetích stran s požadavky a odpověďmi, jak analyzovat JSON do polí a objektů, kterým JavaScript rozumí, a jak vytvořit frontend výhradně s JavaScriptem. .

Udělali jsme to všechno, aniž bychom se museli starat o cokoli, jako je Node.js, npm, Webpack, React, Angular, nástroje pro vytváření, jQuery, Axios a další populární vývojářské termíny, závislosti a rámce, které vás mohou mást v tom, co se děje pod kapotou. v té nejjednodušší formě.

Doufám, že pro vás byl tento článek užitečný, a neváhejte ho sdílet.