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.


Discussion (1)

Collapse
duxtech profile image
Cristian Fernando Author

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.