Zgłaszanie pierwszego żądania do interfejsu API RESTful

REST łatwe

Zanim zacząłem programować, zawsze fascynował mnie świat API. Ci współcześni strażnicy danych w sieci wyglądali jak mistyczne byty, które były poza zwykłymi ludźmi. Jednak po zapoznaniu się z interfejsami API dowiedziałem się, że łatwiej z nimi współpracować, niż się spodziewałem. W tym przewodniku przedstawię dwa przykłady minimalnych kroków wymaganych do odzyskania danych z interfejsu API REST innej firmy. Oba przykłady zakładają przynajmniej podstawową znajomość JavaScript.

W pierwszym przykładzie przeszukamy OpenWeatherMap w poszukiwaniu danych pogodowych w mieście za pomocą interfejsu API pobierania (to prawda, użyjemy interfejsu API do zapytania API)! W drugim przykładzie złożymy nieco bardziej złożone żądanie do interfejsu API Edamam, aby pobrać niektóre przepisy kulinarne, tym razem przy użyciu axios. Pierwsza metoda będzie nieco szybsza w uruchomieniu, a druga wymaga dodatkowej konfiguracji. Po pobraniu naszych danych wyświetlimy je wizualnie w przeglądarce.

Żądanie danych pogodowych z API OpenWeatherMap

Zanim będziemy mogli rozpocząć wysyłanie żądań na ich serwerze, potrzebujemy klucza API. Klucz API służy głównie do identyfikacji, kto wysyła żądania. Aby uzyskać ten magiczny klucz, musimy założyć konto i odczekać całe 10 minut. Okej, świetnie, więc mamy nasz klucz API i najwyraźniej mamy autoryzację do wysyłania żądań. Jak to robimy?

Dobrym miejscem do rozpoczęcia pracy z dowolnym interfejsem API jest zazwyczaj dokumentacja. W rzeczywistości zanim jeszcze napisamy jakiś kod, możemy sprawdzić, czy nasz klucz działa i czy rzeczywiście możemy zapytać OpenWeatherMap o dane pogodowe. Istnieje wiele różnych sposobów określania, jakiego rodzaju danych pogodowych chcemy, ale dla uproszczenia poprosimy o bieżącą pogodę w danym mieście. Przeglądając dokumenty, wydaje się, że powinniśmy być w stanie poprosić o bieżącą pogodę w Chicago, wpisując poniższe w pasku adresu przeglądarki.

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

Nie zapomnij zastąpić swojego KLUCZA-API swoim rzeczywistym kluczem API. Jeśli żądanie się powiedzie, w przeglądarce powinien pojawić się brzydko wyglądający obiekt JSON (jeśli go jeszcze nie masz, zalecamy zainstalowanie przeglądarki JSON, aby łatwiej przetrawić dane odpowiedzi). Jeśli wszystko działało, powinieneś zobaczyć coś takiego:

Zanim przejdziemy dalej, rzućmy okiem na żądanie interfejsu API. Rzeczy, którymi jesteśmy zainteresowani, zaczynają się od? symbol po pogodzie. The? wskazuje, że od tego zaczyna się ciąg zapytania, co jest zasadniczo sposobem na określenie rzeczy, które chcemy za pomocą parametrów. Parametry to tylko pary nazwa-wartość, w których symbol = oddziela nazwę od wartości. Symbol & wskazuje dodatkowe parametry zapytania. Oto pomocna grafika, która dzieli to wszystko:

Źródło

W naszym przykładzie prosimy OpenWeatherMap o dostarczenie nam pogody dla Chicago q = chicago, a także podanie naszego API keyappid = YOUR-API-KEY. Ok, teraz, gdy możemy pomyślnie wysyłać żądania API, podłączmy go do aplikacji, abyśmy nie musieli ręcznie wpisywać długiego adresu URL za każdym razem, gdy chcemy mieć pogodę.

Aby hostować naszą aplikację i wysyłać żądania AJAX, będziemy potrzebować serwera, nawet jeśli ten serwer ma tylko jedną ścieżkę katalogu głównego. W tym samouczku wykorzystamy webpack-dev-server, przydatny serwer programistyczny.

