Devolver valor de fetch con return

Es una buena pregunta. Por supuesto se puede hacer, pero como es un código asíncrono hay que realizar un poco más de programación de lo que planteas.

Lo que te pasa en este código que muestras es que haces el "return" antes de que el servidor haya respondido, cuando todavía lo único que tienes es una promesa que se va a resolver más adelante, por lo que al examinar la respuesta te dice que tienes una promesa simplemente.

Para hacer este ejercicio y tener una función que te devuelve un valor cuando se ha podido realizar la conexión y recibir un dato válido, entonces tienes que implementar tus propias promesas.

Creas una función que te devuelve realmente una promesa, que una vez resuelta te entregará el json que quieres (o el error en caso que hubiese algún problema...)

function obtenerJSON(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        reject(
          "No hemos podido recuperar ese json. El código de respuesta del servidor es: " +
            response.status
        );
      })
      .then((json) => resolve(json))
      .catch((err) => reject(err));
  });
}

Pero claro, como esta función te devuelve una promesa, realmente la necesitas procesar como tal, y hacer la estructura del then/catch, con un código que podría ser así:

obtenerJSON("https://jsonplaceholder.typicode.com/photos/1")
  .then((json) => {
    console.log("el json de respuesta es:", json);
  })
  .catch((err) => {
    console.log("Error encontrado:", err);
  });

Hay un artículo que enseña a crear funciones que devuelven promesas y resolverlas con resolve / reject.

Juanjo

243 8 18 5

Muchas gracias!!

Devolver valor de fetch con return

Respuestas