Manejando promesas

Resumen

Una Promesa es un proxy para un valor no necesariamente conocido en el momento que es creada la promesa.

Las promesas tienen tres estados:

pending
fullfilled
rejected

Las promesas se invocan de la siguiente forma:

new  Promise( ( resolve, reject ) => {
// --- llamado asíncrono 
        if( todoOK ) { 
        // -- se ejecutó el llamado exitosamente resolve() }
        else { 
        // -- hubo un error en el llamado reject() 
        } 
} )

Oscar Miguel Fabian Bernal

student•

Usando Hooks (y prettier):

import React, { useState, useEffect } from "react";
import axios from "axios";
const App = () => {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const { data } = await axios(
        "https://jsonplaceholder.typicode.com/users"
      );
      setUsuarios(data);
    }
    fetchData();
    console.log("primero se mostrara este texto");
  }, []);

  return (
    <div className="margen">
      <table className="tabla">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>
          {usuarios.map(item => (
            <tr>
              <td>{item.name}</td>
              <td>{item.email}</td>
              <td>{item.website}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default App;

Diego Ivan Padilla Bernal

student•

Es casi como lo manejo yo, solo que te faltó controlar el error y simplificar un poco más, se puede usar una función anónima para eso.

Todo el código el demás código lo tenemos igual, así que solo pongo el del método de useEffect:

  useEffect(() => {
    (async function() {
      try {
        const {data} = await axios.get(
          "https://jsonplaceholder.typicode.com/users"
        );
        setUsuarios(data);
      } catch (err) {
        console.log(err);
      }
    })();
  }, []);

Josua Guaramato

student•

Podrian explicarme cuando es mejor usar Hook o un Class Component? Gracias.

Carol Estefanny Masmela Escamilla

student•

Me gusta también utilizarlo con Hooks y con fetch:

Mi codigo 😎

import React, {useState, useEffect} from 'react';

const App = () =&gt; {
    const [state, setState] = useState({
        users: [ ]
    });

    useEffect(() =&gt; {
        fetchData();
    }, [])

    const fetchData = async () =&gt; {
        try {
            const response = await fetch('https://jsonplaceholder.typicode.com/users');
            const data = await response.json();
            setState({users: data});
        } catch (error) {
            console.error(new Error(error));
        }
    }

    const putRows = () =&gt; (
        state.users.map((user) =&gt; (
            &lt;tr key={user.id}&gt;
                &lt;td&gt;{user.name}&lt;/td&gt;
                &lt;td&gt;{user.email}&lt;/td&gt;
                &lt;td&gt;{user.website}&lt;/td&gt;
            &lt;/tr&gt;
        ))
    );

José David Garzón

student•

Hola, por que se pasa un array vacio como segundo parametro de useeffect?

Miguel Angel Reyes Moreno

student•

José, es un array de dependencias (aún no sé qué quiere decir, pero encontré un post que lo menciona: useEffect React

Michel Roberto Traña Tablada

student•

Otra forma de manejar la promesa en vez de usar async / await es resolverla con then / catch. El código quedaría así:

componentDidMount() {
	axios.get('https://jsonplaceholder.typicode.com/users')
	.then((respuesta) => { // si no hay errores
		this.setState({
			usuarios: respuesta.data,
		})
	})
	.catch(error => {
		// aquí manejamos el error a nuestro gusto
		console.log(error);
	});
}

Victor Hugo Cortés Posada

student•

si quieres manejar un error, y seguir utilizando async / await. Tienes que envolver el código dentro de un try/catch.

Jonatan Ariste

student•

Muy buen aporte. Por ahora viene siendo un curso de React la verdad...

Jorge Eliecer Rangel Jimenez

student•

Ejemplo usando hooks

`import React, { useState, useEffect } from "react";
import axios from "axios";

const App = () => {
  const [usuarios, setUsuarios] = useState([]);

  const obtenerUsuarios = async () => {
    const respuesta = await axios.get(
      "https://jsonplaceholder.typicode.com/users"
    );
    setUsuarios(respuesta.data);
  };

  useEffect(() => {
    obtenerUsuarios();
  }, []);

  const ponerFilas = () =>
    usuarios.map((usuario) => (
      <tr key={usuario.id}>
        <td>{usuario.name}</td>
        <td>{usuario.email}</td>
        <td>{usuario.website}</td>
      </tr>
    ));

  return (
    <div className="margen">
      <table className="tabla">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>{ponerFilas()}</tbody>
      </table>
    </div>
  );
};

export default App;

René Sanchez

student•

Muy buen aporte :)

Darwin Yusef Gonzalez

student•

Seba Cardoso

student•

Excelente estas clases de repaso antes de comenzar con Redux.

Felipe Salamanca Gonzalez

student•

excelente clase

David Dias

student•

Lo que no entiendo bien es que pongo un console.log abajo del render y este se ejecuta 4 veces ( 2 con el state vacio y 2 con el state ya actualizado con los datos) y pues veo en la clase que solo deberia haber 2 logs

Luis Lira

student•

Hola!

Probablemente si hiciste tu proyecto de con create-react-app tengas la etiqueta <React.StrictMode> en el archivo index.js, ese archivo ese el encargado de ese comportamiento. Lo que hace es renderizar dos veces los componentes para asegurar que todo el renderizado se hizo correctamente. Si quitar esa etiqueta debería comportarse como lo esperas.

Willy David Da Conceicao Lozada

student•

Causa de estos errores? y porque aparece esto [HMR] Waiting for update signal from WDS... ![](

Alvaro Garracini

student•

Hola Willy!

Puedes mostrarnos tu código?

Saludos

Rubén Padilla

student•

Hot Module Replacement [HMR]

Kevin Barreto

student•

Mi aporte para hacer fetch de los usuarios

import { useState, useEffect } from "react";
import { api } from "../../api/api";

import "./Table.module.css";

export default function Table() {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const fetchUsers = async () => {
      setIsError(false);
      setIsLoading(true);
      try {
        const result = await api.get("/users");
        setUsers(result.data);
      } catch (error) {
        setIsError(true);
      }
      setIsLoading(false);
    };

    fetchUsers();
  }, []);

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error</div>;

  return (
    <table>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Email</th>
          <th>Link</th>
        </tr>
      </thead>
      <tbody>
        {users.map(({ name, email, website, id }) => (
          <tr key={id}>
            <td>{name}</td>
            <td>{email}</td>
            <td>
              <a href={website}>{website}</a>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Juan José Vargas Fletes

student•

Usando Custom Hooks y pasando la tabla a otro componente, podría quedar así :3

import React from "react";

import Table from "./components/table";

import { useUsers } from "./api/users";

const columns = ["name", "email", "website"];

function App() {
    const { users, isLoading, isError } = useUsers();

    if (isLoading) {
        return <p>Loading...</p>;
    }

    if (isError) {
        return <p>Ha ocurrido un error :(</p>;
    }

    return (
        <div>
            <Table data={users} columns={columns} />
        </div>
    );
}

export default App;

Daniela Funes

student•

Estas clases de repaso de React me han encantado,. Y aunque ahora usamos hooks es muy bueno conocer y entender esta sintaxis. Excelente profesor.

Andrés Felipe Eslava Zuluaga

student•

import React from 'react';
import axios from 'axios';


class App extends React.Component {
  constructor() {
    super();
    this.state = {
      users: []
    }
    
    this.API_URL = 'https://jsonplaceholder.typicode.com/users';
  }
  
  async componentDidMount() {
    const response = await axios.get(this.API_URL);
    this.setState({users: response.data});
  }

  makeRows() {
    return this.state.users.map( user => (
      <tr key={user.id}>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>{user.website}</td>
      </tr>
    ))
  }

  render() {

    console.log(`users`, this.state.users)
    return (
    <table className="App">
      <thead>
        <tr>
          <th>
            Nombre
          </th>
          <th>
            Correo
          </th>
          <th>
            Enlace
          </th>
        </tr>
      </thead>
      <tbody>
        {this.makeRows()}
      </tbody>
    </table>
    );
  }
}

export default App;

Ernán Alexander Velásquez Ramírez

student•

Hay un problema con usar this.setState en componentDidMount(), no compila.

Mi forma de abordarlo es declarar un método de la clase App exclusivo para actualizar el estado de Users. Y llamarlo dentro de la función componentDidMount(),

Este es mi código:

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {

  constructor() {
    super();
    this.state = {
      users: [],
    };
  }

  updateState(data) {
    this.setState({
      users: data,
    });
  }

  async componentDidMount() {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    console.log(response);

    this.updateState(response.data);
  }

  pushData() {
    const { users } = this.state;

    return (
      users.map(({ id, name, email, website }) => (
        <tr key={id}>
          <td>{name}</td>
          <td>{email}</td>
          <td>{website}</td>
        </tr>
      ))
    );
  }

  render() {
    return (
      <div className='margin'>
        <table className='tabla'>
          <thead>
            <tr>
              <td>Nombre</td>
              <td>Email</td>
              <td>Enlace</td>
            </tr>
          </thead>
          <tbody>
            {this.pushData()}
          </tbody>
        </table>
      </div>
    );
  }

};

export default App;

Miguel Angel Reyes Moreno

student•

Usando axios, async await y hooks:

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const App = () => {
  const [users, setUsers] = useState([])

  useEffect(() => {
    async function fetchUsers() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users')
        setUsers(response.data)
      } catch (error) {
        console.error(error)
      }
    }
    fetchUsers()
  }, [])

    return (
      <div className="margen">
        <table className="tabla">
        <thead>
          <tr>
            <th>Name</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>
          {users.map(user => (
            <tr key = {user.id} >
              <td>{user.name}</td>
              <td>{user.email}</td>
              <td>{user.website}</td>
            </tr>
          ))}
        </tbody>
      </table>
      </div>
    )
}

export default App

Fernando Jesús Paredes Rios

student•

Con hooks lo hice de esta manera

import React, { useState , useEffect} from 'react';
import axios from 'axios';

const App = () => {

  const [data, setData] = useState([]);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then(response => setData(response.data))
  }, [])

  
    return (
      <div className="margen">
        <table className="tabla">
          <thead>
            <tr>
              <th>
                Nombre  
              </th>
              <th>
                Correo
              </th>
              <th>
                Enlace
              </th>
            </tr>
          </thead>
  
          <tbody>
            {data.map((usuario) => (
              <tr key={usuario.id}>
                <td>
                  {usuario.name}
                </td>
                <td>
                  {usuario.email}
                </td>
                <td>
                  {usuario.website}
                </td>
              </tr>
            ))}
            
          </tbody>
        </table>
      </div>
    );
}


export default App;

Rafael Soriano Ramírez

student•

Manera pulcra de explicar

Marco Antonio Trujano Rodriguez

student•

Si lo prefieren con Hooks y fetch

  const [usuarios, setUsuarios] = useState([])
  useEffect(()=> {
        async function getUsers() {
        const response = await fetch('https://jsonplaceholder.typicode.com/users')
        const results = await response.json()
        setUsuarios(results)
      }
      getUsers()
    },[]
  )

john edgar delgado chaverra

student•

import React,{useState,useEffect} from 'react'
import './App.css'

const App=()=>{
    const [usuarios,setUsuario]=useState([])
    const [error,setError]=useState(false)
    const [isLoaded,setIsLoaded]=useState(true)
    
   async function DataConection(event) {
    await fetch('https://jsonplaceholder.typicode.com/users')
    .then(res => res.json())
    .then(
        (result)=> {
            setUsuario(result)
            setIsLoaded(false)
        },
        (err)=>{
            setIsLoaded(false)
            setError(err)
        }
    )
    
    }
    
    useEffect(()=>{
        DataConection()
    },[])
    console.log(usuarios);

    

    if (error) {
        return(
        <div>Error:{error.message}</div>
        )
    }else if (isLoaded) {
        return(
            <div>Loading ...</div>
        )
    }
    else{
     return (
          
            <div className="margin">
                  {/* <button onClick={()=>DataConection()}>Load More</button> */}
                <table className="table">
                    <thead className="">
                        <tr>
                            <th>nombre</th>
                            <th>correo</th>
                            <th>UserName</th>
                        </tr>
                    </thead>
                    <tbody>
                       
    
                            {
                            usuarios.map(item => (
                                 <tr>
                                    <td key={item.name}>
                                        {item.name}  
                                </td>
                                <td >
                                         {item.email}
                                
                                </td>
                                  <td >
                                        {item.username}
                                
                                </td>
                                </tr>
                            ))}
                            
                            
                        
                    </tbody>
                </table>
            </div>
            
          );
    
    }
       
    }

export default App

Robert Romero Medina

student•

Exelente clase

Manejando promesas

Bienvenido al curso

Conoce a tu profesor y todo lo que aprenderás sobre Redux

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

¿Qué es React y cómo funciona?

Preparando nuestro entorno de trabajo

Creación de la app con React

Agregando funciones a la app con React

Stateful vs Stateless

Ciclo de vida de React

Manejando promesas

React Router DOM

Introducción a Redux

¿Qúe es Redux, cuándo usarlo y por qué?

Fases de Redux

Introducción: las fases de Redux

Store

Reducers

Conexión a un componente

Action Creators

Redux Thunk

Explicación teórica: ciclo completo de Redux

Práctica: ciclo completo de Redux

Fases Extra

Archivos Types

Try Catch

Escenarios asíncronos

Componente Spinner

Componente Fatal

Tabla como componente

Compartir información en Redux

Introducción Compartir información en Redux

Parámetros por URL

Compartir Reducer

Múltiples Reducers

Llamando a múltiples reducers en una acción

Uso del estado en la acción

Evitar segundas búsquedas

Inmutabilidad

Evitar sobrescritura

Validación compuesta

Validación de errores

Modificando respuesta de url

Estado con interacción

Mostrar componentes dinámicamente

Llamadas asincronas dinámicas

Props por herencia vs estado

Estado compartido

Métodos HTTP

Introducción a métodos HTTP

Nuevo ciclo Redux

Normalizar datos

Mapear Objetos

Componente para agregar tarea

Manejar inputs con Reducer

POST

Deshabilitando botón

Redireccionar

Reutilizar componentes

PUT

DELETE

Últimos detalles

Conclusión

Conocimientos adquiridos

Qué hacer a continuación