Curso de Asincronismo con JavaScript

Clases del Curso de Asincronismo con JavaScript

Instruido por:
Oscar Barajas Tavares
Oscar Barajas Tavares
Básico
1 hora de contenido
Ver la ruta de aprendizaje
Aplicación de Callbacks, Promesas y Async/Await
Proyecto del curso
Aplicación de Callbacks, Promesas y Async/Await

El estudiante aplicará Callbacks, Promesas y Async/Await para extraer información de una API

Curso de Asincronismo con JavaScript

Curso de Asincronismo con JavaScript

Progreso del curso:0/12contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/12contenidos(0%)

Apropiar los conceptos de asincronismo

Material Thumbnail

Qué aprenderás sobre asincronismo en JavaScript

00:36 min

Material Thumbnail

Introducción al asincronismo

03:40 min

Material Thumbnail

Presentación del reto: consumir APIs

01:55 min

Desarrollar soluciones utilizando asicronismo

Material Thumbnail

Definición Estructura Callback

11:09 min

Material Thumbnail

Peticiones a APIs usando Callbacks

13:25 min

Material Thumbnail

Múltiples Peticiones a un API con Callbacks

09:37 min

Material Thumbnail

Implementando Promesas

13:35 min

Material Thumbnail

Resolver problema con Promesas

13:25 min

Material Thumbnail

Conociendo Async/await

08:43 min

Material Thumbnail

Resolver problema con Async/Await

07:16 min

Comprender las diferencias entre las estructuras asíncronas

Material Thumbnail

Callbacks Vs Promesas Vs Async/Await

06:04 min

nuevosmás votadossin responder
Brayan Ramirez Alzate
Brayan Ramirez Alzate
Estudiante

Me sale este error al ejecutar, alguien sabe por qué y cómo arreglarlo?


> [email protected]1.0.0 callback:challenge
> node src/callback/challenge.js

/home/starman/personalProjects2.0/asincronismo/node_modules/xmlhttprequest/lib/XMLHttpRequest.js:167"url": url.toString(),
                 ^

TypeError: Cannot read property 'toString' of undefined
let XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
let API = 'https://rickandmortyapi.com/api/character/'function fetchData(url_api, callback) {
    let xhttp = newXMLHttpRequest();
    xhttp.open('GET , url_api, true')
    xhttp.onreadystatechange = function(event) {
        if (xhttp.readyState === 4) {
            if (xhttp.status === 200) {
                callback(null, JSON.parse(xhttp.responseText))
            } else {
                const error = newError('Error ' + url_api);
                return callback(error, null)
            }
        }
    }
    xhttp.send()
}
fetchData(API, function(error1, data1) {
    if (error1) return console.error(error1);
    fetchData(API + data1.results[0].id, function(error2, data2) {
        if (error2) return console.error(error2);
        fetchData(data2.origin.url, function(error3, data3) {
            if (error3) return console.error(error3)
            console.log(data1.info.count);
            console.log(data2.name);
            console.log(data3.dimension)
        });
    })


})
1
Juan Cuadros
Juan Cuadros
Estudiante

Hola! Hay manera de exportar los datos que se obtienen de un fetch para guardarlos en una variable? hasta el momento solo me guarda el valor si lo seteo dentro del fetch, pero trato de console loggear y me sale un array vacio, ejemplo: el ultimo log de locations me sale vacio

const XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

const url  = {
  api: "https://rickandmortyapi.com/api",
  characters: "https://rickandmortyapi.com/api/character",
  locations: "https://rickandmortyapi.com/api/location",
  episodes: "https://rickandmortyapi.com/api/episode"
};
let locations = [];

const fetchData = (url) => {
  returnnewPromise((res, rej) => {
    const xhttp = new XMLHttpRequest();

    xhttp.open('GET', url, true);
    xhttp.onreadystatechange = function (event) {
      if (xhttp.readyState === 4) {
        xhttp.status === 200 ?
          res(JSON.parse(xhttp.responseText)) :
          rej(newError('Error ' + url));
      }
    }

    xhttp.send();
  });
}

fetchData(url.locations)
  .then(data => {
    data.results.forEach(el => {
      locations.push({
        name: el.name,
        type: el.type
      });

      return locations;
    })

    console.log(locations);
    return locations;
  });

  console.log(locations);
1
Vanessa Pimentel
Vanessa Pimentel
Estudiante

Me sale un error en la libreria de xmlhttpresponse

como puedo solucionarlo???