Konfigurowanie serwera webpack-dev-server jest szybkim procesem, który wymaga tylko kilku instalacji i minimalnej konfiguracji. Ponieważ zaczynamy od zera, utwórzmy katalog dla tej aplikacji za pomocą interfejsu CLI i przejdźmy tam.

Demo $ mkdir
Demo $ cd /

Następnie zainicjujmy plik package.json.

$ npm init -y

Zainstalujmy to, czego potrzebujemy dla webpack-dev-server, uruchamiając następującą komendę:

Instalacja npm $ --save-dev webpack-webli-cli webpack-dev-server

Świetnie, teraz, gdy mamy już zainstalowane, przejdźmy do konfiguracji pliku webpack.config.js.

$ touch webpack.config.js

Musimy powiedzieć webpack-dev-server, skąd pobrać i podać nasz plik HTML, który określimy we właściwości devServer. Ponieważ nasz plik HTML będzie znajdować się w katalogu głównym, w którym wskażemy, aby go znaleźć w pliku webpack.config.js.

module.exports = {
  tryb: „rozwój”,
  wpis: „./weather.js”,
  wynik: {
    ścieżka: __dirname,
    nazwa pliku: „bundle.js”
  },
  devServer: {
    contentBase: „./”
  }
};

Następnie utwórzmy skrypt w pakiecie.json:

„skrypty”: {
  „start”: „webpack-dev-server --open”
},

Na koniec potrzebujemy pliku index.html i pliku weather.js, w którym zaimplementujemy funkcjonalność umożliwiającą wysyłanie żądań AJAX. Dodam również plik CSS, aby konsola Chrome nie krzyczała na mnie.

$ touch index.html weather.js main.css

Nie zapomnij założyć co najmniej gołego dokumentu HTML i podać weather.js w tagu skryptu!

W weather.js napiszemy dla nas prostą funkcję pobierania danych z API OpenWeatherMap.

W wierszu 5 określamy pełny adres URL interfejsu API i przekazujemy go jako argument do pobrania, który wysyła żądanie AJAX do serwera. Ponieważ funkcja fetch () zwraca obietnicę, używamy .then () do konwersji odpowiedzi na obiekt JSON przy użyciu metody .json (). Na koniec logujemy obiekt JSON do konsoli i dołączamy pewne właściwości do tabeli HTML. Zauważ, że definicja funkcji, która wykonuje tę operację w wierszu 10, została pominięta dla zwięzłości.

Teraz do ostatniego testu. Uruchommy naszą aplikację i zobaczmy, czy z powodzeniem żądamy danych od OpenWeatherMap.

Początek npm $

Jeśli wszystko działało poprawnie, powinieneś przynajmniej zobaczyć obiekt odpowiedzi w konsoli i tabelę z danymi, jeśli go dodałeś.

Zauważ, że temperatura może wyglądać nienormalnie wysoko. Nie martw się, świat jeszcze się nie topi. OpenWeatherMap używa Kelvina jako jednostki domyślnej, jeśli ten parametr nie jest określony (zostawię ten dla ciebie). Mamy to! Udało nam się pobrać podstawowe dane pogodowe z API OpenWeatherMap.

Runda bonusowa - żądanie przepisów z Edamam API

Większość wymaganych tutaj kroków będzie podobnych do tych wymienionych powyżej, więc skupię się na tym, co inne. Ponieważ będziemy importować aksjosy, będziemy musieli razem używać webpacka i babel.

Dalej, zainstalujmy wszystko, czego potrzebujemy.

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

Następnie utwórzmy plik .babelrc

$ touch .babelrc

i określ ustawienia wstępne w tym pliku:

{
   „presets”: [„env”]
}

Teraz zmieńmy ścieżkę źródłową naszego pliku javascript w naszym tagu skryptowym index.html, aby odwoływał się do dołączonego pliku wyjściowego pakietu.

Na koniec zmień punkt wejścia w naszym pliku webpack.config.js, aby odwoływał się do pliku receptes.js, który będziemy tworzyć.

