DEV Community

Cristian Fernando
Cristian Fernando

Posted on

Paracetamol.js💊| #131: Explica este código JavaScript

¿Explica el siguiente código JavaScript?

Dificultad: Avanzado

const fetchData = (url) => {
  return fetch(url)
    .then(res => res.json())
    .then(res => console.log(res))
    .catch(err => console.log(err))
}

fetchData("https://jsonplaceholder.typicode.com/users")
Enter fullscreen mode Exit fullscreen mode

¿Cuál de las siguientes opciones es equivalente a fetchData?
A.

const fetchDataA = (url) => {
  try{
    const res = fetch(url);
    const data = res.json();
    console.log(data);
  }catch(err){
    console.log(err)
  }
}
fetchDataA("https://jsonplaceholder.typicode.com/users")
Enter fullscreen mode Exit fullscreen mode

B.

const fetchDataB = async(url) => {
  try{
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
  }catch(err){
    console.log(err)
  }
}
fetchDataB("https://jsonplaceholder.typicode.com/users")
Enter fullscreen mode Exit fullscreen mode

C.

const fetchDataC = (url) => {
  try{
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
  }catch(err){
    console.log(err)
  }
}
fetchDataC("https://jsonplaceholder.typicode.com/users")
Enter fullscreen mode Exit fullscreen mode

D. Ninguna de las anteriores.

Respuesta en el primer comentario.


Top comments (1)

Collapse
 
duxtech profile image
Cristian Fernando

Respuesta:
B.

const fetchDataB = async(url) => {
  try{
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
  }catch(err){
    console.log(err)
  }
}
fetchDataB("https://jsonplaceholder.typicode.com/users")
Enter fullscreen mode Exit fullscreen mode

Puntos a considerar al momento de usar funciones asíncronas con sintaxis async await:

  • Una función async await siempre regresa una promesa.
  • Solo es posible usar la palabra reservada await dentro de una función async.
  • Podemos usar n veces await dentro de una función async.

No es posible resolver problemas asíncronos con código síncrono como en fetchDataA.

Recuerda que async await solo es una manera mas sencilla de escribir código asíncrono, el uso de esta sintaxis es preferencia de cada desarrollador pero usualmente es muy aconsejable usar funciones escritas de esta manera.

Finalmente, no siempre funciones async await son mejores en todos los casos, por ejemplo si queremos usar promesas en paralelo es mucho mejor usar directamente el objeto Promise con sus métodos como por ejemplo Promise.all, etc.