Jak zainstalować i używać Axios w JavaScript

Budowanie rzeczywistej aplikacji często wymaga interakcji z Pszczoła wysłać i pobierać dane; Istnieje wiele sposobów interakcji z API. Jednym z pakietów, które pozwalają projektom JavaScript, a także Nodejs na interakcję z API z bardzo prostą i prostą składnią kodu, jest Axios.

AXIOS to klient HTTP, który służy do tworzenia XMLHTTPREQUEST z przeglądarki, a także żądań HTTP dotyczące projektów utworzonych z NodeJS. Jest często określany jako izomorficzny klient HTTP, gdzie izomorficzne środki zarówno dla NodeJS, jak i przeglądarki (waniliowe JavaScript).

Axios zapewnia metody takie jak Dostawać, post, I usuwać i automatycznie przekształca dane JSON, które wyróżnia je od trywialnych metod JavaScript, takich jak aportować() Metoda z API Fetch.

Instalowanie axios w JavaScript

Jak już wspomniano powyżej, AXIOS jest obecny dla przeglądarki, a także dla środowiska węzłów, co oznacza, że ​​można go zainstalować z NPM i w waniliowym JavaScript za pomocą skryptu Axios-hostowanego CDN. Istnieje wiele sposobów instalowania JavaScript Axios w twoim projekcie, takich jak:

Korzystanie z Menedżera pakietów węzłów (NPM)

Axios jest dostępny dla biblioteki NPM i można je łatwo zainstalować w projekcie, uruchamiając następujące polecenie w terminalu edytora kodu:

$ npm instaluj axios

Używanie Bower do instalacji AXIOS

Bower coraz bardziej staje się coraz bardziej znany wśród mas. Bower pomaga instalować pakiety internetowe, podobnie jak NPM. Jeśli pracujesz z Bower, możesz zainstalować AXIOS za pomocą następujących wierszy kodu:

$ Bower Zainstaluj Axios

Za pomocą axios hostowanych CDN

CDN oznacza sieci dostarczania treści, sieci te pozwalają korzystać z bibliotek JavaScript hostowanych na ich serwerach. AXIOS można zainstalować w twoim projekcie za pomocą jednego z dwóch dostawców CDN AXIOS, a pierwsza istota „JSDELIVR CDN” a drugi jest „UNPKG” Cdn.

Dla Jsdelivr cdn Użyj polecenia w pliku HTML:

Dla unpkg cdn Użyj pliku polecenia HTML:

Dzięki wyżej wymienionym poleceniom powinieneś być w stanie zainstalować i używać AXIOS w swoich projektach.

Za pomocą axios w JavaScript

Aby zademonstrować użycie AXIOS, które właśnie zainstalowaliśmy przy użyciu jednej z wyżej wymienionych metod w programie JavaScript, będziemy potrzebować strony internetowej HTML. W tym poście zapiszymy następujące wiersze w pliku HTML:

Użytkownicy

Jak można zauważyć w kodzie, stworzyliśmy listę nieopisaną, której użyjemy do wyświetlania listy użytkowników, które otrzymujemy z interfejsu API.

Powinno to dać nam następującą stronę internetową w naszej przeglądarce:

Aby zademonstrować pobieranie danych za pomocą AXIOS, będziemy używać Req | Res API i adres URL dla API to „https: // reqres.in/API/Użytkownicy ”. Następnym krokiem jest napisanie trzech różnych funkcji w naszym pliku JavaScript:

• fetch_users (): Będzie to używać axios do uzyskania danych z interfejsu API i wysyłania danych do funkcji appendTOdom ()
• appendTodom (): To doda nazwę użytkownika do
  tag po utworzeniu nowego elementu listy za pomocą pomocy create_li funkcjonować
  • create_li (): To weźmie dane każdego użytkownika i utworzy nowy element listy z tylko nazwą użytkownika umieszczonego w nim:

  Funkcja fetch_user () wygląda tak:

  const fetch_users = () =>
  axios.get ("https: // reqres.in/API/Użytkownicy ”).Następnie ((response) =>
  Użytkownicy const = odpowiedź.dane.dane;
  appendTOdom (użytkownicy);
  )
  .Catch ((błąd) => konsola.błąd (błąd));
  ;

  Funkcję appendTodom () można utworzyć za pomocą następujących wierszy:

  const appendTodom = (Users) =>
  const ul = dokument.QuerySelelect („UL”);
  użytkownicy.map ((użytkownik) =>
  ul.appendChild (create_li (użytkownik));
  );
  ;

  I na koniec funkcję Create_LI () można utworzyć za pomocą następujących wierszy kodu:

  constCreate_LI = (user) =>
  const li = dokument.createElement („li”);
  Li.TextContent = '$ użytkownik.id: $ użytkownik.First_name $ użytkownik.nazwisko';
  powrót li;
  ;

  Teraz, gdy zakodowaliśmy wszystkie nasze funkcje, musimy tylko wywołać funkcję Fetch_Users, ale w tym celu dodamy przycisk w naszym pliku HTML z następującymi wierszami kodu:

  Kliknij mnie, aby uzyskać dane

  Teraz, gdy mamy przycisk, możemy wykonać funkcję fetch_users () na przycisku naciśnij przy użyciu następującego kodu w naszym pliku skryptu:

  $ („#przycisk”).kliknij (funkcja ()
  fetch_users ();
  );

  Wypełnij kod HTML jest jak:

  
  
  

  Użytkownicy

  
  
  
  Kliknij mnie, aby uzyskać dane
  
  

  Pełny kod JavaScript to:

  $ („#przycisk”).kliknij (funkcja ()
  fetch_users ();
  );
  constCreate_LI = (user) =>
  const li = dokument.createElement („li”);
  Li.TextContent = '$ użytkownik.id: $ użytkownik.First_name $ użytkownik.nazwisko';
  powrót li;
  ;
  constappendTodom = (Users) =>
  const ul = dokument.QuerySelelect („UL”);
  użytkownicy.map ((użytkownik) =>
  ul.appendChild (create_li (użytkownik));
  );
  ;
  constfetch_users = () =>
  axios
  .get ("https: // reqres.in/API/Użytkownicy ”)
  .Następnie ((response) =>
  Użytkownicy const = odpowiedź.dane.dane;
  appendTOdom (użytkownicy);
  )
  .Catch ((błąd) => konsola.błąd (błąd));
  ;

  Po uruchomieniu tego kodu otrzymasz następujący wynik w przeglądarce:

  Jak widać, jesteśmy w stanie pobrać dane z API Na przycisku naciśnij za pomocą Axios W naszym kodzie JavaScript.

  Wniosek

  Axios to izomorficzny klient HTTP, który jest dostępny zarówno dla środowiska programistycznego, jak i dla waniliowego JavaScript. AXIOS to biblioteka oparta na ściśle obietnicy i automatycznie konwertuje dane, które pobiera z API z formatu JSON. Aby użyć AXIOS w swoim projekcie, musisz zainstalować go z biblioteki NPM lub dodać w pliku HTML za pomocą CDN hostowanego przez AxiOS. W tym poście nauczyliśmy się instalować i uruchamiać AXIOS w naszym projekcie JavaScript.