¿Cómo usar la API de recuperación de JavaScript para obtener datos?

La tarea aquí es mostrar cómo se puede usar la API Fetch para obtener datos de una API. Tomaré una API falsa que contendrá detalles de los empleados como ejemplo y de esa API. Mostraré cómo obtener datos mediante el método API fetch().

Método fetch(): El método fetch() es moderno y versátil y está muy bien soportado entre los navegadores modernos. Puede enviar requests de red al servidor y cargar nueva información cuando sea necesario, sin recargar el navegador.

Sintaxis: el método fetch() solo tiene un argumento obligatorio, que es la URL del recurso que desea obtener.
```
let response = fetch(api_url, [other params])
```

Async Await: en este ejemplo, usaremos el método Async Await con el método fetch() para hacer promesas de una manera más concisa. Las funciones asíncronas son compatibles con todos los navegadores modernos.

Sintaxis:

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

Requisito previo: aquí, necesitará una API para realizar la operación fetch() para obtener datos de esa API. También puede crear una API o tomar API simuladas gratuitas.
Aquí, la API que utilicé es: Esta API contiene detalles de los empleados en forma de clave: par de valores.
https://employeedetails.free.beeceptor.com/my/api/path

Enfoque: primero cree el archivo JavaScript, el archivo HTML y el archivo CSS necesarios. Luego almacene la URL de la API en una variable (aquí api_url). Defina una función asíncrona (aquí getapi()) y pase api_url en esa función. Defina una respuesta constante y almacene los datos obtenidos mediante el método await fetch() . Defina datos constantes y almacene los datos en formato JSON mediante el método await response.json() . Ahora obtuvimos los datos de la API mediante el método fetch() en la variable de datos. Pase esta variable de datos a la función que mostrará los datos obtenidos. La función show toma la variable de datos y, al aplicar el bucle en data.list y obtener todas las filas para mostrar, almacena todos los datos en la variable de pestañaque establece la propiedad innerHTML para los empleados de la clase en el archivo HTML. También he agregado un cargador que se carga hasta que llega la respuesta.

Archivo JavaScript:

JavaScript

// api url
const api_url = 
      "https://employeedetails.free.beeceptor.com/my/api/path";
  
// Defining async function
async function getapi(url) {
    
    // Storing response
    const response = await fetch(url);
    
    // Storing data in form of JSON
    var data = await response.json();
    console.log(data);
    if (response) {
        hideloader();
    }
    show(data);
}
// Calling that async function
getapi(api_url);
  
// Function to hide the loader
function hideloader() {
    document.getElementById('loading').style.display = 'none';
}
// Function to define innerHTML for HTML table
function show(data) {
    let tab = 
        `<tr>
          <th>Name</th>
          <th>Office</th>
          <th>Position</th>
          <th>Salary</th>
         </tr>`;
    
    // Loop to access all rows 
    for (let r of data.list) {
        tab += `<tr> 
    <td>${r.name} </td>
    <td>${r.office}</td>
    <td>${r.position}</td> 
    <td>${r.salary}</td>          
</tr>`;
    }
    // Setting innerHTML as tab variable
    document.getElementById("employees").innerHTML = tab;
}

archivo HTML:

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="script.js"></script>
        <link rel="stylesheet" href="style.css" />
        <meta charset="UTF-8" />
        <meta name="viewport" 
              content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <!-- Here a loader is created which 
             loads till response comes -->
        <div class="d-flex justify-content-center">
            <div class="spinner-border" 
                 role="status" id="loading">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <h1>Registered Employees</h1>
        <!-- table for showing data -->
        <table id="employees"></table>
    </body>
</html>

Producción:

En la consola, los datos en JSON se verán así.
Salida HTML.

JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

JavaScript

HTML

Deja una respuesta Cancelar la respuesta