module.exports = {
  tryb: „rozwój”,
  wpis: „./recipes.js”,
  wynik: {
    ścieżka: __dirname,
    nazwa pliku: „bundle.js”
  },
  devServer: {
    contentBase: „./”
  }
};

OK, w końcu jesteśmy gotowi do utworzenia pliku recipes.js, aby uzyskać nasze przepisy z interfejsu API Edamam przy użyciu axios. Zaimportujmy axiosa i zmodyfikujmy funkcję fetchWeather, której użyliśmy, aby nieco bardziej zaangażować żądanie niektórych przepisów.

Zamiast pobierać przepisy na podstawie jednego wkładu żywnościowego, stworzymy bardziej szczegółowe zapytanie, w którym przeszukamy przepisy kulinarne na podstawie wielu produktów spożywczych. Nie jesteśmy jeszcze gotowi, aby zostać mistrzem kuchni, więc ograniczmy nasze przepisy do nie więcej niż 30 minut gotowania i maksymalnie 10 składników.

Przejrzyjmy ten kod. W przeważającej części wykorzystuje tę samą technikę, której użyliśmy wcześniej, aby pobrać nasze dane pogodowe, ale dzieje się trochę więcej.

Główne różnice tutaj w porównaniu z funkcją fetchWeather są następujące:

  • Funkcja fetchRecipes przyjmuje dowolną liczbę argumentów.
  • Notacja… składników w wierszu 9 to składnia parametru reszty, która umożliwia reprezentację dowolnej liczby argumentów jako tablicy. Jest to świetne do używania metod tablicowych od samego początku.
  • W wierszach 10–18 manipulujemy tymi argumentami, aby utworzyć ciąg, który oddziela produkty żywnościowe symbolem +, ponieważ jest to składnia, której oczekuje Edamam API dla zapytania zawierającego wiele produktów żywnościowych.
  • Dodaliśmy pewne parametry do naszego zapytania API i dodaliśmy ograniczenia do tych parametrów.
  • Czas nie może być dłuższy niż 30 minut (linia 6).
  • Składniki nie mogą być większe niż 10 produktów spożywczych (linia 7).
  • Używamy axios.get () zamiast fetch ().
  • Używamy funkcji asynchronicznej za pomocą asynchronizacji / oczekiwania.
  • Edamam wymaga klucza API i identyfikatora API.

Pamiętaj, że kolejność, którą określamy, ma pewne znaczenie. Na przykład, jeśli omyłkowo zamienimy kolejność appId i appKey, serwer odpowie statusem 404.

Uruchom naszą aplikację i spójrz na obiekt odpowiedzi w konsoli. Widzimy, że każdy przepis (znajdujący się we właściwości hits) zawiera wiele informacji. Tym razem zamiast zapełnić tabelę, dla pierwszych 4 przepisów, złapałem obraz przepisu i odpowiadający mu link do strony internetowej, na której można znaleźć pełny przepis. Tak jak w poprzednim przykładzie, pominąłem tę definicję funkcji dla zwięzłości.

Jeśli wszystko się powiedzie, możesz zobaczyć coś takiego.

Kto pomyślał, że cukinia, brokuły i marchewka może wyglądać tak smacznie!

I to jest okład! Nauczyliśmy się, jak tworzyć zapytania o różnej złożoności w interfejsach API RESTful innych firm. Łatwo jest sobie wyobrazić nieskończone możliwości tego, co można stworzyć podczas pracy z interfejsami API. Na przykład zamiast na stałe wpisywać dane wejściowe jako argumenty do funkcji, możemy dodać pole wejściowe na stronie, aby umożliwić użytkownikom wyszukiwanie pogody według kodu obszaru lub przepisów według składników i ograniczeń dietetycznych. Możliwości są ogromne i nie ma powodu, aby się tu zatrzymać! Mam nadzieję, że ten samouczek pomógł ci lepiej zrozumieć, jak pracować z interfejsami API RESTful. Dziękuje za przeczytanie.