Come installare e utilizzare gli assios in javascript

Costruire un'applicazione del mondo reale richiede spesso l'interazione con API per inviare e recuperare i dati; Esistono diversi modi di interagire con le API. Uno dei pacchetti che consentono ai progetti JavaScript e Nodejs di interagire con le API con la sintassi del codice molto semplice e diretta è Axios.

Axios è un client HTTP, che viene utilizzato per creare XMLHTTPREQUEST dal browser e richieste HTTP per i progetti creati con NodeJS. Viene spesso definito il client HTTP isomorfo, dove isomorfo significa sia per Nodejs che per i browser (vaniglia JavaScript).

Axios fornisce metodi come Ottenere, inviare, E eliminare e trasforma automaticamente i dati JSON che è qualcosa che li distingue dai banali metodi JavaScript come il andare a prendere() Metodo dall'API Fetch.

Installazione di assios in javascript

Come già accennato in precedenza, Axios è presente per il browser e per l'ambiente del nodo, il che significa che può essere installato con NPM e in Vanilla JavaScript usando lo script Axios ospitato da CDN. Esistono diversi modi per installare Axios JavaScript nel tuo progetto come:

Utilizzo del gestore dei pacchetti nodi (NPM)

Axios è disponibile per la libreria NPM e può essere facilmente installato nel progetto eseguendo il seguente comando nel terminale dell'editor di codice:

$ npm Installa assios

Utilizzo di Bower per installare assios

Bower sta diventando sempre più famoso tra le masse. Bower aiuta a installare pacchetti Web proprio come NPM. Se stai lavorando con Bower, è possibile installare assios utilizzando le seguenti righe di codice:

$ bower installare assios

Utilizzando un axios ospitato CDN

CDN sta per reti di consegna dei contenuti, queste reti consentono di utilizzare le librerie JavaScript ospitate sui loro server. Gli assios possono essere installati nel progetto utilizzando uno dei due provider di assios CDN, il primo è "JSDELIVR CDN" e l'altro è il "Unpkg" CDN.

Per Jsdelivr cdn Usa il comando nel file HTML:

Per il UNPKG CDN Utilizzare il file HTML di comando:

Con questi comandi sopra menzionati dovresti essere in grado di installare e utilizzare gli assios nei tuoi progetti.

Usando assios in javascript

Per dimostrare l'uso di assios che abbiamo appena installato utilizzando uno dei metodi sopra menzionati in un programma JavaScript, avremo bisogno di una pagina Web HTML. Per questo post, scriveremo le seguenti righe all'interno del file HTML:

Utenti

Come puoi notare nel codice, abbiamo fatto un elenco non ordinato che useremo per visualizzare l'elenco degli utenti che otteniamo dall'API.

Questo dovrebbe darci la seguente pagina web sul nostro browser:

Per dimostrare il recupero dei dati utilizzando gli assios, useremo il Req | Res API e URL per l'API è “https: // reqres.in/API/utenti ". Il prossimo passo è scrivere tre diverse funzioni nel nostro file JavaScript:

• fetch_users (): Questo utilizzerà assios per ottenere i dati dall'API e inviare i dati alla funzione AppendTodom ()
• AppendTodom (): Questo aggiungerà il nome dell'utente al
  tagga dopo aver creato un nuovo elemento dell'elenco con l'aiuto del create_li funzione
  • create_li (): Questo richiederà i dati di ciascun utente e creerà un nuovo elemento dell'elenco con il solo nome dell'utente inserito al suo interno:

  La funzione fetch_user () sembra così:

  const fetch_users = () =>
  assios.get ("https: // reqres.in/api/utenti ").Quindi ((risposta) =>
  const utenti = risposta.dati.dati;
  AppendTodom (utenti);
  )
  .catch ((errore) => console.errore (errore));
  ;

  La funzione AppendTodom () può essere creata con le seguenti righe:

  const appendToDom = (utenti) =>
  const ul = documento.QuerySelector ("UL");
  utenti.mappa ((user) =>
  ul.appendChild (create_li (utente));
  );
  ;

  E infine, la funzione create_li () può essere creata utilizzando le seguenti righe di codice:

  constCreate_li = (user) =>
  const li = documento.createElement ("li");
  li.textContent = '$ utente.id: $ utente.first_name $ utente.cognome';
  restituire Li;
  ;

  Ora che abbiamo codificato tutte le nostre funzioni, dobbiamo solo invocare la funzione Fetch_users, ma per questo aggiungeremo un pulsante nel nostro file HTML con le seguenti righe di codice:

  Cliccami per ottenere dati

  Ora che abbiamo il nostro pulsante, possiamo eseguire la funzione Fetch_users () al momento della pressione del pulsante utilizzando il seguente codice nel nostro file di script:

  $ ("#bottons").Click (function ()
  fetch_users ();
  );

  IL Completa il codice HTML é come:

  
  
  

  Utenti

  
  
  
  Cliccami per ottenere dati
  
  

  IL Il codice JavaScript completo è come:

  $ ("#bottons").Click (function ()
  fetch_users ();
  );
  constCreate_li = (user) =>
  const li = documento.createElement ("li");
  li.textContent = '$ utente.id: $ utente.first_name $ utente.cognome';
  restituire Li;
  ;
  ConstaPendToDom = (Users) =>
  const ul = documento.QuerySelector ("UL");
  utenti.mappa ((user) =>
  ul.appendChild (create_li (utente));
  );
  ;
  constfetch_users = () =>
  assios
  .get ("https: // reqres.in/api/utenti ")
  .Quindi ((risposta) =>
  const utenti = risposta.dati.dati;
  AppendTodom (utenti);
  )
  .catch ((errore) => console.errore (errore));
  ;

  Durante l'esecuzione di questo codice, otterrai il seguente risultato sul browser:

  Come puoi vedere, siamo in grado di recuperare i dati dal API Al pulsante Premere usando Assios Nel nostro codice JavaScript.

  Conclusione

  Axios è un client HTTP isomorfo disponibile sia per l'ambiente di sviluppo del nodo sia per la vaniglia JavaScript. Axios è una libreria basata su rigorosi e converte automaticamente i dati che recupera dall'API dal formato JSON. Per utilizzare gli assios nel progetto, è necessario installarlo dalla libreria NPM o aggiungerlo nel file HTML utilizzando un CDN ospitato da Axios. In questo post, abbiamo imparato come installare ed eseguire assios nel nostro progetto JavaScript.