Upućivanje prvog zahtjeva RESTful API-ju

ODMOR lako

Prije nego što sam se upustio u razvoj, uvijek me je fascinirao svijet API-ja. Ovi moderni čuvari podataka s weba činili su se kao mistični entiteti koji su bili izvan uobičajenog. Međutim, nakon upoznavanja s API-jima, naučio sam da je lakše komunicirati s njima nego što sam očekivao. U ovom ću vodiču proći kroz dva primjera minimalnih koraka potrebnih za dohvaćanje podataka iz REST API-ja treće strane. Oba primjera pretpostavljaju barem osnovno razumijevanje JavaScripta.

U prvom primjeru upitat ćemo OpenWeatherMap za podatke o vremenu u gradu pomoću API-ja za dohvaćanje (to je ispravno, koristit ćemo API za ispitivanje API-ja)! U drugom primjeru uputit ćemo malo složeniji zahtjev Edamamovom API-ju za pronalaženje nekih recepata za hranu, ovaj put koristeći axios. Prva metoda bit će malo brža za ustajanje i pokretanje, dok druga zahtijeva dodatnu konfiguraciju. Nakon preuzimanja naših podataka, vizualno ćemo ih prikazati u pregledniku.

Zahtjev za vremenske podatke iz API-ja OpenWeatherMap

Prije nego što počnemo bacati zahtjeve na njihov poslužitelj, trebat će nam API ključ. API ključ uglavnom je za prepoznavanje tko postavlja zahtjeve. Da bismo dobili ovaj čarobni ključ, morat ćemo stvoriti račun i pričekati čitavih 10 minuta. U redu, imamo svoj API ključ i očito imamo dozvolu za podnošenje zahtjeva. Pa kako ćemo to učiniti?

Dobro mjesto za uobičajeni početak rada s bilo kojim API-jem je dokumentacija. U stvari prije nego što uopće napišemo bilo koji kôd, možemo provjeriti radi li naš ključ i možemo li doista upitati OpenWeatherMap za vremenske podatke. Postoji nekoliko različitih načina za određivanje vrste vremenskih podataka koje želimo, ali zbog jednostavnosti, uputit ćemo zahtjev za trenutnim vremenom određenog grada. Prolazeći kroz dokumente, čini se da bismo trebali biti u mogućnosti podnijeti zahtjev za trenutno vrijeme u Chicagu unoseći sljedeće u URL traku preglednika.

http://api.openweathermap.org/data/2.5/weather?q=chicago&appid=YOUR-API-KEY

Ne zaboravite zamijeniti VAŠ API-KEY stvarnim API ključem. Ako je zahtjev uspio, trebali biste vidjeti ručni izgled JSON objekta u svom pregledniku (ako ga još nemate, preporučam vam instaliranje JSON preglednika radi lakšeg probavljanja podataka odgovora). Ako bi sve funkcioniralo, trebali biste vidjeti ovako nešto:

Prije nego što nastavimo, pogledajmo zahtjev API-ja. Ono što nas zanima započinje s? simbol nakon vremenskih prilika. The? pokazuje da tamo započinje niz upita, što je u osnovi način specificiranja stvari koje želimo koristeći parametre. Parametri su samo parovi ime-vrijednost, gdje simbol = odvaja ime od vrijednosti. Simbol & označava dodatne parametre upita. Evo korisne grafike koja sve to razgrađuje:

Izvor

Stoga u našem primjeru tražimo od OpenWeatherMap-a da nam pruži i vrijeme za Chicago q = chicago, uz dodatak API-ja keyappid = VAŠ API-KEY. U redu, sada kada možemo postavljati uspješne API zahtjeve, uključimo ga u aplikaciju tako da ne moramo ručno upisivati ​​dugački URL svaki put kad želimo vremenske prilike.

