> Faqs > Devolver valor de fetch con return

Devolver valor de fetch con return

Tengo una función que realiza una conexión Ajax contra un servidor, usando fetch. Quisiera que esta función me devolviese un valor, el json, pero cuando la conexión realizada con fetch haya terminado y ya tengamos el json disponible para entregar como valor de respuesta.

function obtenerDatosJson(rutaJSON) {
	    return fetch(rutaJSON).then(response => response.json());
}

La función me devuelve [object Promise]; ¿cómo éste, puede convertirse a un array javascript retornando el valor con return?

Muchas gracias.

Respuestas

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
248 8 18 5
Muchas gracias!!