/Users/vanessapimentel/Documents/Workspace/repos/asincronismo/node_modules/xmlhttprequest/lib/XMLHttpRequest.js:93this.UNSENT = 0;
              ^

TypeError: Cannot set property 'UNSENT' of undefined
    at exports.XMLHttpRequest (/Users/vanessapimentel/Documents/Workspace/repos/asincronismo/node_modules/xmlhttprequest/lib/XMLHttpRequest.js:93:15)
    at fechtData (/Users/vanessapimentel/Documents/Workspace/repos/asincronismo/src/index.js:37:17)
    at Object.<anonymous> (/Users/vanessapimentel/Documents/Workspace/repos/asincronismo/src/index.js:52:1)
    at Module._compile (node:internal/modules/cjs/loader:1109:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
    at node:internal/main/run_main_module:17:47
1
Andres Alvarez Becerra
Andres Alvarez Becerra
Estudiante

Hola, tengo una pregunta ¿por buenas prácticas es mejor trabajar con fetch que con el objeto XMLHttpRequest (AJAX) cuando queremos trabajar con APIs?

2
Andres Alvarez Becerra
Andres Alvarez Becerra
Estudiante

Hola, tengo una pregunta, no es mejor primero usar la propiedad .onreadystatechange y luego si usar el método open() y send() o es indiferente?

1
Juan Camilo
Juan Camilo
Estudiante
const fetchData = require('../utils/fetchData');

const API = 'https://rickandmortyapi.com/api/character/';

const anotherFunction = async (url_api) => {
  try {
    const data = await fetchData(url_api);
    const character = await fetchData(`${API}${data.result[0].id}`);
    const origin = await fetchData(character.origin.url);

    console.log(data.info.count);
    console.log(character.name);
    console.log(origin.dimension);
  } catch (error) {
    console.error(error);
  }
};

console.log('Before');
anotherFunction(API);
console.log('AFTER');

Por que me da error en la linea const anotherFunction , me sale que la url_api debe de estar en camel case y lo hago a calmel case pero el codigo falla?

2
rednux
rednux
Estudiante

En el curso anterior basico de JavaScript habia una pregunta en el examen referente a que si javaScript era asincronico o no, es sincrono lo que tiene son funciones que hacen que su comportamiento sea similar al asincrono pero en realidad ejecuta una sola tarea a la vez. no entiendo por que aca dicen que si es asincrono?

2
Joorkar Rocha
Joorkar Rocha
Estudiante

Esta linea de codigo la tengo como el profesor

constfetchData = require('../utils/fetchData')

Y VScode me recomienda escribirla asi

import fetchData from'../utils/fetchData'

realmente se puede usar así, alguien me lo puede explicar?

1
Gonzalo Germán Tello
Gonzalo Germán Tello
Estudiante

Hola, hola, gente! Tengo una inquietud, y es que al momento de ejecutar el código con npm, al final no me arroja un array con 2 strings, sino que me concatena los response de las 2 promise. La verdad que no sé si sea un error en el código, o que simplemente la consola me lo está mostrando mal. A alguien le pasó? Dejo acá abajo el código.

const algoVaAPasar = () => {
    returnnewPromise ((resolve, reject) => {
        if (true) {
            resolve('Ok');
        } else {
            reject('Not Ok');
        };
    });
};

algoVaAPasar()
    .then(response => console.log(response))
    .catch(err => console.error(err));

const algoVaAPasar2 = () => {
    returnnewPromise ((resolve, reject) => {
        if (true) {
            setTimeout(() => {
                resolve('Esto está OK');
            }, 3000);
        } else {
            const error = newError ('Qué pasó, qué pasó, vamos ay...');
            reject(error);
        };
    });
};

algoVaAPasar2()
    .then (response => console.log(response))
    .catch (err => console.error(err));

Promise.all([algoVaAPasar(),algoVaAPasar2()])
    .then(response => {
        console.log('Array de promesas: ' + response);
    })
    .catch(err => {
        console.error(err)
    });

1
Jose Andrés Blanco Reyes
Jose Andrés Blanco Reyes
Estudiante

Cuando lo corro no me da error pero tampoco imprime, ayuda

const fetchData = require('../utils/fetchData');
let api = 'https://rickandmortyapi.com/api/character/';


fetchData(api)
.then(data => {
    console.log(data.info.count);
    return fetchData(`${api}${data.results[0].id}`)
})
.then(data => {
    console.log(data.name);
    return fetchData(data.origin.url);
})
.then(data => {
    console.log(data.dimension);
})
.catch(err =>console.error('err'));
1