Come recuperare i dati da un'API in JavaScript

Quando si crea un'applicazione di vita reale in JavaScript, l'applicazione deve interagire con API Per inviare e ricevere dati. In JavaScript, ci sono molti modi per interagire con un'API ma il modo più comune e più semplice di interagire con un'API è usando il Andare a prendere() metodo dal API Fetch fornito dal browser. In questo post, impareremo come ottenere dati da a API finta Usando la vaniglia javascript e l'API Fetch.

Il metodo Fetch ()

Questo metodo viene utilizzato per raccogliere dati da qualsiasi API che risponda alla richiesta di un cliente sotto forma di JSON o XML. La sintassi del metodo di recupero è piuttosto semplice, richiede solo un argomento obbligatorio e un parametro opzionale come

Fetch (URL, Opzioni);

• URL: l'URL dell'API per raggiungere e chiedere una risposta sotto forma di JSON O XML
• Opzioni: parametri opzionali che ci aiutano a modificare la richiesta "Ottenere" A "inviare" e altre varianti
• Nota: Il metodo di recupero restituisce una promessa

Per utilizzare il metodo Fetch () nel tuo JavaScript, è necessario avvolgerlo in una funzione Async e chiamare questo Fetch () con la parola chiave di attesa. Con la funzione asincrica, la sintassi è definita come

Funzione funzione Async_Identifier (URL)
const response = ATSEGGIO FETCH (URL);
var data = Aspetta risposta.json ();

Fetching Data da un'API utilizzando il metodo Fetch () in JavaScript

Per testare il metodo Fetch () per recuperare i dati da un'API è necessario un'API fittizia o un'API finta. A tale scopo, stiamo usando l'API fittizia fornita da Req | res con l'URL "https: // reqres.In/API/Products/3".

La seconda cosa di cui abbiamo bisogno è una comprensione di base di come promesse Lavora in JavaScript, per conoscere le promesse in JavaScript puoi visitare questo link.

Successivamente, abbiamo bisogno di una pagina HTML fittizia con alcuni elementi di base al suo interno. Per questo esempio, abbiamo usato le seguenti righe nell'HTML:

Recuperare i dati dall'API

Questo dovrebbe darci la seguente pagina web:

Per il codice JavaScript, la prima cosa che dobbiamo fare è archiviare l'URL in una variabile separata con la seguente riga:

const url = "https: // reqres.in/api/prodotti/3 ";

Quindi definiamo un funzione asincrona Per ottenere i dati dall'API utilizzando il URL Abbiamo appena memorizzato con le seguenti righe:

funzione asincrima getdatafromapi (url)
const response = ATSEGGIO FETCH (URL);
var data = Aspetta risposta.json ();
console.registro (dati);

Quello che stiamo facendo in questo codice è che stiamo aspettando un promettere dal Fetch (URL) e conservando quella promessa all'interno del risposta variabile.

Una volta che abbiamo ricevuto la promessa, dobbiamo convertirla nel formato JSON usando il risposta.JSON (). Da risposta.JSON () è anche una promessa che restituisce i dati, utilizziamo la parola chiave Aspetta.

Infine, stiamo stampando i dati recuperati dall'API utilizzando la funzione di registro della console.

Ora, tutto ciò che dobbiamo fare è chiamare questa funzione Async e passare nell'URL dell'API con la riga seguente:

getDataFromapi (URL);

Il frammento completo del codice è:

const url = "https: // reqres.in/api/prodotti/3 ";
funzione asincrima getdatafromapi (url)
const response = ATSEGGIO FETCH (URL);
var data = Aspetta risposta.json ();
console.registro (dati);

GetDataFromapi (URL);

Se si esegue questa pagina Web e ti dirigi sulla console negli strumenti per sviluppatori del browser, vedrai il seguente output:

Questo è tutto, hai recuperato con successo i dati da un'API usando JavaScript.

Conclusione

IL andare a prendere() metodo dal API Fetch può essere utilizzato per recuperare i dati da un API in vaniglia Javascript. Quando lavori con applicazioni di vita reale devi sapere come interagire con un'API per inviare e ricevere dati. In questo post, abbiamo superato il metodo Fetch () per inviare un REQ a un'API finta e abbiamo ricevuto dati da quell'API, e quindi abbiamo convertito tali dati in JSON con l'aiuto delle promesse in modo che possa essere utilizzato nella nostra applicazione.