Come usare l'API Fetch in JavaScript

Nello sviluppo web dovrai spesso connetterti/comunicare con altri server Web per ottenere informazioni/dati. Ad esempio, quando ti iscrivi a un nuovo account su alcuni siti Web, vedrai spesso un'opzione per iscriverti utilizzando il tuo Gmail o altri account di terze parti. Ciò consente di iscriverti a un nuovo account con un solo clic singolo invece di compilare manualmente l'intero modulo. Quando si seleziona l'opzione "Iscriviti utilizzando un account di terze parti", l'applicazione comunica con il server dell'applicazione di terze parti e invia una richiesta per accedere alle informazioni che vengono archiviate lì. Questa richiesta viene inviata tramite API che è un insieme di regole che regolano come comunicare diverse applicazioni o sistemi tra loro. In questo articolo impareremo a utilizzare JavaScript per inviare tali richieste.

Qual è l'API Fetch

L'API Fetch fornisce un semplice andare a prendere() Metodo in JavaScript che viene utilizzato per recuperare, accedere e manipolare le risorse attraverso la rete. IL andare a prendere() Il metodo consente di effettuare chiamate JavaScript e XML (AJAX) asincrone con JavaScript che erano state precedentemente effettuate utilizzando XMLHTTPREQUEST. Le richieste asincroni sono parallele al programma principale e non fermano l'esecuzione del codice sotto di esse. Il codice sotto la richiesta API Fetch continuerà in esecuzione anche se l'API non ha inviato alcuna risposta. Quando l'API risponde alla chiamata Ajax, allora il andare a prendere() Il metodo viene ripreso.

L'API Fetch utilizza promesse e fornisce funzionalità potenti che rendono molto più facile gestire le richieste Web e le loro risposte; È un ottimo modo per evitare gli inferni di callback che sono stati creati quando si utilizza Xmlhttprequest.

Nota: La console del browser viene utilizzata per la dimostrazione di esempi in questo articolo.

La sintassi dell'API Fetch in JavaScript

Dobbiamo chiamare il andare a prendere() Metodo per utilizzare l'API Fetch nel nostro codice JavaScript. IL andare a prendere() Il metodo prende l'URL dell'API come argomento.

Fetch (URL)

Dobbiamo definire il Poi() metodo dopo il andare a prendere() metodo:

.Quindi (function ()
)

Il valore di ritorno del andare a prendere() Il metodo è una promessa. Se quella promessa viene risolta, il codice presente all'interno del corpo del Poi() il metodo viene eseguito. Il corpo del Poi() Il metodo dovrebbe contenere il codice in grado di gestire i dati inviati dall'API.

Dobbiamo quindi definire il presa() metodo; IL presa() Metodo esegui solo nel caso in cui la promessa venga rifiutata:

.catch (function ()
);

Tutto in tutti i andare a prendere() Il metodo dovrebbe assomigliare a questo:

Fetch (URL)
.Quindi (function ()
)
.catch (function ()
);

Ora che abbiamo una comprensione della sintassi dell'API Fetch, ora possiamo passare al mondo reale esempi dell'uso del recupero() Metodo su una vera API.

Come utilizzare il metodo Fetch per ottenere dati da un'API

In questo esempio utilizzeremo l'API di un utente GitHub per ottenere i dati delle informazioni dell'utente e visualizzarli sulla console utilizzando solo JavaScript Vanilla; Quindi iniziamo:

Innanzitutto, creeremo una variabile chiamata URL; Questa variabile terrà l'URL dell'API che restituirà le repository di un utente denominato Fabpot:

const url = 'https: // API.github.com/utenti/fabpot/repos ';

Ora useremo il andare a prendere() metodo per chiamare l'API dell'utente GitHub;

Fetch (URL)

IL andare a prendere() Il metodo prende l'URL come argomento:

Fetch (URL)
.Quindi (function (data)
)
)
.catch (function (errore)
);

Nel codice sopra riportato abbiamo chiamato l'API Fetch per ottenere i repository di un utente denominato Fabpot da github. Abbiamo passato l'URL all'API dell'utente GitHub come argomento per recuperare l'API. L'API invia quindi una risposta che è un oggetto con una serie di metodi; Questi metodi possono essere utilizzati per svolgere diverse funzioni sulle informazioni ricevute. Se vogliamo convertire l'oggetto in JSON, possiamo usare il metodo JSON ().

Per convertire l'oggetto in JSON dobbiamo aggiungere il Poi() metodo. IL Poi() Il metodo conterrà una funzione; La funzione prenderà un argomento chiamato risposta:

Fetch (URL)
.Quindi ((risposta) =>)

Il parametro di risposta viene utilizzato per archiviare l'oggetto che viene restituito dall'API. Questo oggetto viene convertito in dati JSON utilizzando il metodo JSON ():

Fetch (URL)
.Quindi ((risposta) => risposta.json ())

Ora possiamo produrre i dati sotto forma di JSON aggiungendo un altro Poi() dichiarazione; Questa affermazione contiene una funzione che prende una variabile denominata come argomento:

.Quindi (function (data)
)
)

Quindi usiamo la console.Metodo log () all'interno del corpo della funzione per produrre i dati sulla console.

.Quindi (function (data)
console.registro (dati);
)

Ora aggiungeremo la funzione catch () per registrare il potenziale errore alla console nel caso in cui la promessa non sia mantenuta:

.catch (err
console.errore (err);
);

Tutto sommato la richiesta di ottenere un elenco di repository dell'utente da GitHub dovrebbe assomigliare a questo:

Fetch (URL)
.Quindi ((risposta) => risposta.json ())
.Quindi ((data) =>
console.registro (dati);
)
.catch (err
console.errore (err);
);

Nello screenshot indicato sopra la promessa è stato risolto e il corpo del .Poi() Il metodo è stato eseguito. Se la promessa era rimasta irrisolta per qualche motivo, allora il corpo del .presa() il metodo sarebbe stato eseguito che farebbe tutta la gestione degli errori. Abbiamo appena usato il .presa() Metodo per stampare un messaggio di errore nel caso in cui la promessa non sia mantenuta.

Conclusione

Comunicare e recuperare i dati da fonti di terze parti è una parte essenziale dello sviluppo web. È stato ottenuto utilizzando uno strumento complesso chiamato XMLHTTPREQUEST che ha causato inferni di callback; Ora uno strumento molto più semplice chiamato API Fetch viene utilizzato per inviare chiamate Ajax in Vanilla JavaScript in quanto è molto meglio nel gestire le richieste AJAX. In questo post abbiamo imparato a utilizzare il metodo API Fetch per effettuare chiamate ajax in vaniglia javascript.