Kako bismo ugostili našu aplikaciju i postavili AJAX zahtjeve, trebat će nam poslužitelj, čak i ako taj poslužitelj ima samo jedan korijenski put. Za ovaj ćemo udžbenik koristiti webpack-dev-server, zgodan poslužitelj za razvoj.

Postavljanje webpack-dev-poslužitelja brz je proces koji zahtijeva samo nekoliko instalacija i minimalnu konfiguraciju. Budući da počinjemo od nule, stvorimo direktorij za ovu aplikaciju pomoću CLI-a i idite tamo.

$ mkdir demo
$ cd demo /

Zatim inicijaliziramo datoteku package.json.

$ npm init -y

Instaliramo ono što će nam trebati za webpack-dev-poslužitelj izvođenjem sljedeće naredbe:

$ npm install --save-dev webpack webpack-cli webpack-dev-server

Odlično, sad kad smo ih instalirali, idemo naprijed i postavimo webpack.config.js datoteku.

$ touch webpack.config.js

Trebat ćemo reći webpack-dev-server odakle dobiti i služiti našu html datoteku, koju ćemo odrediti u svojstvu devServer. Budući da će naša html datoteka živjeti u korijenskom direktoriju, tamo ćemo je naznačiti da je pronađemo u datoteci webpack.config.js.

module.exports = {
  način: "razvoj",
  unos: "./weather.js",
  izlaz: {
    staza: __ ime,
    naziv datoteke: "bundle.js"
  }
  devServer: {
    contentBase: "./"
  }
};

Zatim stvorimo skriptu u našem paketu.json:

"skripte": {
  "start": "webpack-dev-server - otvori"
}

Posljednje, ali ne najmanje bitno, trebat će nam datoteka index.html i weather.js gdje ćemo implementirati funkcionalnost za postavljanje AJAX zahtjeva. Također ću dodati CSS datoteku tako da Chrome konzola ne viče na mene.

$ touch index.html weather.js main.css

Ne zaboravite postaviti barem HTML dokument s golim kostima i odrediti weather.js u oznaci skripte!

U weather.js napisat ćemo jednostavnu funkciju za dohvaćanje podataka iz API-ja OpenWeatherMap za nas.

U retku 5 određujemo puni API URL i prosljeđujemo ga kao argument za donošenje što AJAX zahtjev čini poslužitelju. Budući da fetch () vraća obećanje, koristimo .then () da pretvorimo odgovor u JSON objekt pomoću .json () metode. Na kraju zabilježimo JSON objekt na konzolu i dodajemo određena svojstva u HTML tablicu. Imajte na umu da je definicija funkcije koja obavlja ovu operaciju na liniji 10 izostavljena radi sažetka.

Sada, za završni test. Pokrenimo našu aplikaciju i provjeravamo li uspješno tražimo naše podatke iz OpenWeatherMap-a.

$ npm start

Ako je sve ispravno funkcioniralo, trebali biste barem vidjeti objekt odgovora na konzoli i tablicu s podacima ako ste to dodali u.

Primijetite da temperatura može izgledati nenormalno visoka. Bez brige, svijet se još nije rastopio. OpenWeatherMap koristi Kelvin kao zadanu jedinicu ako taj parametar nije naveden (ostavit ću ga za vas). I tu ga imamo! Uspješno smo preuzeli neke osnovne vremenske podatke iz API-ja OpenWeatherMap.

Runda bonusa - traženje recepata od Edamam API-ja

Većina ovdje potrebnih koraka bit će slična gore navedenim, pa ću se samo usredotočiti na ono što je drukčije. Budući da ćemo uvesti aksije, morat ćemo zajedno koristiti webpack i babel.

Krenimo napred i instalirajmo sve što će nam trebati.

$ npm i --save-dev axios babel-core babel-preset-env

Zatim stvorimo .babelrc datoteku

$ touch .babelrc

i odredite unaprijed zadane postavke u toj datoteci:

{
   "unaprijed postavljeno": ["env"]
}

