Una API es simplemente un medio para obtener o enviar datos entre interfaces. Supongamos que desea crear una aplicación que proporcione al usuario algunos datos en tiempo real extraídos del servidor o tal vez incluso le permita modificar o agregar datos a algún otro punto final. Esto es posible gracias a la API o la interfaz de programación de aplicaciones.
Usaremos una API pública simple que no requiere autenticación y le permite obtener algunos datos consultando la API con requests GET .
https://randomuser.me/ es un sitio web que proporciona datos ficticios para usuarios aleatorios con los que podemos trabajar fácilmente. Podemos obtener la respuesta haciendo una solicitud a https://randomuser.me/api/ . La respuesta JSON que recibimos en el siguiente formato.
Javascript
{
"results": [
{
"gender": "female",
"name": {
"title": "Miss",
"first": "Nina",
"last": "Simmmons"
},
"location": {
"street": {
"number": 970,
"name": "Eason Rd"
},
"city": "Fullerton",
"state": "Wyoming",
"country": "United States",
"postcode": 57089,
"coordinates": {
"latitude": "83.1807",
"longitude": "104.7170"
},
"timezone": {
"offset": "+8:00",
"description":
"Beijing, Perth, Singapore, Hong Kong"
}
},
"email": "nina.simmmons@example.com",
"login": {
"uuid": "bd0d135f-84df-4102-aa4f-5baaa41baf5c",
"username": "yellowfrog722",
"password": "dawg",
"salt": "q28gdiyN",
"md5": "291987daea22bb91775226574925b271",
"sha1": "a0463a26ea5c2ff4f3ad498fd01c5994926e5021",
"sha256":
"6583eb74ca08bfac50b3b29aa52c9f02ea5d9d017fef0e5a5a6fae4f5225f928"
},
"dob": {
"date": "1980-11-01T23:10:05.403Z",
"age": 40
},
"registered": {
"date": "2013-04-02T02:26:52.904Z",
"age": 7
},
"phone": "(216)-693-7015",
"cell": "(501)-534-9413",
"id": {
"name": "SSN",
"value": "847-09-2973"
},
"picture": {
"large":
"https://randomuser.me/api/portraits/women/60.jpg",
"medium":
"https://randomuser.me/api/portraits/med/women/60.jpg",
"thumbnail":
"https://randomuser.me/api/portraits/thumb/women/60.jpg"
},
"nat": "US"
}
],
"info": {
"seed": "82a8d8d4a996ba17",
"results": 1,
"page": 1,
"version": "1.3"
}
}
A continuación, debe tener un archivo HTML para la interfaz donde desea mostrar los datos recuperados.
Podemos usar la etiqueta «div» (nivel de bloque) o la etiqueta «span» (nivel en línea), que actuará como marcador de posición para la información. Usando el atributo «id», podemos obtener el contenedor «div/span» requerido donde queremos colocar la información.
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link id="favicon" rel="icon"
href="" sizes="16x16" />
<!-- font-awesome library to make the
webpage more appealing -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- Internal CSS styling -->
<style>
.content {
text-align: center;
padding: 30px;
margin: 0px auto;
}
.details {
margin-left: auto;
margin-right: auto;
}
img {
border-radius: 5px;
box-shadow: black;
}
table,
td {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="content">
<div class="head">
<h1 id="head"></h1>
</div>
<div class="email">
<i class="fa fa-envelope" style=
"font-size: 15px; color: blue;"></i>
<a href="" id="email"> </a>
</div>
<div class="phone">
<i class="fa fa-phone" style=
"font-size: 15px; color: blue;"></i>
<a href="" id="phone"> </a>
</div>
<br />
<div id="user-img"></div>
<br />
<div class="details">
<table>
<tr>
<td>Age</td>
<td><span id="age"></span></td>
</tr>
<tr>
<td>Gender</td>
<td><span id="gender"></span></td>
</tr>
<tr>
<td>Location</td>
<td><span id="location"></span></td>
</tr>
<tr>
<td>Country</td>
<td><span id="country"></span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
La etiqueta del script contendrá el código que realizará la solicitud de API y manejará la respuesta. Esto debe colocarse dentro de la etiqueta del cuerpo o como un archivo separado.
Usamos la función async/await que básicamente asegura que los datos se muestren incluso después de cargar la página.
Puede usar el método console.log (…) para verificar si el usuario está recuperando la información correcta. El resultado del mismo se puede ver abriendo la ventana de la consola en su navegador web (clic derecho -> Inspeccionar -> Consola o Ctrl+Shift+J en Chrome/Edge).
Javascript
<script>
const api_url = "https://randomuser.me/api/";
async function getUser() {
// Making an API call (request)
// and getting the response back
const response = await fetch(api_url);
// Parsing it to JSON format
const data = await response.json();
console.log(data.results);
// Retrieving data from JSON
const user = data.results[0];
let { title, first, last } = user.name;
let { gender, email, phone } = user;
let image = user.picture.large;
let image_icon = user.picture.thumbnail;
let age = user.dob.age;
let { city, state, country } = user.location;
let fullName = title + ". " + first + " " + last;
document.title = fullName;
// Accessing the div container and modify/add
// elements to the containers
document.getElementById("head").innerHTML = fullName;
document.getElementById("email").href = "mailto:" + email;
document.getElementById("email").innerHTML = email;
document.getElementById("phone").href = "tel:" + phone;
document.getElementById("phone").innerHTML = phone;
// accessing the span container
document.querySelector("#age").textContent = age;
document.querySelector("#gender").textContent = gender;
document.querySelector("#location").textContent
= city + ", " + state;
document.querySelector("#country").textContent = country;
// Creating a new element and appending it
// to previously created containers
let img = document.createElement("img");
let img_div = document.getElementById("user-img");
img.src = image;
img_div.append(img);
const favicon = document.getElementById("favicon");
favicon.setAttribute("href", image_icon);
}
// Calling the function
getUser();
</script>
Código final: Es la combinación de las secciones de código anteriores.
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<!-- font-awesome library to make the
webpage more appealing -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- Internal CSS styling -->
<style>
.content {
text-align: center;
padding: 30px;
margin: 0px auto;
}
.details {
margin-left: auto;
margin-right: auto;
}
img {
border-radius: 5px;
box-shadow: black;
}
table,
td {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="content">
<div class="head">
<h1 id="head"></h1>
</div>
<div class="email">
<i class="fa fa-envelope" style=
"font-size: 15px; color: blue;"></i>
<a href="" id="email"> </a>
</div>
<div class="phone">
<i class="fa fa-phone" style=
"font-size: 15px; color: blue;"></i>
<a href="" id="phone"> </a>
</div>
<br />
<div id="user-img"></div>
<br />
<div class="details">
<table>
<tr>
<td>Age</td>
<td><span id="age"></span></td>
</tr>
<tr>
<td>Gender</td>
<td><span id="gender"></span></td>
</tr>
<tr>
<td>Location</td>
<td><span id="location"></span></td>
</tr>
<tr>
<td>Country</td>
<td><span id="country"></span></td>
</tr>
</table>
</div>
</div>
</body>
<script>
const api_url = "https://randomuser.me/api/";
async function getUser() {
// Making an API call (request)
// and getting the response back
const response = await fetch(api_url);
// Parsing it to JSON format
const data = await response.json();
console.log(data.results);
// Retrieving data from JSON
const user = data.results[0];
let { title, first, last } = user.name;
let { gender, email, phone } = user;
let image = user.picture.large;
let image_icon = user.picture.thumbnail;
let age = user.dob.age;
let { city, state, country } = user.location;
let fullName = title + ". " + first + " " + last;
document.title = fullName;
// Accessing the div container and modify/add
// elements to the containers
document.getElementById("head").innerHTML = fullName;
document.getElementById("email").href = "mailto:" + email;
document.getElementById("email").innerHTML = email;
document.getElementById("phone").href = "tel:" + phone;
document.getElementById("phone").innerHTML = phone;
// accessing the span container
document.querySelector("#age").textContent = age;
document.querySelector("#gender").textContent = gender;
document.querySelector("#location").textContent
= city + ", " + state;
document.querySelector("#country").textContent = country;
// Creating a new element and appending it
// to previously created containers
let img = document.createElement("img");
let img_div = document.getElementById("user-img");
img.src = image;
img_div.append(img);
const favicon = document.getElementById("favicon");
favicon.setAttribute("href", image_icon);
}
// Calling the function
getUser();
</script>
</html>
Producción:
Si desea explorar más las API y profundizar en ellas, consulte API públicas que tiene una amplia colección de API disponibles públicamente para impulsar su viaje de exploración de API.
Para probar una API para el tipo de respuesta que da, Postman es una aplicación increíble que satisfará todas sus necesidades. Puede usar el artículo de desarrollo de API de Postman para obtener una idea de cómo usarlo. Otra alternativa son las API de Postman que lo ayudarán a realizar la misma tarea en el navegador.
Publicación traducida automáticamente
Artículo escrito por the_alphaEye y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA