Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de recuperación de JavaScript: envíe solicitudes HTTP con React.JS y ejemplo Async-Await

 Fetch API es una moderna API de navegador para JavaScript que le permite obtener recursos de los servidores.

A diferencia de la antigua interfaz XMLHttpRequest, Fetch utiliza Promesas de JavaScript para manejar la naturaleza asincrónica de las solicitudes HTTP.

Esto simplifica enormemente su código, ya que puede evitar escribir un infierno de devolución de llamada y puede usarse con la sintaxis async-await para deshacerse de la then()devolución de llamada y escribir su código asincrónico como código sincrónico.

En este tutorial y ejemplo, veremos cómo usar Fetch para enviar solicitudes GET dentro de una aplicación de ejemplo Reacts.js. También veremos cómo usar la sintaxis Async / Await para evitar usar JavaScript Promises en su código.

¿Cómo utilizar la API Fetch?

Puede utilizar la fetch()API en los navegadores web modernos para obtener datos de servidores remotos y enviar solicitudes HTTP a los servidores API REST.

El fetch()método toma, como primer parámetro, la URL del recurso y un objeto de opciones opcional.

De forma predeterminada, la fetch()API realiza una solicitud GET. Por ejemplo:

fetch(resourceURI)
    .then(res => {
        // Here you can process the response data
    }).catch(err => {
        // Here you can handle request errors if any
    });

Ejemplo de obtención de datos con Fetch & React

Veamos ahora un ejemplo de obtención de datos con el fetch()método. Usaremos la API de GitHub para obtener una lista de usuarios y usaremos React.js para representar los usuarios recuperados.

Abra el App.jsarchivo y comience agregando las siguientes importaciones y definiendo una constante que mantenga nuestra API endoint:

import  React,  {  Component  }  from  "react";
import  { render }  from  "react-dom";
import  "./style.css";

const apiUrl =  "https://api.github.com/users";

A continuación, dentro de la App()función, defina variables de estado para almacenar datos después de obtenerlos del punto final:

function  App()  {
    const  [items, setItems]  =  React.useState([]);

A continuación, llamemos a la API Fetch para obtener una lista de usuarios dentro del useEffect()gancho:

function App() {
  const [items, setItems] = React.useState([]);

  React.useEffect(() => {
    async function fetchData() {
      var data = await fetch(apiUrl).then(res => {
        return res.json();
      });

      setItems(data);
      console.log(data);
    }
    fetchData();
  }, []);

El fetch()método devuelve una promesa que llama al then()método con el objeto de respuesta cuando se cumple. El objeto de respuesta tiene varios métodos para manejar la respuesta de la manera que queremos hacerlo. A continuación, se muestran algunos de estos métodos:

  • json() - Resuelve la promesa con un objeto JSON.
  • text() - Resuelve la promesa con texto plano
  • blob() - Resuelve la promesa con un objeto Blob.
  • formData() - Resuelve las promesas con un objeto FormData

Llamar a cualquiera de los métodos anteriores devuelve una nueva promesa para que podamos usar la palabra clave await para esperar a que la promesa se resuelva dentro de una función asíncrona definida mediante la palabra clave asíncrona .

A continuación, después de enviar una solicitud GET para obtener datos, iteremos sobre los datos devueltos y los mostraremos con el siguiente código:

  return (
    <div class="container">
      {items.map(item => (
        <div class="card">
          <img src={item.avatar_url} />
          <div class="card-body">{item.login}</div>
        </div>
      ))}
      ;
    </div>
  );
}

Y el código completo de nuestra solicitud Fetch es el siguiente:

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

const apiUrl = "https://api.github.com/users";

function App() {
  const [items, setItems] = React.useState([]);

  React.useEffect(() => {
    async function fetchData() {
      var data = await fetch(apiUrl).then(res => {
        return res.json();
      });
      //console.log(data);
      setItems(data);
      console.log(data);
    }
    fetchData();
  }, []);

  return (
    <div class="container">
      {items.map(item => (
        <div class="card">
          <img src={item.avatar_url} />
          <div class="card-body">{item.login}</div>
        </div>
      ))}
      ;
    </div>
  );
}

render(<App />, document.getElementById("root"));

Este es el ejemplo completo de Stackblitz .

Conclusión

En este tutorial, hemos visto por ejemplo cómo enviar solicitudes GET con Fetch en JavaScript y React.js. También hemos visto cómo usar la sintaxis Async / Await con Fetch para evitar usar Promesas de JavaScript .


Publicar un comentario

0 Comentarios