Sada promijenimo izvorni put naše datoteke JavaScripta u našu oznaku skripte index.html kako bismo referencirali izlaznu datoteku skupa webpacka.

Napokon, promijenimo ulaznu točku u našoj webpack.config.js datoteci da bismo referencirali datoteku recepti.js koju ćemo stvoriti.

module.exports = {
  način: "razvoj",
  unos: "./recipes.js",
  izlaz: {
    staza: __ ime,
    naziv datoteke: "bundle.js"
  }
  devServer: {
    contentBase: "./"
  }
};

U redu, konačno smo spremni kreirati datoteku recepta.js kako bismo svoje recepte dobili iz Edamam API-ja pomoću axiosa. Uvezimo osovine i izmijenimo funkciju dohvaćanja pomoću koje smo koristili zahtjev za nekim receptima.

Umjesto stvaranja recepata na temelju jednog jedinog unosa hrane, izgradit ćemo precizniji upit na kojem ćemo pretraživati ​​recepte na temelju više prehrambenih namirnica. Nismo baš spremni za glavnog kuhara, pa zato i naše recepte stavimo na najviše 30 minuta vremena kuhanja i maksimalno 10 sastojaka.

Prođimo ovaj kôd. Uglavnom se koristi ista tehnika koju smo ranije koristili za dobivanje vremenskih podataka, ali događa se malo više.

Glavne razlike ovdje u usporedbi s funkcijom dohvaćanja su sljedeće:

  • Funkcija fetchRecipes uzima bilo koji broj argumenata.
  • Notacija sastojaka u retku 9 sintaksa je parametra mirovanja, što omogućava da se bilo koji broj argumenata prikazuje kao niz. Ovo je sjajno za korištenje metoda niza od šišmiša.
  • U linijama od 10 do 18 manipuliramo ovim argumentima kako bismo stvorili niz koji razdvaja prehrambene proizvode s simbolom + jer je to sintaksa koju Edamam API očekuje za upit s više prehrambenih namirnica.
  • Našem API upitu dodali smo neke parametre i dodali ograničenja tim parametrima.
  • Vrijeme ne može biti veće od 30 minuta (redak 6).
  • Sastojci ne mogu biti veći od 10 namirnica (redak 7).
  • Koristimo axios.get () umjesto fetch ().
  • Koristimo asinkronu funkciju pomoću async / await.
  • Edamamu je potreban API ključ i API ID.

Imajte na umu da je redoslijed koji odredimo određene parametre važan. Na primjer, ako pogrešno zamijenimo redoslijed aplikacija i appKey-a, poslužitelj će odgovoriti sa statusom 404.

Pokrenimo našu aplikaciju i pogledajte objekt odgovora na konzoli. Vidimo da svaki recept (koji se nalazi u svojstvu hitova) sadrži puno informacija. Ovaj put umjesto punjenja tablice, za prva 4 recepta uhvatio sam sliku recepta i njegovu odgovarajuću vezu do web stranice na kojoj se može pronaći cijeli recept. Kao i u prethodnom primjeru, ovu sam funkciju za kratkoću izostavio.

Ako bi sve ispalo, možda biste vidjeli nešto takvo.

Tko je mislio da su tikvice, brokula i mrkva mogli izgledati tako ukusno!

A to je omot! Naučili smo kako izvršiti upite različitih složenosti prema RESTful API-jima treće strane. Lako je zamisliti beskrajne mogućnosti onoga što se može stvoriti tijekom rada s API-jevima. Na primjer, umjesto tvrdog kodiranja ulaza kao argumenata u funkciju, mogli bismo dodati polje za unos na stranicu kako bismo omogućili korisnicima da pretražuju vremensku prognozu prema regionalnom kodu ili receptima po sastojcima i ograničenjima prehrane. Mogućnosti su ogromne i nema razloga da se ovdje zaustavljamo! Nadam se da će vam ovaj vodič pomoći da bolje shvatite kako raditi sa RESTful API-jevima. Hvala na čitanju.