Cómo obtener datos de una API en JavaScript

Al construir una aplicación de la vida real en JavaScript, la aplicación debe interactuar con API Para enviar y recibir datos. En JavaScript, hay muchas formas de interactuar con una API, pero la forma más común y más básica de interactuar con una API es mediante el uso de la Buscar() método del API de buscar proporcionado por el navegador. En esta publicación, vamos a aprender a obtener datos de un simulacro Uso de Vanilla JavaScript y Fetch API.

El método Fetch ()

Este método se utiliza para recopilar datos de cualquier API que responda a la solicitud de un cliente en forma de JSON o XML. La sintaxis del método de búsqueda es bastante simple, solo se necesita un argumento obligatorio y un parámetro opcional como

buscar (url, opciones);

• URL: la URL de la API para llegar y solicitar una respuesta en forma de Json o Xml
• Opciones: parámetros opcionales que nos ayudan a cambiar la solicitud desde "conseguir" a "correo" y otras variantes
• Nota: El método de búsqueda devuelve una promesa

Para usar el método Fetch () en su JavaScript, debe envolverlo en una función de async y llamar a este Fetch () con la palabra clave de espera. Con la función async, la sintaxis se define como

function de async function_identifier (url)
respuesta const = espera fetch (url);
VAR data = esperar respuesta.json ();

Obtener datos de una API usando el método Fetch () en JavaScript

Para probar el método Fetch () para obtener datos de una API, necesita una API ficticia o una API simulada. Para este propósito, estamos utilizando la API ficticia proporcionada por Req | res con la URL "https: // reqres.IN/API/Productos/3".

La segunda cosa que necesitamos es una comprensión básica de cómo promesas Trabajar en JavaScript, para conocer las promesas en JavaScript, puede visitar este enlace.

A continuación, necesitamos una página HTML ficticia con algunos elementos básicos dentro de ella. Para este ejemplo, utilizamos las siguientes líneas en el HTML:

Obtener datos de API

Esto debería darnos la siguiente página web:

Para el código JavaScript, lo primero que debemos hacer es almacenar la URL en una variable separada con la siguiente línea:

const url = "https: // reqres.IN/API/Productos/3 ";

Entonces definimos un función async Para obtener los datos de la API utilizando el Url Acabamos de almacenar con las siguientes líneas:

función async getDataFromapi (URL)
respuesta const = espera fetch (url);
VAR data = esperar respuesta.json ();
consola.Dato de registro);

Lo que estamos haciendo en este código es que estamos esperando un promesa desde el buscar (url) y almacenar esa promesa dentro del respuesta variable.

Una vez que recibimos la promesa, necesitamos convertirlo en el formato JSON usando el respuesta.json (). Desde respuesta.json () también es una promesa que devuelve datos, usamos la palabra clave esperar.

Por último, estamos imprimiendo los datos obtenidos de la API utilizando la función de registro de la consola.

Ahora, todo lo que necesitamos hacer es llamar a esta función de asíncrono y pasar la URL de la API con la siguiente línea:

getDataFromapi (Url);

El fragmento de código completo es:

const url = "https: // reqres.IN/API/Productos/3 ";
función async getDataFromapi (URL)
respuesta const = espera fetch (url);
VAR data = esperar respuesta.json ();
consola.Dato de registro);

getDataFromapi (URL);

Si ejecuta esta página web y se dirige a la consola en las herramientas de desarrollador del navegador, verá la siguiente salida:

Eso es todo, ha obtenido datos con éxito de una API usando JavaScript.

Conclusión

El buscar() método del API de buscar se puede usar para obtener datos de un API en vainilla javascript. Cuando trabaja con aplicaciones de la vida real, necesita saber cómo interactuar con una API para enviar y recibir datos. En esta publicación, repasamos el método Fetch () para enviar una REQ a una API simulada y recibimos datos de esa API, y luego convertimos esos datos en JSON con la ayuda de promesas para que pueda usarse en nuestra aplicación.