Hvordan installere og bruke Axios i JavaScript

Å bygge en applikasjon i den virkelige verden krever ofte samhandling med API -er å sende og hente data; Det er flere måter å samhandle med APIer. En av pakkene som lar JavaScript samt NodeJS -prosjekter samhandle med APIer med veldig enkel og grei kodesyntaks er Axios.

Axios er en HTTP -klient, som brukes til å lage xmlhttpRequest fra nettleseren, samt HTTP -forespørsler for prosjekter opprettet med NodeJS. Det blir ofte referert til som den isomorfe HTTP -klienten, der isomorfe midler for både NodeJs og nettlesere (Vanilla JavaScript).

Axios gir metoder som få, post, og slett og transformerer automatisk JSON -dataene som er noe som skiller dem fra de trivielle JavaScript -metodene som hente () Metode fra Fetch API.

Installere Axios i JavaScript

Som allerede nevnt ovenfor, er Axios til stede for nettleseren så vel som nodemiljøet, noe som betyr at det kan installeres med NPM og i Vanilla JavaScript ved hjelp av CDN-vert Axios-skriptet. Det er flere måter å installere Axios JavaScript i prosjektet ditt, for eksempel:

Bruker Node Package Manager (NPM)

Axios er tilgjengelig for NPM -biblioteket og kan enkelt installeres i prosjektet ved å kjøre følgende kommando i terminalen til kodeditoren din:

$ npm installer aksios

Bruker Bower til å installere Axios

Bower blir i økende grad mer og mer kjent blant massene. Bower hjelper til med å installere nettpakker akkurat som npm. Hvis du jobber med Bower, kan du installere Axios ved å bruke følgende kodelinjer:

$ bower installer aksios

Bruke en CDN -vert Axios

CDN står for innholdsleveringsnettverk, disse nettverkene lar deg bruke JavaScript -biblioteker som er vert på serverne sine. Axios kan installeres i prosjektet ditt ved å bruke en av de to CDN Axios -leverandørene, den første vesenet “JSDelivr Cdn” og den andre er den “Unpkg” CDN.

Til JSDelivr Cdn Bruk kommandoen i HTML -filen din:

For UNPKG CDN Bruk kommandoen HTML -fil:

Med disse ovennevnte kommandoer bør du kunne installere og bruke Axios i prosjektene dine.

Bruke Axios i JavaScript

For å demonstrere bruken av Axios som vi nettopp har installert ved å bruke en av metodene som er nevnt ovenfor i et JavaScript -program, trenger vi en HTML -webside. For dette innlegget skal vi skrive følgende linjer i HTML -filen:

Brukere

Som du kan legge merke til i koden, har vi laget en uordnet liste som vi vil bruke for å vise listen over brukere vi får fra API.

Dette skal gi oss følgende webside i nettleseren vår:

For å demonstrere henting av data ved hjelp av Axios, skal vi bruke Req | Res API og URL for API er “https: // reqres.i/API/brukere ”. Neste trinn er å skrive tre forskjellige funksjoner i vår JavaScript -fil:

• fetch_users (): Dette vil bruke Axios for å få data fra API og sende dataene til AppendTodom () -funksjonen
• AppendTodom (): Dette vil legge brukerens navn til
  Tag etter å ha opprettet et nytt listeelement ved hjelp av create_li funksjon
  • create_li (): Dette vil ta hver brukers data og opprette et nytt listeelement med bare navnet på brukeren som er plassert inni den:

  Fetch_user () -funksjonen ser slik ut:

  const fetch_users = () =>
  Axios.få ("https: // reqres.i/API/brukere ").da ((svar) =>
  const brukere = svar.data.data;
  AppendTodom (brukere);
  )
  .fangst ((feil) => konsoll.feil (feil));
  ;

  AppendTodom () -funksjonen kan opprettes med følgende linjer:

  const appendTodom = (brukere) =>
  const ul = dokument.QuerySelector ("UL");
  Brukere.kart ((bruker) =>
  ul.vedleggbar (create_li (bruker));
  );
  ;

  Og til slutt kan create_li () -funksjonen opprettes ved hjelp av følgende kodelinjer:

  constCreate_li = (bruker) =>
  const li = dokument.CreateElement ("Li");
  li.textContent = '$ bruker.id: $ bruker.first_name $ bruker.etternavn';
  return li;
  ;

  Nå som vi har kodet alle funksjonene våre, trenger vi bare å påkalle Fetch_users -funksjonen, men for det kommer vi til å legge til en knapp i HTML -filen vår med følgende kodelinjer:

  Klikk meg for å få data

  Nå som vi har knappen vår, kan vi utføre FETCH_USERS () -funksjonen på knappetrykk ved å bruke følgende kode i skriptfilen vår:

  $ ("#knapp").klikk (funksjon ()
  fetch_users ();
  );

  De Fullfør HTML -kode er som:

  
  
  

  Brukere

  
  
  
  Klikk meg for å få data
  
  

  De Komplett JavaScript -kode er som:

  $ ("#knapp").klikk (funksjon ()
  fetch_users ();
  );
  constCreate_li = (bruker) =>
  const li = dokument.CreateElement ("Li");
  li.textContent = '$ bruker.id: $ bruker.first_name $ bruker.etternavn';
  return li;
  ;
  constappendtodom = (brukere) =>
  const ul = dokument.QuerySelector ("UL");
  Brukere.kart ((bruker) =>
  ul.vedleggbar (create_li (bruker));
  );
  ;
  constFetch_users = () =>
  Axios
  .få ("https: // reqres.i/API/brukere ")
  .da ((svar) =>
  const brukere = svar.data.data;
  AppendTodom (brukere);
  )
  .fangst ((feil) => konsoll.feil (feil));
  ;

  Når du kjører denne koden, får du følgende resultat på nettleseren din:

  Som du ser, er vi i stand til å hente data fra Api ved knappetrykk ved hjelp av Axios I vår JavaScript -kode.

  Konklusjon

  Axios er en isomorf HTTP -klient som er tilgjengelig for både nodeutviklingsmiljøet og for Vanilla JavaScript. Axios er et strengt løftbasert bibliotek, og konverterer automatisk dataene det henter fra API fra JSON-format. For å bruke Axios i prosjektet ditt, må du enten installere det fra NPM -biblioteket eller legge det til i HTML -filen din ved å bruke en CDN som er vert av Axios. I dette innlegget lærte vi å installere og kjøre Axios i vårt JavaScript -prosjekt.